React core concepts

React

React is a javascript library. It is an open-source, frontend, and building user interface. It gives a better user experience and better developer experience and especially for single-page applications. Recently it is the most popular javascript library. React first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012. It works on a virtual dom system. It is design base on Components.

Jsx

Jsx full form is javascript XML.The purpose of jsx is to write HTML code in Javascript. JSX makes it easier to write and add HTML in react. The JSX syntax looks a lot like HTML. But is not HTML and nor it is a string of javascript. Rather it is a syntax extension of javascript.It has been added for the benefit of developers.

Components

One of the features of React is component feature. Components are the main building block of react. React is the component base library. The component is similar in look different in data. That means it looks similar but its inside functionality, code, or data is different. Makes component coding much easier.No need to rewrite data or code when using components. This has made the simple task of the developer much easier.If the same data needs to be used different place then it can be done easily throw the component. Component can be navbar or sidebar , card-type etc. See the example of the component below.

comoponets

React Virtual Dom

React A same to same creates another dom similar to the one in this browser called a virtual dom. Now, this dom looks exactly like the real dome, but this virtual dome is actually a JavaScript object. React makes it so that any element can be modified easily and efficiently using JavaScript with this DOM.

Props

In React, we often need to transfer data from one component to another when we go to work. Props has made this task easier.We can transfer data one component to another component with props method.The component to which the data is to be sent imports to the parent component and accepts the props as the value inside the component.

Conditional Rendering

Conditional rendering will show another dependent data or component of a logic.Suppose we have two elements, one is << home /> the other is <sign in />. If the user is logged in, he will be shown the home page and if he is not logged in, he will be taken to the login page.

Hooks

React has 10 hooks. Which mainly comes base on the functional component. The hooks make developer life much so easier. The hook is mainly a function.The class component has many features that were not in the functional component that led to the hooks.

useState() hooks

The use of state has made the work of state management much easier. The use state function basically returns an array. Distrctuting to that array provides two things. One is the name of the variable and a function to control that variable and the initial value inside the bracket of the use state.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Regex | cheat sheet

Node as web server using HTTP

Building your next API with TypeScript

I am going to learn Typescript

Retrieve your BigQuery query history with NodeJS SDK

JavaScript Series: A Step-By-Step Approach To Useful Tips for Learning JS

A Simple Guide to Node/Express

Manage Your State With Redux in Your React Application

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
Md Abdullah Mamun

Md Abdullah Mamun

More from Medium

JSX React Basics

Building Website MVP Single Page Application With ReactJS | Part 1

Building with React Hooks

An intro to React Redux