Development Environment Setup
1. Install node.js. What you really need is npm that is installed as part of node.js.2. Install create-react-app npm module globally. This npm modules contains scripts that set up a new app, ready for further development.
npm install -g create-react-app
3. Create a folder where you want to create your react apps
C:\> md react
C:\> cd react
C:\react>
4. Create an app
C:\react> create-react-app hello-react
5. Change to your new application directory
C:\react> cd hello-react
6. Now you can run the dev version of your app.
npm start
7. Build production optimized version of your app in the build subfolder.
npm run build
8. To run the production version, npm install a static server (need to do just once)
npm install -g serve
9. Run the production version of the app
serve -s build
10. To manage all the configuration scripts yourself (permanent for the app; cannot be reverted).
npm run eject
React-friendly Editors, IDEs and Tools
- Visual Studio Code
- Sublime Text
- WebStorm
- Chrome Extension for React
Tools under the hood
React development environment uses the following tools.
- Babel - Transpiler to convert ES6 JavaScript to ES5 for a wider Web Browser compatibility
- webpack module bundler - To create a single bundle of js from multiple files
- express - http server for dev
- serve-static - To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express
- eslint - static analysis of code
Advanced State Management Module (optional)
- Redux
- Use redux-logger middleware for viewing state changes
