React basic concepts

React is a javascript library that creates user interfaces. React is being a popular javascript library for its interactivity. We will check to react to fundamental concepts in this article.

1) It is a library

Unfortunately, react js is not a framework. It can not provide you a complete solution for your projects. You have to use another library with react. On the other hand, the framework is a complete solution. It will give you a structure to complete a project. However, there are disadvantages also for example we can say that frameworks are not flexible. Frameworks are usually large and full of features if you want to use a small part of them then you have to implement the whole.

2) JSX

If you see react code you must watch jsx also. At first, let’s look at a simple react code,

const RootElement = (
<div>
<h1 style={{color: white}}>Hello World</h1>
<p>Hi, There</p>
</div>
)ReactDOM.render(RootElement, document.getElementById('app'))

Jsx stands for javascript XML. It allows us to write HTML in react. Actually, jsx converts HTML tag into react elements. It is not a rule that you have to write jsx. Behind the scenes, bable js converts jsx into plain javascript. You can write react code can in plain js also. Let’s see an example of plain js code in react

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘white’}},
‘Hello World’),
React.createElement(‘p’, {},
‘Hi, There’)
)ReactDOM.render(rootElement, document.getElementById(‘app’))

3)Dom

Dom is a document object model. In react when render or reconciliation happens it creates a dom that helps it to know where has changed happened in browser’s one and new one then its changes there and show in UI.

4)Hooks

Hooks are a very useful function to react. It makes react so interactive. useEeffect, useState, useCallback are very useful for developers to create a functional Ui.

5)React Components

Suppose you build a special machine. Now you don’t start working on the whole machine at once. Either do not make separate parts first or collect different parts. Anyway, a lot of small parts will match but a complete machine will be made.

In the same way, JavaScript React covers many small parts, but a complete web application is created. Simply put, to make coding easier and more beautiful, the work on the main page is divided into sections. And each of these parts is known as a component name.

6)Props

Props are used to send data from one component to another. We can pass different types of data from one component to another component using props in react js.

import React from 'react';


const nav = (props) => {
   return (
      <div>
         <h1>{props.headerProp}</h1>
         <h2>{props.contentProp}</h2>
      </div>
   );
}

export default nav;

7)State

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. we set the value of an array or object or boolean type data in the state.

8)Context API

To get data from one component to all components context API is being used. It is like global data. Context API sets in the parent component most of the in App.js component.

9)Optimization

To get a faster user interface optimization does work so well. Shortcode helps a lot To get a faster user interface. Use npm run build to get the build folder that helps to get optimize code.

10)Webpack

Webpack is a javascript module bundler. To minify code webpack can also help to get a faster user interface and optimized code. Webpack uses only production time, not development time.