ReactBasics.md

React Basics

React Documentation

• https://reactjs.org/docs/getting-started.html

React JS library Common Problems

• https://jscomplete.com/learn/react-beyond-basics/react-cfp

Why React?

React is a Library that uses a declaritive paridgm to implement user interfaces. You describe what we want done while React determines how it is done. React uses a JavaScript extension called JSX which allows developer to code HTML like syntax to have automatically converted to JavaScript.

Framework (Angular) vs Library (React & Vue)

Frameworks determined how your project will be structure and are typically not flexible. Library are building blocks that can be used anywhere.

React Components

A React component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React JSX element that describes how a section of the UI (User Interface) should appear.

Class Components

class ClassName extends React.Component {
  
  // Not required
  constructor(props){
    super(props);
    this.state = 1;
  }

  // Required
  render() {
    return (
        <div>
            <h1>Hello, {this.props.name}</h1>; 
            <p>My state is {this.state}</p>; 
        </div>
    )
  }
}

Input: state ( Can change ) Output: DOM

Functional Components

import React, { useState } from 'react';

function funcName(props) {

    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    )
}

Input: props (Can't be change) Output: DOM

Hooks

NOTE: React Hooks only work in function components. This functionality allows function components to tap into the React Lifecycle to store state and other React features. Below are some examples of React hooks:

useState

const [state, setState] = useState(initialState);

• useState(initialState): returns a stateful value, and a function to update it.
• state: is the same as the value passed as the first argument (initialState).
• setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component.

UseEffect

useEffect(didUpdate);

Accepts a function that contains imperative, possibly effectful code. The function passed to useEffect will run after the render is committed to the screen.

By using the useEffect Hook, you tell React that your component needs to do something after render. React will remember the function you passed, and call it later after performing the DOM updates. we could also perform data fetching or call some other imperative API.

useContext

const value = useContext(MyContext);

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest <MyContext.Provider> above the calling component in the tree.

Component Lifecycle

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting

This method is called when a component is being removed from the DOM:

• componentWillUnmount()

Error Handling

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.

• static getDerivedStateFromError()
• componentDidCatch()

Context API

In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

See the link here for example of Context