Simple starter kit to get started with [React]. [Webpack], [Babel] and [Jest] are preconfigured so you can focus on writing code.
[Download] this repo and extract it to some folder, say my-app.
cd my-appRun this to install the dependencies:
npm installInstalled packages will be placed inside the node_modules folder.
Run this to start the development server:
npm startOpen http://localhost:8080/ to see your app in browser.
Run this to test your app:
npm testCoverage files will be placed inside the coverage folder.
Run this to build and optimize your app for production:
npm run buildCompiled files will be placed inside the build folder.
This is the initial directory structure:
my-app
├── .gitignore
├── package.json
├── README.md
├── config
│ └── jest.js
│ └── mock.js
│ └── webpack.js
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.html
└── index.js
└── logo.svg
Webpack config is in config/webpack.js, Babel config is inside package.json under "babel" key and Jest config is in config/jest.js. Webpack and Jest config is kept minimal to make it easier to understand and customize them.
The main entry point for your app is src/index.js. js files are loaded using babel-loader with react-app preset. This allows you to use ES6 and JSX syntax. Output will be placed inside build/js folder.
css files are loaded using css-loader and separated from js files using extract-text-webpack-plugin. Output will be placed inside build/css folder.
src/index.html file is processed using html-webpack-plugin. Output will be placed in build/index.html file. Paths to compiled js and css files will be automatically injected into this file.
Images and font files are loaded using file-loader. They will be placed inside build/img and build/fonts folders.
To use [Sass], install these packages:
npm install sass-loader node-sass --save-devAnd add sass-loader to config.module.rules array in config/webpack.js:
{
test: /\.scss$/,
loader: styles.extract(['css-loader', 'sass-loader']),
},