LinkedIn React Redux Tutorial - tifojo/knowledge_base GitHub Wiki

https://www.linkedin.com/learning/building-modern-projects-with-react/the-react-entry-point

Starting a React project from scratch

1. Initialize an npm package: npm init -y
2. Create an index.html with root element and script tag pointing to bundle.js
3. Install Babel: npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react
4. Create .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

5. Create index.js, app.js, app.css
6. npm install react react-dom

Configure Webpack

1. Install Webpack: npm install --save-dev webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader
2. Create webpack.config.js: extensions, loaders, outputs, dev server, etc.
3. React hot loader: npm install --save-dev react-hot-loader and wrap top-level App component

Redux best practices

1. Export both connected and unconnected versions of a component (unconnected version is useful for testing)
2. Don't dispatch actions or perform async operations inside reducers (use thunk instead)
3. Components that are connected to the store become less reusable. Consider abstracting out a parent component

Adding redux-thunk

1. npm install redux-thunk redux-devtools-extension @babel/runtime # for async thunks
2. npm install --save-dev @babel/plugin-transform-runtime
3. Add @babel/plugin-transform-runtime to .babelrc