Topics

Introduction
Why Use React
What are Components
What is JSX
Props
State.

This is going to be a React series discussing React and Hooks. We will discuss an overview of React in today's topic and then proceed to discuss Hooks from the next article. It's going to be a hands-on series where you will learn so much as a beginner, and then proceed on to intermediate and advanced levels in React. Let's get started.

Introduction:

React is an open-source JavaScript library for building dynamic and interactive user interfaces both on the web and on mobile. It is widely popular and has about the largest community of developers using it. As opposed to the mix-up of React being a framework, it is a library.

Everything in React is built inside a component. Components house every UI and functionality in a React app. The components serve as several building blocks that are put together to build a house. We will discuss components in the later part of this article.

Why Use React:

React is very easy to learn and understand. As a lot of developers say, learning React makes JavaScript a lot easier.

React is a component-based library that helps you divide your code into small, reusable, organized and modular components. Because a React program is a tree with the main component being the App, the small, reusable components are its branches.

React maintains a Virtual DOM, which makes it very fast. A Virtual DOM is a representation of the real DOM. So with React, when changes are made in an app, the Virtual DOM only updates the node where the changes were made in the real DOM. So unlike JavaScript where the whole page reloads when changes are made, React only updates the component where the changes were made.

It is perfect for building interactive and reusable user interfaces.

It makes debugging easy. Since React apps flow like rainfall (from top to bottom), it makes debugging from one line of code to the next easier and less confusing.

It is efficient in building small to large applications.

It is suitable for building mobile and web applications.

What are Components?

A car consists of several parts like the brake, steering, engine, carburetor, battery etc. Except these parts are wired and screwed together, the car is not driveable; it is just a piece of parts. Once these parts are screwed and wired together, the car comes to life. The same thing applies to a React app. It consists of several building blocks called components. The component houses every function, method and property that belongs to a particular user interface.

These individual components are then wired together under the parent UI usually called the App. The App in return becomes the face of the entire React app. It represents the totality of the project, housing several individual components.

In React, there are two (2) types of components:

1. Functional components
2. Class functions.

Functional Components:

This is the most popular type of component you will see in React apps these days. It's not so different from JavaScript functions. Data may or may not be passed as parameters to these functions, but data can be passed from one component to the other through props. Let's see an example of a Functional component.

import React from 'react'

const Test = () => {
  return (
      <div>
          <h1>This is a Functional component</h1>
    </div>
  )
}

export default Test

Class Components:

A class component is in truth more robust than a functional component, but you will hardly see developers use it these days. Not because it is out of vogue, but because it is more complicated to understand. It is not beginner friendly. A class component comes with a render method that renders onto the screen. Below is an example of the class component.

import React from 'react'

export default class Test extends React.Component {
  render() {
    return (
      <div>This is a class component</div>
    )
  }
}

NOTE: Throughout this series, we will be using the Functional component for our examples.

What is JSX?

Its full meaning is JavaScript XML, and it is a JavaScript syntax that allows you to write HTML directly in your React. It helps to describe how the user interface will appear in the React library.

const Test = () => {
  return (
/*
      <div>
          <h1>This is a Functional component</h1>
    </div>
*/ This here is an example of JSX. This is HTML in JavaScript.
  )
}

Props:

Props are used to pass data from one component to the other. Props are passed down, not the other way. What that means is, props are passed from parent to sibling components and not the other way.

To have a better understanding of props, you can check out Props: What you need to know.

State:

This is the present value of an object whose value may change over time as a result of an event in the application. The event can be a result of a click of a button, an onChange event etc. The most prominent way to handle state in React is the useState Hook. We will be moving on to Hooks, and useState will be the first Hook we discuss in the next article.

Hope this was helpful. If you have any questions, please feel free to ask me anytime. Also, don’t forget to follow me and like this tutorial.

Thanks and have a great weekend.