Skip to content
Component Name must be UppercaselowerCase components will not be displayedbecause lowerCase tags are HTML tagsYou can render as many components in JSX as you likeComponents just like include(php)
pass from above componentsreceive with this.propsis an object
but how to insert params?
addNew actually still can access this.propsbut addnew loses its content when we assign this.addNew = addNew()
Re-render with new State valueSetup default State ObjectRender with default stateChange state object with setStateDO NOT JUST CHANGE state values this.state.count++access previous state values with prevStatereturn a new state objectComponent will be automatically re-renderedStart again with a function inside class
the old way was to pass in an object only, but it is NOT RECOMMENDED
Not only you can pass PropsYou should also pass Functions for Children Components to usewrite function at highest componentbind ‘this’ valuepass to Componentreceive at this.props.functionName at component leveltDO NOT WRITE functions at lower Children ComponentsChanges from higher Components will also cause re-render auto
It’s super complicatedUSE 2 FUNCTIONS, 1 at Higher Component and 1 at Local Component
remember to bind it and pass it to Componentto process local data and then pass it to higher functionremember to bind it as wellbe careful to us this.functionName (local) and this.props.functionName (higher)
without modifying prevState value (NEVER)Teacher does validate at higher component and pass error to child oneHow about validating at child component?
Lifecycle Methods only available in Class ComponentTo process data between loading and saving
should code save data first and check if data is stored correctly
Components: you can mix both Class-based or Function-basedFunction: defined by Functionsyou have to pass in props and use themno need for ‘this’ objectStateless: Functional Components do not allow stateFunctional Components are for simple, presentational components
it will use default valuesFor example, initial values for empy database, empty state
States in FC can be an object, OR number, string, anythingin CC, state must be an objectuseStage always exports 2 things: states, stateActionuse Array destructuring to get those 2 exported things
Passing variables to Components as normally.
When we change state values, we have to declare the WHOLE OBJECT {count: ...,name:..., otherState:...}When we call any value, we have to provide object name state.things (longer code)Even though you can overide with ...state
componentDidMountcomponentDidUpdatecomponentWillUnmountrun 1st times = componentDidMountrun every change state = componentDidUpdate
unlike CC, all methods must go to under 1 componentDidMount or DidUpdate
manage state and action methods and a single placethen dispatch action in FC
useState is a simple form of useReduceruseState depends on useReducer to workWhen we dispatch actions and the state changes our component re rendered with the new data.useState for local changeuseReducer for cross-component change
data to be render, function to be calledRedux Store / Provider / Connect function
khác 0khác rỗngkhông tồn tại (undefined)
youhoc
- Pages
2. React Components
Class Components
Thinking Components
ES6 Classes
Normal Class
Extended Class
Default Class Syntax
Nested Components
Component Props
Data & Variables = Props
How do we pass data across Components?
Component Events & Methods
Define a function inside a Component
Assign a function without a ()
Notes about this binding
Class Component custom methods will lose binding with its props
Because this.addNew (in red) loses its context with the addNew (in yellow) function.
So the solutions are
Component State
When data in a Component has changed, it will re-render automatically, not manually as we did.
setStage example
ALWAYS pass in a whole function
Manipulate Children Components from Higher Components
Pass data up-stream?
How to pass data from form submit and process it?
1. Create a function at Higher Componnent
2. Create another function at child component
3. Use concat to create new state array value
4. Bonus: Data Validation
Data validation at child or higher component?
Validation at Parent Component
Summary
Default Props for Class Components
To pass props from even higher components
Lifecycle Methods
Difference between Class & Functional
Saving & Loading Data
Learn about Local Storage in
=>
Broken link
Broken link
Only Save Data when things changed
Get Data the right way
===
Functional Components
Definition of Stateless Function Components
Default Value for Props (Functional Component)
What happen when we do not pass value to Component?
Passing Data to Local Function
Using props to pass top-down methods to lower functional components
!!!ES6 Class Properties
!!!useState (React Hook)
Manage state for Functional Component
useState vs setState
With React Hook, React NOW WANT you to use useStage multiple times to track multiple state values
What if we use an object to manage multiple state values?
A full explaination here:
!!!useEffect
Manage Lifecycle for FC
Similar to:
useEffect run everytimes a Component has changed (useState)
useEffect to sync state, props across compoennts
useEffect with Condition
useEffect Dependencies
Add 2nd call to useEffect
Clean-up useEffect
componentWillUnmount
===
3rd-party Components
Adding custom child component
React Modal
useReducer
Similar to connect() function by Redux
useState actually use useReducer behind the scene.
useContext
Passing props values through components just like Redux:
Custom Hook
Khó quá, ko học nổi. Chưa biết làm gì với nó.
Side-note
Convert an empty string to booleen
!!undefined = false
Tư duy đúng khi tổ chức React Component Design
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.