React JS — Some Fundamental Topics

4 min readNov 5, 2020

In this article, I am going to discuss some fundamental concepts about React JS.

What is React JS?

React JS is an open-source, front end, efficient, and flexible JavaScript library for building user interfaces. It is used to build single-page applications. It allows us to create reusable UI components. There have two buzzwords — Library & FrameWork. React is a JavaScript library, not a framework.

Difference between Library & FrameWork:

The library is a small package that made for some specific tasks. On the other hand, a framework is a gigantic thing that is made for the complete solution. When we call a method from a library, we are in control. But with a framework, the control is inverted: the framework calls us.

Assume you need to buy some shoes. You can go to either a particular shoe shop (Library) or a shopping mall (Framework). In the particular shoe shop, you can only buy your shoes but in a shopping mall, there have many other shops except the shoe shop.

The framework gives you a structure to complete a project. Working with a framework, many smart design decisions are already made for you. It gives us a clear path to focus on making good application-level logic. But it is not flexible. A framework usually wants us to code everything a certain way. We tied in a boundary when we use a framework.

But in the Library, it’s not a complete solution. We will often need to use an external library for another solution. But there has the freedom to writing code and decorate our application. eg: Redux library is often used with React for building complex web applications.

JSX:

JSX stands for JavaScript XML. JSX allows us to write HTML in React. That means we can write HTML code into JavaScript code. It gives React to a superpower. Assume we need to show 20 cards about different products in our UI. And the number also might be increased. It’s obviously very irritating to write the same code continuously 20 times. There the solution gives by JSX. It allows us to make a component. Then we can write the same code only one time and recall them with different data by using a loop or any height order array method.

import React from 'react'const products = [
  {img: ".....", name: "....."},
  {img: ".....", name: "....."},
  {img: ".....", name: "....."},
  ... ... ... ... ...,
  {img: ".....", name: "....."}
]const Component = () => {
  return (
    <div>
      {
         products.map(product => {
           <card>
             <img src={product.img} />
             <h2>{product.name}</h2>
           </card>
         }
       }
    </div>
  )
}

Creating Components in React:

Everything that shows on our UI is a component. React JS is built with components. There are two ways to build components.

Class Component &
Functional Component.

Class Component:

As we all know that JavaScript is also an Object-Oriented Programming Language (OOP) so it can allow us to write code in React through the functional component. And which is a very traditional way. People who previously worked on another framework can easily relate to this way.

class Greetings ectends React.Component {
    render() {
        return <h1>Hello Everyone!!!</h1>
    }
}

Functional Component:

This is the simplest and also the modern way to build a react component. JavaScript is a multi-paradigm language. So we can freely mix and match object-oriented, procedural, and functional paradigms. Using functional components in React also allow some advantage. Like we can be using React Hook by building our React application through functional components.

const Greetings = () => {
    return <h1>Hello Everyone!!!</h1>
}

Component Lifecycle

Each component has several lifecycle methods that you can override to run code at particular times in the process. We can control react components by these lifecycles.

Mounting:
1. constructor()
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount()
Updating:
1.static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()
Unmounting:
1. componentWillUnmount()
Error Handling:
1. static getDerivedStateFromError()
2. componentDidCatch()

React Props

Props and PropTypes are an important mechanism for passing information between React components. It is immutable. React props looks like function arguments and attributes in HTML. Sending a prop into a component is just like an HTML attribute.

Parent Component:

const Person = () => {
    return (
        <PersonInfo name="Mr. Bulbul" age="25" />
    )
}

Child Component:

const PersonInfo = (props) => {
    return (
        <h1>I am {props.name}</h1>
        <h3>I am {props.age} years old!</h3>
    )
}

Let’s see some different types of props to React.

MyComponent.propTypes = {
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
    optionalNode: PropTypes.node,
    optionalElement: PropTypes.element,
    optionalElementType: PropTypes.elementType,
    optionalMessage: PropTypes.instanceOf(Message),
}

Default Props:

React components take inputs in the argument called props. It passed down from the parent component. But what happens if our parent component doesn’t pass any attributes to the child component? What will be the props value??? — Here the default props idea comes from.

We can use the logical OR operator to set a default value. If our prop is missing then it displays the default value in place of the missing prop. This default value is known as default props.