Starter for react projects with support of hot reloading.
Starter shipped with next preinstalled libraries:
Starter supported hot reloading for JavaScript files and Sass files. For more information about HMR see react-hot-loader and react-imported-component.
Also starter supported code splitting for async routes (see src/App.jsx).
git clone https://github.com/nikolaas/react-hot-reload-starter.git
cd react-hot-reload-starter
npm install
npm run dev
Last command starts Webpack Dev Server on address http://localhost:9000.
Application is build using Webpack 4.
To build application you should run command:
npm run build
The command run lining, testing and building of application. Result of building will be placed in dist folder. If you want run only build without linting and testing, run command:
npm run build:min
Command run building minified bundle.
Or you can run command:
npm run build:fat
Command run building not minified bundle.
To run the production build, execute the command:
npm start
Command starts a simple static server on address http://localhost:9000.
Starter use ESLint with config based on Airbnb's eslint config for linting code.
To linting code of application you should run command:
npm run lint
In development mode ESLint emits warnings allowing you to focus on writing code and not being distracted by fixing ESLint's errors. But in production build ESLint will be emits errors instead of warnings. That will lead to a failure of the build.
Starter used Jest and Enzyme for testing. Tests placed in test folder.
To run tests you should run command:
npm run test
Updating jest snapshots:
npm run test:update
Generating code coverage:
npm run test:coverage
Debugging of tests:
npm run test:debug
Assets placed in src/assets folder. You can use jpeg, jpg, png, gif and svg images by importing it in code.
By default svg files imported as usual image i.e. import expression returned relative path to svg image and the file itself copied to dist/images folder.
If you need do some dynamic actions with svg image, for instance change color on hover or add click handler, you can import your image as React Component. For this you should add suffix ".dynamic" to end of file's name. For instance if you want import svg image with name "awesome-image.svg" as React Component you should rename your svg file to "awesome-image.dynamic.svg" ant then import it with common way:
import AwesomeImage from './path/to/your/awesome-image.dynamic.svg';AwesomeImage is React Component and you can do with it too as with any other React Component:
<AwesomeImage className="some-class" onClick={this.handleClick}/>