Learn more about react.js

React is a JavaScript library for building user interfaces. Developer can build user interfaces easily with react. I think every JavaScript Developer should learn React. It’s can help to make UI more gorgeous and functional. In this article, I will explain the basic concept of React. If you want to learn react. First of all, you should explore the basic concept of React. And this article is perfect for beginners who can achieve a great idea of React js. Follow this article and keep practicing.

framework or library?

React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution. React always communicate with other library and framework. React makes a webpage more responsible to work. As a react.js web developer, you need to know about the react.js working style.

Frameworks are not flexible, although some claim to be. A framework usually wants you to code everything a certain way. If you try to deviate from that way, the framework usually ends up fighting you about it. Frameworks are also usually large and full of features. If you need to use only a small piece of them, you have to include the whole thing anyway. Admittedly, this point is changing today but it is still not ideal.

React is thin and it’s extremely easy to mix it with other 3rd party libraries. Rich JS ecosystem has a library for everything. You can choose your favorite one and plug it in without dealing with the design decisions/limitations of the framework.

JSX

When looking at React examples you’ve probably seen JSX in action already. But React code can be written in plain JS too.

Some people don’t fancy writing entire markup code as function calls. That’s probably why people at Facebook came up with JSX — a “syntactic sugar for the React.createElement(component, props, …children) function”.

That’s why we can refactor the above example to this:

ReactDOM.render(RootElement, document.getElementById('app'))
const RootElement = (
  <div>
    <h1 style={{color: red}}>The world is yours</h1>
    <p>Say hello to my little friend</p>
  </div>

Installation

we can use react file of our own . to install react we have to open the terminal and run this command: npx create-react-app app-name. here, app-name is our app name. and the app named a file will create on our computer.

npx create-react-app app-name
cd app-name
npm start

Components

In react.js the main part of our code in app.js. for a webpage, we have to use many more pages. So, that we can use components. On a webpage, sometimes we see that so much data but looks similar. In that time we can use components for similar in look and different in data. That time we use the components by using props. we discuss the props system below.

Props

Props are used on react.js to pass data from a component to another component. for example,

<Component data={data}></Component>
funtion Component = ({data}) => {
    console.log(data)
}

props help to pass data from one component to another component.

Hooks

A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. We’ll learn other Hooks later.

Conditional Rendering

Conditional rendering is a condition-based render function. Some we need like if the user is male show something else the user is female then shows another thing. In this case, we use conditional rendering & show output to the user.

State

The state is so important part of React. Sometimes we need to set a data anywhere & after need to use it. In this case, we can use the useState function. In this function, we can set & use our data so easily.

Higher-Order Components

A higher-order component is a function. which takes a component as parameters & returns a new component. When we want to share the same functionality with different components that time we use higher-order components.

Context-API

Context-API is another method to pass some data from components. We know props can pass data from parent component to child component. But sometimes we need to pass data from child to parent or others components that are not the same. In this situation, we use Context-API & easily pass data from every component in our react app.