React

Checklist
Links
Tutorial Checklist
Introduction
Props and State
Components
Lists and Keys
Lifecycle methods
React app on local
Component Updating Lifecycle
React Hooks
Misc

Checklist

[x] ES6
[x] Official tutorial
[x] Create projects locally
[x] Create a simple counter app
[x] Create an app which inputs text and spawns a card for every letter

Links

1. React for Angular Developers
2. Design Patterns: The React Cookbook

Tutorial Checklist

1. Goto Starter code
2. Pass props (data) from Board to Square
3. Update Square `state` to display X on click
4. Create a shared state in Board (parent) and pass function to allow change state

Example code


class Board extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      squares: Array(9).fill(null),

    };

  }

  handleClick(i) {

    // Update one instance of the state array

    const squares = this.state.squares.slice();

    squares[i] = 'X';

    this.setState({squares: squares});

  }

  renderSquare(i) {

    return (

      <Square 

             value = { this.state.squares[i] } 

             onClick = { () => this.handleClick(i) } 

      />

    );

  }

  render() { ... }

}

Introduction

React is a Javascript library unlike Angular - which is a framework.

- React has only components
- React has a virtual DOM object for every DOM object ; Limits frequently updating the DOM
- Only one element rendered per component : JSX
- Data Flows Down

Props and State

Props

1. Pass properties (props) from parent to child.
2. The props that we pass from component to component will never change within the child component -- they can change within the parent but not within the child

State

1. Attributes that we will want to change within the life of a component
2. To collect data from multiple children, or to have two child components communicate with each other, you need to declare the shared state in their parent component instead. The parent component can pass the state back down to the children by using props; this keeps the child components in sync with each other and with the parent component. Example

Three things to know about state:
1. Donot modify state directly


// Wrong

this.state.comment = 'Hello';

// Correct

this.setState({comment: 'Hello'});

2. State updates may be asynchronous


// Wrong

this.setState({

  counter: this.state.counter + this.props.increment,

});

// Correct

this.setState((state, props) => ({

  counter: state.counter + props.increment

}));

3. State updates are merged, i.e when you call `setState()`, React merges the object you provide into the current state.

Components

React contains only two types of components: Functional and Class based.

Functional components are stateless and have no constructor


function App() {

    // no state or constructor

    return (

        <p>Hello, World</p>	

    );

}

export default App;

Class-based components are stateful i.e they keep track of changing data


class HasTheParameter extends React.component{

    constructor(props) {

    super(props);

    this.state = { ... };

    }

    render(){...}

}

export default HasTheParameter;

Lists and Keys

Rendering multiple components using `map()` on arrays:


this.state.persons.map(person => { 

    return (

        <Person 

            name={person.name}

            age={person.age}

        />

    );

})

Updating Immutable state:
1. Spread operator


const currState = [...this.state.persons]

2. Splice (Remove/insert)
3. Adding keys to lists to allow react to efficiently update DOM

Lifecycle methods

getDerivedStateFromProps(props, state)
shouldComponentUpdate()
getSnapshotBeforeUpdate(prevpos,prevstate)
componentDidMount()

React app on local

1. Dependency Manager: npm
2. Bundler: Webpack
3. Compiler: Babel
4. Development Server

Component Updating Lifecycle

1. getDerivedStateFromProps(props, state)

- Sync state to props

2. shouldComponentUpdate()

- Can block component update
- Can help with performance

3. render()
4. getSnapshotBeforeUpdate(prevpros,prevstate)
5. componentDidUpdate()

- HTTP requests should be done here

Functional components use React.memo in place of shouldComponentUpdate

- Updates component when the inputs coming in change
- export default React.memo(MyComponent)

Donot use shouldComponentUpdate or React.memo if parent almost always send through changes to the component. It just adds unnecessary checks.

React Hooks

useState()
useEffect()

Misc

1. Importing CSS classes into code:
Example: import classes from './main.css';

$ npm run eject
Follow this stackoverflow article

Last Updated : 3,4,8 Mar 2021 | 17,14,11 Apr 2021 | 31 Oct 2020