Fullstack React: The Complete Guide to ReactJS and Friends by Anthony Accomazzo

January 12, 2020
notes from eloquent javascript

React is a JavaScript library for building user interfaces.

To understand react, we need to understand two things.

  1. How react renders components
  2. How data flows

How does React work

Everything that you build with React builds is a react component. These react components are essentially a JavaScript objects. React takes these JavaScript object and constructs a tree representing the actual DOM. This virtual tree of react element representing the DOM is called virtual DOM.

When we change a react element, React first batches the changes. It then does a comparison of the current and the previous state of the virtual DOM and updates the difference to the browser DOM for us. This comparsion is done by efficient diffing algorithm.

Things to note.
  1. To differentiate from the HTML components, React recommends naming components with initial capital letter. eg <App/>
  2. jsx is the file extension. JSX = java script extenstion. jsx is syntactic sugar for html/css-in-js. jsx is transformed into js by Babel with react and es2015 preset compiles these JSX down to React.createElement() calls.

How data flows

React favours one-way data flow. i.e., the data flows down from root to components via state and props.

State

State is where we hold the data that's local to the component. hence state is private, mutable. If it gets passed to the child components, then it becomes the props of child component. We can modify the state using this.setState({}). this.setState({}) is asynchronous. All the updates are queued and the updates to the DOM is made after diffing.

Props

props is the short form properties. props are immutable piece of data that are passed to child components from parents.

For both the props and state change, the component will be re-rendered.

Component

A component ideally should be responsible for only one functionality. Based on functionality, we can classify the components into two types.

Based on functionality, we can classify the components into two types.

  1. Functional component
  2. Class component

State

State is private, mutable and local to the component.

a value can be a state, if it cant be passed via Props https://medium.com/@wisecobbler/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 this.setState() is asynchronous.we need to use this.setState() after estting the inital state in the constructor. we need to use this.setState() to modify the state. It triggers the re-render when state changes we re-render the component. when ever a state update depends on the it is preferred to pass a function to current state. this is because it is async. react may not update the state immediately. it queues the update.

Props

props is one way data pipeline.props are immutable piece of data taht are passedinto child componentsfrom parents. state is where we hold the data thats local to the component. stateis private and mutable.props are the parameter. input to the function.

The component will re-render when a props or state change.

Functional component

Functional component doesn't have state.

Class component

This has state. render() is the only required method to be defined in a React class Component. After a component is mounted and initialized render() will be called.

For my new posts, Subscribe via weekly RSS, common RSS or Subscribe via Email