This training is assuming that you are familar with Javascript, Basic NodeJS and Object-Oriented Programming Concept
- Fullstack React - The complete guide to ReactJS and Friends
- Redux Official Document
- Redux Saga Document
- You don't know JS
-
Training 1 - Introduction: React
- What is a React library?
- Why do we use React?
- Create a new React project using
create-react-app
- ES6 Systax Overview:
import
,export
,arrow function
,class declaration
- Basic concept of React
- Component types and when to use them
- Component
- PureComponent
- Stateless Component (or Functional Component)
- Re-using React components
- Folder structure of a React project
-
Training 2 - Basic React: React State, Props and Ref
- What is a React state?
- When to use state?
- What is a properties (or props) in React?
- When to use props?
- React Ref
- Rendering a list with React using
map
- Fragment in React
- Debugging React app using React Devtools
- Basic usage of
lodash
-
Training 3 - Basic React: React Life Cycle
- Overview of React Life Cycle
componentDidMount
componentWillUnmount
componentDidUpdate
shouldComponentUpdate
render
(static) getDerivedStateFromProps
-
Training 4 - Intermediate React: Calling API with Axios, Fetch API
- Using
fetch
API to get data from API - Using state, props to transfer data from API around components
- Using
axios
as a replacement offetch
API - Using
debounce
andthrottle
(from lodash) to improve the performance
- Using
-
Training 5 - Advanced React: Redux and React Redux
- Introduction to fundemental of functional programming
- Immutable
- What is a side effect?
- Benefit of functional programming
- The role of functional programming in Redux architecture
- Using JS functional functions:
map
,filter
,reduce
,some
,every
- Introduction to Redux architecture
- Understanding Redux architecture data flow (Uni-directional data flow)
- What is a redux action?
- What is a reducer?
- What is a action dispatcher?
- Why do we need to use Redux?
- Connecting Redux with React using React Redux
- Redux state vs React state
- Introduction to fundemental of functional programming
-
Training 6 - Advanced React: Redux Middleware
- Setup a middleware for Redux
- Using Redux Saga middleware for side-effect handling, calling API, and background job*
- Redux persist for persisting data
- Redux devtool extension middleware for debugging redux with Redux Devtools Ext
- Debugging Redux with Redux Devtools Ext
-
Training 7 - Final Project and Test
- Final test with 20-30 questions about React and Redux. In order to pass, you may need to achieve at least 80% of total score
- Final project that tested if you are ready or not
-
Training 8 - Addional React Topics (Optional)
- React Router*
- Styled components*
- Optimizing React Application*
- Introduction to
Babel
* - Config
eslint
* - React Hook API*
- React Memo API
- React Lazy
- React Context
- Higher Order Component (HOC)
-
Fork this repository
-
Clone the forked repo
git clone https://github.com/[username]/zv-react-training
- Setup upstream for further resource update
git remote add upstream https://github.com/longhpzigvy/zv-react-training
-
Read the README in training section 1, 2, 3, etc and complete the task
-
To update with upstream
git pull upstream master --rebase