Let’s have a simple tour with React.

What is React?

React is a JavaScript Library. It is not a framework. Many people all over the world confuse React with some other frameworks but no it’s not a framework it a Library. Is it complete? Does it have all the solutions we need while building websites? No certainly not. But it’s a lightweight, easy to use component based library which is used all over the world for it’s simple features.

Why React?

Now you may ask why should I use React? I can use any framework I need and they have solutions for some very important problems. So why should I use a library instead of a framework? Now the answer to your question is simple. When we use frameworks we have to code in a certain way. If we code a slightly different way than the framework wants us to do, then the project may crash . In one sentence frameworks are not flexible.

On the other hand you can use React in a very flexible way. It is a small library which focuses on doing one thing and it does that really well. And the one thing is Building User Interfaces. So if you need something lightweight and flexible you know what to choose.

How React Works?

At its very core, React basically maintains a tree . Think of HTML code as a tree. In fact, that is exactly how the browser treats DOM . React actually creates a virtual tree consisting of the changes done on the code and the with the help of diff algorithm it compares it with the actual tree and finds out where the change is made. Then it pushes only those changes which is actually done.

React is Nothing But Components

React is mainly a component based library. Think of it like a function. Like a function we can reuse components over and over. In the core a component is just a plain JavaScript function. There can be many kind of components but in general we can see two kinds of components and they are Similar in look different in data and different in look and different in data. One of the best thing a component can do is, it can actually have a state to hold data that can be changed over the lifecycle of a component.

How To Create A React App?

It’s really very simple. You just have to open your favorite code editor or command prompt and go to the folder in which you have all of your projects.

Then type npx create-react-app my-app (in place of my app you can use your app name)

Then cd my-app to actually go to the app folder

and at last npm start to run the app.

Jsx

JSX stands for JavaScript XML. It adds HTML in React app. JSX is a very important feature of React . Because React must be in a JSX scope. Instead of writing React components using the React.createElemnt syntax, we use a syntax very similar to HTML and then use a compiler to translate it into React.createElemnt calls.

Name Has To Start With a Capital Letter

The first letter of a name being a capital letter is one kind of requirement for React. Because when using react we will be dealing with a lot of HTML elements as well as React elements. Now a JSX compiler will consider the names with small letters as an HTML element and which is what we don’t want to happen. So if we want to make our life easier we will have to start a name with capital letter in React.

Creating Components

Since React is nothing but component we should learn how to cerate a component. The easiest way to create a component is using hook based components. Which is super easy. Now give a small amount of attention below,

funciton App(){

return(

<div>

<h1>This is a component </h1>

</div>);

}

This is literally a component named App. Now you see how easy it was to create a component. And yes if you are thinking that it’s nothing but function then you are absolutely right components are functions.

Components Vs Elements

Sometimes people get confused with components and elements. Thy often mixed up between this two. Now listen carefully ,

“A React component is nothing but a template or a function(or class) where you write your code. And elements are those codes which get returned from a component. It’s an object that virtually describes the DOM nodes that a component represents.”

Why Use Components?

You may ask why should you use components. And the answer is very simple. A component is reusable. You can use one component on various occasions. It keeps your application clean. What you do is you divide your application to some small parts with components and then use them with the help of props and make your web applications. Which makes your work cleaner and your code more reusable. If your code gets complex, you can always create a new component and divide the existing codes into some small pars and use them together.