React Update 2021: Summary
React¹⁷.0.2, Material UI⁴.11, @reduxjs/toolkit¹.6.0, redux-hook-form⁷.10, Typescript⁴.1.2, Created at July 21, 2021, Read Series…
Read Series…: This series is React knowledge preparation/update to build a Gmail-link react dashboard.
Example code on Github, “1-basic” branch.
The following content covered in this article:
- Technical decisions
- npm Package list
- Referenced online Articles
Technical decisions
- Typescript
- react function component
- @reduxjs/toolkit
- axios for api
- react-hook-form
npm Package list
Basic-1.1. create-react-app
- npm uninstall -g npx
- npm install -g npx
- npm uninstall -g create-react-app
- npm install -g create-react-app
- npx create-react-app react17mui4 — template typescript
Basic-1.2.1. material-ui/core
- npm install @material-ui/core
- npm install @material-ui/icons
Basic-1.3. i18next
- npm install react-i18next i18next — save
- npm install i18next-http-backend i18next-browser-languagedetector
Basic-1.4. react-redux
- npm install @reduxjs/toolkit react-redux
Basic-1.4.1. reduxjs-toolkit-persist
- npm install reduxjs-toolkit-persist
Basic-1.5. react-router-dom
- npm install — save react-router-dom
Basic-1.6. react-cookie
- npm install react-cookie
Basic-1.7. axios and react fetch
- npm install axios
- npm install — save @types/qs
Basic-1.8. Forms: chose react-hook-form, without yup
- npm install react-hook-form
Basic-1.9. .env and env-cmd
- npm install env-cmd or npm install -g env-cmd
Basic-1.10. lodash
- npm i — save lodash
Basic-1.11. clsx
- npm install — save clsx
Basic-1.12. @material-ui/pickers and date-fns
- npm i @material-ui/pickers
- npm i date-fns @date-io/date-fns@1.x
Referenced online Articles
Basic-1.1. create-react-app
How to convert a React Class Component to a Function Component
React: Migrating from Class to Functional Components (with hooks)
React Functional Components VS Class Components
Create a New React App(Official)
Create a New React App — Adding TypeScript(Official)npx(Official)
Basic-1.2.1. material-ui/core
Material UI(Official)
Material Icons(Official)
Material Icons List(Official)
Basic-1.3. i18next
Step by step guide(Official)
Introduction react-i18next documentation(Official)
Basic-1.4. react-redux-toolkit
Redux vs Redux Toolkit
Redux Toolkit Usage Guide(Official)
Getting Started with React Redux(Official)
Basic-1.4.1. reduxjs-toolkit-persist
Redux Toolkit Persist(Official)
Basic-1.5. react-router-dom
React Router Quick Start(Official)
Basic-1.6. react-cookie
Basic-1.7. axios and react fetch
How to Use Axios/Typescript like a pro! (axios-es6-class)
Difference between Fetch and Axios.js for making http requests
Axios(Official)
React fetch AJAX and APIs(Official)
Basic-1.8.1. Forms: chose react-hook-form V7, without yup
What’s new in React Hook Form V7
react-hook-form: Get Started(Official)
Migration Guide v6 to v7(Official)
Basic-1.9. .env and env-cmd
React — Environment specific builds using .env with CRA and env-cmd
env-cmd(Official)
Basic-1.10. lodash
Lodash _.groupBy() MethodLodash(Official)
Basic-1.11. clsx
Basic-1.12. @material-ui/pickers and date-fns@1.x
Using Material Datepicker in React
date-fns@1.x(Official)
Material-UI pickers(Official)
Basic-1.13. 2 Popular React Warnings Warning
Warning: Each child in a list should have a unique “key” prop.
Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(…)`, expected a ReactNode.
