enhsu/React-Foundation

React Foundation

readme - Default create-react-app README.md

Reference

• link - ReactJS Tutorial for Beginners

creat-react-app

1. install Node.js
2. create react app via different approach

Approach	Steps
npx	$ npx create-react-app <project-name>
npm	1. $ npm install create-react-app -g 2. $ create-react-app <projct-name>

Note: npx is a tool for executing Node packages

link - Stack Overfloe: Difference between npx and npm?

Folder Structure

react-app
├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── index.js
    ├── ...
    └── ...

• package.json: Contain the dependencies and the script required for the project
• package-lock.json: Ensure consistent installation of the dependencies
• node_modules: The folder all the dependencies are installed
• public folder
  • manifest.json: Concerned with progressive web app
  • favicon.ico: Icon we see in the browser tab
  • index.html: The only html file we have in the application, it's mean we're building single page applicatioin
• src
  • index.js: the starting point of the application

React Foundation - Component

• readme - What is jsx
• What should we know about the component
  • handle props
  • create & update state

    • Note: anytime we need to update state based on the previous state, always passing a function that will set the new state

      e.g.

          // class component
          this.setState(prevState => ({
              count: prevState.count + 1
          }))
          // functional component
          const [count, setCount] = useState(0)
          setCount(prevCount => prevCount + 1)

  • methods as props
    • readme - props & state detail
  • conditional rendering
    • implementing conditional rendering
      • source code - class component template(className="conditional-rendering-part")
      • source code - functional component template(className="conditional-rendering-part")
  • list rendering
    • readme - about list rendering we should know
  • handle input
  • Lifecycle
    • readme - lifecycle detail
• Hooks: handle state and other React features in functional component
  • readme - hooks detail
• Component template
  • source code - class component template
  • source code - functional compoennt template

Styling in react

link - youtube tutorial vedio

Grouping children without adding extra nodes - Fragment

readme - Fragment detail

Improve Performance

• Component
  • Pure Component - for class component extends
    • React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison.
    • source code - Parent component
    • source code - Pure component
    • source code - Regular component: no performance improvement
  • Memo Component - higher order component
    • React.memo -> react version ^16.6.0
    • source code - Memo component
• Hook
  • useCallback in handle event methods - create a memoized version of the callback that only changes if one of the dependencies has changed
  • useMemo in a variable - Returns a memoized value. It will only recompute the memoized value when one of the dependencies has changed.
  • useCallback(fn, deps) is equivalent to useMemo(() => fn, deps)

    const memorizedCallback = useCallback(computeExpensiveValue(a, b), [a, b])
    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  • source code - useCallback in handle event methods, useMemo in variables
• More
  • When to useMemo and useCallback

Access DOM node directly within react - Refs

• About Refs
  • class component: createRef()
    • way 1: use createRef()
    • way 2: use callback refs
  • functional component: useRef()
• Demo: basic use
  • As the page loaded, by default, the input will be focused.
  • Fetch the input value by click the button.
  • source code - class component fous input while page loaded
  • source code - functional component focus input
• Demo: callback ref
  • Instead createRef, use callback ref.
  • NOTE: callback ref is the element itself.
  • source code - callback refs
• Demo: Access the refs with class component
  • parent: ref - refChildComponent
  • children: method - focusInput()
  • source code - parent component
  • source code - child component
• Demo: React.forwardRef, passing ref to children component
  • child component: return React.forwardRef(component)
  • source code - parent component
  • source code - child component
• Demo: Hook - useRef(), mutable ref, for variable in functional component
  • source code - useRef for variable

Render children into a DOM node that exists outside the DOM hierarchy of the parent component - ReactDOM.createPortal

• WHY use portal?
  • when the child component is a modal, a pop-up, or a tool-tip
• link - portal reference
• link - demo on CodePen

Share common functionality between components

• Higher Order Component

  • Lift business logic to parent component and pass props to children for display
  • Demo: Counter for ClickCounter and HoverCounter
  • source code - wrapper component
  • source code - ui component

• Render Props

  • The term render prop refers to a technique for sharing code between React components using a prop whose value is a function
  • Core: React can use a prop whose value is a function to control what is actual render by a component
  • source code - logic component
  • source code - ui component

• Custom Hook

  • A custom Hook is basically a javascript function whose name start with use
  • A custom Hook can also call other Hooks if required
  • useDocumentTitle
    • source code - useDocumentTitle logic
    • source code - useDocumentTitle usage
  • useCounter
    • source code - useCounter logic
    • source code - useCounter usage
  • useInput
    • source code - useInput logic
    • source code - useInput usage

Context

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

steps

1. Create the context
2. Provide a context value
3. Consume the context value

readme - context detail

HTTP and React

• http library: axios
• fake data from: JSONPlaceholder
• fetch data
  • implement - fetch data while render component
  • implement - fetch data while button click
  • source code - class component
  • source code - functional component