React Webpack Boilerplate

Overview:

The ES6 React boilerplate using Webpack is a simple and optimized React boilerplate that includes various features such as React 16.5.2 support, ECMAScript 6+ and JSX support, React Router v4, component testing using Enzyme and Jest, code coverage, hot module replacement, ES6 linting, SASS support, separate CSS stylesheets generation, automatic HTML generation, production config, custom Babel preset with decorators, class properties, and rest/spread operator support, and the ability to export separate vendor files. However, it is important to note that the project has been deprecated as of December 29, 2018, and no further development is planned.

Features:

• React 16.5.2: Supports the latest version of React.
• ECMAScript 6+ and JSX support: Allows for using modern JavaScript syntax and JSX in React components.
• React Router v4: Provides routing functionality for React applications.
• Component testing using Enzyme and Jest: Allows for testing React components with Enzyme and Jest.
• Code Coverage: Includes Jest Code Coverage tool for generating code coverage reports.
• Latest Webpack, Babel, and Webpack Dev Server: Utilizes the latest versions of Webpack, Babel, and Webpack Dev Server with Scope Hoisting enabled.
• Hot Module Replacement using react-hot-loader: Enables hot module replacement to update changed modules without a full reload.
• ES6 linting: Includes continuous linting of ES6 code on file change.
• SASS support: Provides support for using SASS to style React components.
• Separate CSS stylesheets generation: Generates separate CSS stylesheets for better organization.
• Automatic HTML generation: Automatically generates HTML files.
• Production Config: Includes a production configuration for creating a production-ready build.
• Custom Babel Preset: Includes a custom Babel preset with support for decorators, class properties, and rest/spread operators.
• Export Separate Vendor Files: Ability to export specific vendors in separate files for independent JavaScript and CSS libraries.

Available Commands:

• npm start: Starts the development server.
• npm clean: Deletes the dist folder.
• npm run production: Creates a production-ready build in the dist folder.
• npm run lint: Executes an eslint check.
• npm test: Runs all tests.
• npm run test:watch: Runs all tests in watch mode.
• npm run coverage: Generates a code coverage report in the coverage folder.

Vendor Exporting:

You can export specific vendors in separate files by including them in the app/vendors folder. These vendors will be exported in a vendors folder under the dist folder. Ensure that you add the vendors in both app/index.html and build/index.html files.

Code Coverage:

The project utilizes the Jest Code Coverage tool for generating code coverage reports. You can generate the code coverage report by running npm run coverage. The coverage report consists of an HTML reporter, which can be viewed in the browser, as well as additional helper coverage files like the coverage JSON and XML files.

Production Code:

To create a production-ready build, run the command npm run production. The production-ready code will be located under the dist folder.

Summary:

The ES6 React boilerplate using Webpack is a deprecated project that offers a simple and optimized boilerplate for developing React applications. It includes various features such as support for React 16.5.2, ECMAScript 6+ and JSX syntax, React Router v4, component testing with Enzyme and Jest, code coverage, hot module replacement, SASS support, separate CSS stylesheets generation, automatic HTML generation, production config, and custom Babel preset. Despite being deprecated, it can still serve as a helpful resource for developers looking to quickly set up a React project with modern build tools and best practices.