Some Fundamental Topics of React

Image for post
Image for post

In this article, I’m going to discuss some topics of react that should know as a beginner. Let’s begin….

1. Things that required for most basic React app

The most basic react app requires three things. These are the followings -

  • ReactDOM.render() to render our app
  • A JSX element (called a root node in this context)
  • A DOM element within which to mount the app (usually a div with an id of root in an index.html file)

2. Components

There are two types of components in react. One is class component and the other is function components.

The syntax of class components -

The syntax of function components -

3. Components can be reused

In a react app, components can be reused across our app. Let’s see the demo -

4. Props Must Never Be Directly Changed

Props must never be directly changed. We can’t mutate the props object, we can only read from it.
Let’s see the demo —

5. useMemo

useMemo is for improving performance and for storing the results for expensive calculations. It remembers the result of expensive calculations. useMemo returns a value from the computation, not a callback function (but can be a function).

Example —

6. Refs and useRef

Refs allow us to create a reference to a given element/component when the component mounts. useRef allows us to easily use React refs. We call useRef (at the top of the component) and attach the returned value to the element’s ref attribute to refer to it.

Once we create a reference, we use the current property to modify (mutate) the element’s properties. Or we can call any available methods on that element (like .focus() to focus an input).

7. Higher-Order Components

A higher-order component is a function that takes a component and returns a new component. It’s an advanced technique for reusing component logic.

8. The Component Lifecycle

Each component has several “lifecycle methods” that we can override to run code at particular times in the process.

  • componentWillMount is executed before rendering, on both the server and the client side.
  • componentDidMount is executed after the first render only on the client side. This is where AJAX requests and DOM or state updates should occur. This method is also used for integration with other JavaScript frameworks and any functions with delayed execution such as setTimeout or setInterval. We are using it to update the state so we can trigger the other lifecycle methods.
  • componentWillReceiveProps is invoked as soon as the props are updated before another render is called. We triggered it from setNewNumber when we updated the state.
  • shouldComponentUpdate should return true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn’t need to render after state or props are updated, you can return false value.
  • componentWillUpdate is called just before rendering.
  • componentDidUpdate is called just after rendering.
  • componentWillUnmount is called after the component is unmounted from the dom. We are unmounting our component in main.js.

9. Data goes down

In React data goes down the tree of the components. If we want to pass data from parent to child component we can do it by using props. From JSX point of view props are HTML attributes.

Parent component:

In the child component, props are available under this.props.

Child component:

10. How rendering works

Every setState() call informs React about state changes. Then, React calls render() method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

That’s all for today…

Written by

I’m a junior front end web developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store