React Typescript Webpack2 CssModules PostCSS

Overview:

This product is a simple starter template for a React SPA project. It includes several features such as React, TypeScript, postCSS, ITCSS, CSS-Modules, Webpack 2, and Live Reloading (React Hot Loader 3). The template aims to provide a quick scaffolding for starting a single page application project.

Features:

• React
• TypeScript (compiling directly to ES5)
• Hot Module Replacement (React Hot Loader)
• Webpack
• Webpack-dev-server
• Webpack configuration for HMR
• Webpack production configuration
• Split out css files using ExtractTextPlugin
• UglifyJsPlugin with options
• Use include in the loader instead of the exclude
• Webpack stats (bundle optimization helper)
• Generate stats.json file with profiler
• Webpack visualizer
• EditorConfig
• Styling with postCSS and CSS modules
• Linting with TSLint and stylelint
• Testing with Jest, Enzyme, and react-test-renderer

Installation:

1. Install the prerequisites:

   • Node.js and NPM: Download and install the latest version.
   • Git: Download and install the latest version.

2. Clone the repository:

   • Get the URL of the forked project from Github.
   • Open the command line and navigate to your desired directory.
   • Run the following command: git clone [url]

3. Install project dependencies:

   • Open the project with your preferred IDE (e.g. VS Code).
   • Run the development server with hot reloading.

4. Build for production:

   • Generate stats (stores the html file with the stats under webpack/stats folder).
   • View the stats and analyze them using the provided tool.

Summary:

This product is a simple starter template for a React SPA project. It includes features such as React, TypeScript, postCSS, ITCSS, CSS-Modules, Webpack 2, and Live Reloading. The installation process involves cloning the repository, installing the necessary dependencies, and running the development server. The template also provides tools for linting, testing, and bundling the project for production. It aims to provide a quick and easy way to begin building a React application with the mentioned features and configurations.