Overview:

This is a starter webpack project for React that aims to transpile and bundle ES6 React code. It provides a step-by-step guide on how to use the project and set it up for development purposes. It also separates the client and server components and allows for hot module reloading during development.

Features:

• Webpack Integration: Transpile and bundle ES6 React code using webpack.
• Separate Client/Server Components: Organize components in separate folders for better code management.
• Hot Module Reloading: Enable hot module reloading for quicker development feedback.

Installation:

To install and use this starter webpack project, follow the steps below:

1. Fork this repository.
2. Rename your repository according to the app you’re building.
3. Start the development server with a watcher that rebuilds the code by running npm run dev.
4. The assets built by webpack will be placed in the server/public folder.
5. This folder is defined as a static folder in an Express.js server that can be started with npm run server.
6. Additional components should be placed in client/components.
7. To host the client using webpack-dev-server with hot module reloading, open two terminals.
8. In one terminal, run the command:

   webpack-dev-server --open --port 8080
   

9. In the other terminal, run the command:

   npm run server
   

10. The client will be available on http://localhost:8080 and the server on http://localhost:3000.
11. Note that you will still need to manage CORS between the client and server as they are on different ports.

Summary:

This starter webpack project for React provides a convenient way to transpile and bundle ES6 React code. It separates the client and server components for better code organization and offers hot module reloading during development. By following the installation guide, developers can quickly set up a development environment for React projects.