Create React App is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration. create-react-app is a global command-line utility that you use to create new projects.

• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md

First, install the global package:

$ npm install -global create-react-app

This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder:

$ create-react-app hello-world

Run below commands to launch the development server. The browser will open automatically with the created app’s URL.

$ cd hello-world
$ npm start

To build an optimized bundle, run npm run build. It is minified, correctly envified, and the assets include content hashes for caching.

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:

$ npm install --save react-bootstrap bootstrap@3

Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your src/index.js file:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

Import required React Bootstrap components within src/containers/App/App.js file or your custom component files:

import { Navbar, Jumbotron, Button } from 'react-bootstrap';

First you’ll need to eject your project if you haven’t already.

$ npm run eject

The SASS precompiler runs at build time not runtime, therefore we save it with the save-dev switch.

$ npm install sass-loader node-sass --save-dev

Open file config/webpack.config.dev.js, locate the existing css rule block, duplicate it, and use it as a reference to create a new scss rule block. Edit file config/webpack.config.prod.js in same style.

{
	test: /\.scss$/,
	use: [
		{
			loader: require.resolve('style-loader'),
		},
		{
			loader: require.resolve('css-loader'),
			options: {
				importLoaders: 2,
			}
		},
		{
			loader: require.resolve('sass-loader'),
		},
		{
			loader: require.resolve('postcss-loader'),
			options: {
				ident: 'postcss',
				plugins: () => [
					require('postcss-flexbugs-fixes'),
					autoprefixer({
						browsers: [
							'>1%',
							'last 4 versions',
							'Firefox ESR',
							'not ie < 9',  
						],
						flexbox: 'no-2009',
					}),
				],
			},
		},
	]
},