Earlier this year, while trying to get the hang of React, I hit so many wrong turns and kept getting so frustrated that I gave up so many times. Now that I at least have a decent understanding of React, I have decided to create a series of blog posts to help you understand this very daunting concept.

In order to successfully understand React, I needed to get a few things straight i.e understanding the prerequisites before going straight into it. The prerequisites are:

• A good understanding of HTML.

• Functions, Objects, Arrays, and Classes.

• And a great understanding of JavaScript.

If this sounds like you or you’ve been clueless about where to start from? Let me save you some time.

What exactly is React?

React is a JavaScript library used for building user interfaces.

This simply means that it is used to build anything a user can see i.e parts of websites or applications. It is known as being declarative, efficient, and flexible. It makes it painless to make interactive UI’s by dividing them into components, It is open-source i.e The source code is made freely available and may be redistributed/ modified. One thing to note is that React is not a Framework but a pretty lightweight Library that requires the help of other libraries to build complex applications.

The main purpose of React is to be fast, scalable, and simple. In this article, we'd be talking about the building blocks of React.

Building blocks of React

Components: A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI. We mainly have two types of components:

Functional Components: Functional components are simply javascript functions. We can create a functional component in React by writing a javascript function. Below is an example of a functional component.

const Democomponent=()=>
{
    return <h1>Welcome Message!</h1>;
}

Class Components: The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class components. Below is an example of a class component.

class Democomponent extends React.Component
{
    render(){
          return <h1>Welcome Message!</h1>;
    }
}

State: The state is an instance of React Component Class and can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. Below is an example of a state.

Class MyClass extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = { attribute : "value" };
    }
}

To pass information to a component, we make use of something called Props which stands for Properties. Props are basically kind of global variable or object. We can pass props to any component as we declare attributes for any HTML tag. Have a look at the below code snippet:

<DemoComponent sampleProp = "HelloProp" />

Consuming lots of Information at once can be nerve-wracking, so in the next blog post, we'd talk about some features and important concepts needed in React.

Happy reading!