React basic concepts

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'))
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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store