Note: watch out for typos in dependencies. Typosquatting is a security concern!
Install NPM
npm install -g npm npm --version
cd projectfolder npm install npm run dev npm run start
- Vanilla React: create modular UIs.
- From MVC : focuses on View
- load/store data? no opinion, you must customize it
- bad practice: stuff it into components
- alternative: tooling
- React Redux: - manage state of React Application: Flux
- Redux Thunk: Thunk middleware for Redux: separate side effects: network requests, npm install redux-thunk
- Reselect: simple selector: abstract away the state's structure
- Styled Components: visual primitives: ES6+CSS: manages the appearance of components
- make codebase more maintainable
- idea of React ecosystem tools
Boilerplate generators are fine, this is for a bit more understanding.
- index.html
- support for ES6
- webpack
- root component
- react hotloader
npm init -y git init mkdir public src
- create html stub with root div and bundle.js
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
- create .babelrc with react presets
npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
-
configure webpack
-
create/edit webpack.config.js
npx webpack-dev-server --mode development
npm install --save-dev react-refresh @pmmmwh/react-refresh-webpack-plugin
- configure react-refresh