The purpose of this repo is a systematically review the fundamentals react and learn some new features of react18:
-
practice-00 - how to create and render component.
-
practice-01 - basic use of react that shows how to create a static page. Used props to transfer the data from parent to child(props only works top to button->parent to child); used ES6 deconstruct method to deal with data; used two import and export ways from ES6. Be careful: when we iterate data in react, we need to use the unique id as key.
-
practice-02 - show case of useState hook. At the beginning, use the FirstExample component to demonstrate React cannot automatically re-render the data on page when we change the data value by clicking the button. Then use the FirstUseState component to demonstrate how to use the useState hook to re-render the data. Added Toggle component to show how the short circuit and ternary of javascript works in React.
- useState return an array with two elements: the current state value, and a function that use to update the state.
- State update will triggers re-render.
- when we use the setState function to update the state, the previous state is not lost (or covered), it still in the memory. Added UseStatePractice component to show how useState hook work with array. Used filter method in this example, which is similar with map method, must return a new array.
- Short circuit:
- The && operator returns the first operand if it is a falsy value, or the second operand if the first operand is a truthy value.
- The || operator returns the first operand if it is a truthy value, or the second operand if the first operand is a falsy value.
- Ternary: (basic syntax)
condition ? expression1 : expression2
If ths condition is true, the operator will return expression1. If the condition is false, it will return expression2.
- practice-03 - show case of useEffect hook.
- Since the useState leads to re-render every time when we update the data(It can cause infinite loop if we use setValue function in an function which called in the component), it may not what we want in some case, for example, we only want a function be called once when the component mounted. Therefore, this is why useEffect is important.
- The useEffect hook accepts two arguments(second optional - if no second optional, then it default run on each render which means initial render and re-render)
- first argument is a callback function
- second argument is the dependency array
- remember that callback function(first argument) cannot return a promise(so cannot make it async)
- if the dependency array(second argument) is an empty array[], it will only run on initial render
- Therefore, the common use case of useEffect hook are: subscriptions, fetching data, directly updating the DOM, event listeners timers...
- practice-04 - show case of props and show that order matters in JS.
- we cannot pull out properties from null. Therefore, if we have some code like : const [value, setValue] = useState(null). Then we have to make sure that before we destructure properties of value, there are something store in value state(value cannot be null). Otherwise, javascript will complain and show an error on console.
- practice-05 - show case of controlled inputs.
- When we use form in our web page, in html the labels will hold their own states and update the value by user's input. In react, we can store input values in states(which come from useState hook) to control(track) the values, which is called controlled inputs. It implements in three steps:
- setup state values
- add value property and onChange event to each input
- setup onSubmit event to submit button
- if we have multiple inputs, we can use an object state value to store them, each input value associate a property of the object. In this case, each input label must have an name property use to identify which input value is changed.
- practice-06 - show case of useRef.
- Common between useRef and useState hooks:
- preserves the value between renders
- Difference between useRef and useState hooks:
- useRef hook don't trigger the re-render
- useRef returns an object with a current property Thats why we can think useRef more like a container, which can use its current property to carry any object. Therefore, one common use case is using useRef to target a DOM node or element. For example: using ref property of to implement uncontrolled inputs.
- practice-07 - show case of custom hook.
- basically custom hook is encapsulation the variables(could be state, reducer, etc) and logic (functions and actions) together for reuse it in an other components.
- practice-08 - show case of props drilling and useContext.
- normally when we use props pass the attributes to a component's grandchild, we have to do this way: parent -> children -> grand-children. Even if we don't want to use the data in children component. This is called props drilling.
- useContext hook is use to avoid props drilling. It allowed us to pass the props directly from parent to grand-children. The steps is as following:
- first step, use createContext API to create a context then export this context to allowed other components to use it
- second step, use useContext hook in the children components to use the context which you create in the parent component
- third step, provide the context you created in parent component and wrap the children components by context.Provider. The props pass by the value property of <context.Provider>. *** Ps: the context.Provider has a value property, which use to past the parameter(usually is a object) for let children components to use ***
- practice-09 - show case of useReducer.
- reducer is kind of plus version of state it contains the state and the actions of how you want to manipulate the state value. In other words, reducer is use to manage the state(s).
- there are two common parameters of useReducer hook:
- the reducer that you create before
- the initial(default) state value
- useReducer hook return an array which contain two elements:
- current value of the state
- dispatch function use to update state and also trigger the re-render of the component
- usually the initialization of default state should be a object, since we can add more states as a property to the same state. As result, we can use one reducer to manage more states.
- there are three steps to use the useReducer hook:
- initialize the default state:
const defaultState = {
customerList: customers,
}
- create reducer:
const reducer = (state, action) => {
...
}
The return value of reducer is the state value after updated
- use the useReducer hook in your component:
const [state, dispatch] = useReducer(reducer, defaultState);