React App Boilerplate (Learning ReactJS17)

2.1.2.1 React App Boilerplate

To keep focus on learning the React library, a React app boilerplate pack is provided with this book. The boilerplate project comes with all the basic files and configurations needed to start developing immediately.

After downloading it, all you have to do is

install the dependencies and
run the development server to test the project in the browser.
To automatically install all the dependencies, open the terminal or command prompt and run
```
npm install
```
To run the development server, simply type
```
npm start.
```

Objective
This boilerplate is purposefully simple to show the minimal setup needed to create React projects with Webpack and Babel. It aims to be a starting point for learning React, with low cognitive load and as such avoids having many separate config files and advanced configuration options, while providing a solid foundation for new React projects.
Usage
1. Create a clone of the source code
```
git clone git@github.com:pro-react/react-app-boilerplate.git
```
2. Enter the boilerplate source directory
```
cd react-app-boilerplate
```
3. Install its dependencies
```
npm install
```
4. Start the application in development mode
```
npm start
```
5. Open http://localhost:8080 in your browser.
  - ‘Static’ files are served from the public folder,
  - project JavaScript files are bundled from the app folder.
6. Build for production
```
npm run build
```
  - This will generate a minimized bundle.js file on the public folder.
Missing Features
This boilerplate focuses solely on transforming and bundling javascript files—all other static files are served directly from the public folder without any processing.

While useful for learning React, this setup doesn’t use Webpack and Babel in their full capabilities—which include
- transforming and bundling projects assets (such as stylesheets),
- modularizing CSS,
- hot reloading and etc.
Dependencies
- React & React-DOM
- Webpack & webpack-dev-server
- Babel Core
- Babel Loader (With "es2015" and "react" presets)