Fundamentals of ReactJS

What is ReactJS?

React is a JavaScript library for building user interfaces. It was developed by Facebook and maintained by Facebook and a community of individual developers and companies. React allows developers to build reusable UI components and manage the state of their applications, making it a popular choice for web development.

What is DOM?

In React, the Document Object Model (DOM) is the tree-like structure that represents the HTML elements of a web page with elements being nodes in the tree and properties being attributes of those nodes.

React uses a virtual DOM that acts as an intermediary between the component's render method and the actual DOM, allowing it to make efficient updates and rendering of components.

When a component's state changes, React updates the virtual DOM, compares it to the previous virtual DOM state and makes the minimum number of changes necessary to the real DOM. This results in faster and more efficient updates to the user interface.

What is Virtual DOM?

In React, the virtual DOM (VDOM) is an in-memory representation of a web page's actual DOM. When a React component's state changes, the virtual DOM is updated instead of the real DOM, which can be slower and more resource-intensive.

The virtual DOM then compares the current virtual tree to the previous virtual tree and calculates the minimum number of changes necessary to update the real DOM. This process is much faster and more efficient than updating the real DOM directly and results in improved performance and smoother updates to the user interface.

The virtual DOM acts as an intermediary between the component's render method and the real DOM, providing a high-level API for updating the user interface.

What is a React Component?

Component is a reusable piece of code that returns a tree of elements (typically HTML-like) that represent a part of a user interface. Components are the building blocks of a React application and are used to split the user interface into smaller, reusable parts. Each component can have its own state, which represents the data it uses and can receive props, which are values passed down from a parent component.

Components can also manage their own behavior and interact with the rest of the application through methods like event handling. Components can be used to create simple UI elements, such as buttons or form inputs or they can be combined to create complex and dynamic user interfaces. By using components, React applications can be built in a modular and maintainable way, making it easier to understand and update the code base over time.

There are two types of components in React.

1)  Functional Component

A functional component in React is a plain JavaScript function that returns a React component. It is a simpler way to define and render components in React compared to class components and is used for presentational components that only need to render some UI and don't have their own state or life-cycle methods.

Functional components can receive props, which are input data and return a React element (typically JSX) that describes the UI based on that data.

In this example, the Greeting component is a functional component that receives a props object with the name property and returns a JSX expression that displays a greeting with the given name.

2) Class Component

A class component in React is a JavaScript class that extends the React.Component class and implements a render method that returns a React component. Class components are used for components that have their own state and life cycle methods.

In this example, the Example component is a class that extends React.Component. The component has a local state property count that starts at 0. The component also has a method handleClick that updates the count state when called. The render method returns the component's representation as a tree of React elements. The component is rendered with a p element that displays the count state and a button element that triggers the handleClick method when clicked.

What is State?

State in React is an object that holds data or values that determine a component's behaviour and renders information to the user. It is considered to be private and fully controlled by the component and is used to track changes within a component over time.

State is different from props, which are inputs passed to a component from its parent component. State is internal to the component and can change within the component, while props are fixed values that are passed from the parent.

You can update the state by calling setState( ) method, which tells React to re-render the component with the new state values. This allows you to dynamically update the UI based on user interaction, network response or other events.

It's important to keep in mind that state should only be updated using setState( ) method. directly modifying the state object can lead to unexpected behaviour.

Here's an example of how state can be used in a React component:

In this example, the Counter component has a count state that keeps track of the number of times the increment or decrement button is clicked. The component also has two functions, increment and decrement. it's update the state when called.

What are Props?

Props in React are inputs passed to a component from its parent component. Props allows you to pass data from a parent component to its child component, making it possible to reuse components and make them more flexible and configurable.

Props are similar to function arguments and are passed to the child component as an object. The child component can access the props using this.props inside the component's render method.

Here's an example of using props in a React component:

In this example, Component receives title and description as props and it return a JSX expression that displays these values.

We can pass props in parent component.

In this example, the parent component App uses the MyComponent and passes it two props: title and description. The child component then displays these values in the UI.

What are useState and useEffect?

useState and useEffect are two of the most commonly used hooks in React.

useState is a hook that allows you to add a state to your functional components. It returns an array with two elements: the current state value and a function that updates it.

Here's an example of how you can use useState in a functional component:

In this example, the component uses the useState hook to keep track of a count state. The hook returns an array with two things: state count and  setter methodsetCount. count represents the current state value, while setCount is a function that updates the state. The component then uses these values to render the current count and buttons to increment or decrement the count.

useEffect is a hook that allows you to perform side effects in your functional components, such as fetching data from an API, updating the DOM or subscribing to an event. useEffect takes two arguments: a callback function that performs the side effect and a dependency array that monitors when to re-run the effect.

Here's an example of how to use useEffect in a functional component:

In this example, the component uses the useEffect hook to fetch data from an API when the component is first mounted. The effect is run when the component is first rendered and the dependency array[] monitors not to re-run the effect on subsequent renders. The component then uses the fetched data to render the information in the UI.

Component Life Cycle Methods

Component life cycle methods are methods that are automatically called at specific points during the lifetime of a component in React. There are several life cycle methods that you can use to control the behaviour of your components.

Here are some of the most commonly used life cycle methods:

• componentDidMount: This method is called after the component has been rendered for the first time. It is commonly used to perform side effects, such as fetching data from an API or setting up a timer.
• componentDidUpdate: This method is called after a component has updated and re-rendered. It is commonly used to perform side effects in response to changes in state or props.
• componentWillUnmount: This method is called just before a component is unmounted and destroyed. It is commonly used to clean up any side effects or subscriptions that were created in componentDidMount .

Here's an example of how you can use the life cycle methods in a  component:

In this example, the component implements four lifecycle methods: componentDidMount, componentDidUpdate and componentWillUnmount. The component uses these methods to perform side effects, control updates and clean up resources. The component also implements a render method to display the component in the UI.

Functional components do not have life cycle methods in the traditional sense, as they don't have instances and don't have a direct connection to the component life cycle. However, you can achieve similar behaviour with the use of React hooks.

Two hooks in particular, useEffect and useLayoutEffect, can be used to perform actions when a component is updated or unmounted, similar to componentDidUpdate and componentWillUnmount life cycle methods, respectively.

Here's an example of how you can use useEffect and useLayoutEffect in a functional component to perform side effects:

In this example, the component uses two instances of the useEffect hook to perform side effects when the component updates. The first instance performs a side effect when the component updates and the second instance performs a layout effect immediately after the component updates. The component also cleans up the side effect and layout effect when the component unmounts.

Lists and Keys

In React, lists are often used to render collections of data. When rendering a list of items, it's important to specify a unique key for each item. Keys serve as a way to identify items in the list and they help React keep track of what changes in the list as items are added, removed or moved.

Here's an example of how you can use a key when rendering a list of items:

In this example, the component receives an items prop that is an array of objects. The component maps over the items array and renders a li element for each item. The key prop is set to the id property of each item to ensure that each item in the list has a unique key.

It's important to note that the key should be a stable identifier that doesn't change as the item changes. A common pattern is to use the ID of an item from a database, but if you don't have a unique ID for each item, you can use the item's index in the array as a key but only if the order of the items in the list is guaranteed to stay the same.

Summary

React provides a flexible and efficient way to build user interfaces using components and hooks. It provides a way to manage the life cycle of a component using life cycle methods.