Basic things of React.js you need to know

What is react?

React is a javascript library for building UI. It is a declarative, efficient, and flexible javascript library. Every reacts application build depends on components. It’s also components-based architecture. It’s a virtual DOM that depends on elements’ behaviors.

JSX

JSX means JavaScript XML. We know React is a JavaScript framework. So in react we write pure vanilla JavaScript. But on a website, we write HTML. But in the js file, we can not write it. JSX is almost 90% looking at HTML. JSX is using a transpiler which is known as BABLE. BABLE compiles the JSX in HTML. That’s why by using JSX in react we easily building our UI.

virtual DOM

React is working on his own world. React is work on virtual dom. A virtual dom object is the same properties as real dom but it has the power to change the real thing that I want to change. Orginal dom manipulating is slow than virtual dom. Because when the original dom warks it check all things but virtual dom change the real position that I want to update. That’s why React is good enough faster than others.

Styling in React

In development most of the time, we use plain CSS to give styling to our application. But in React mostly developers use the Component library for easier styling. There are many component libraries available to use but the most popular one in React is Material UI.

You can also use the utility class library to style your element. The popular utility class library is React-Bootstrap, Tailwind CSS, and Ant Design. Being a developer you will encounter both of these. So it’s good to be familiar with both types of libraries.

components

Components are the building blocks of every React app. We define small components and then put them together to form bigger ones. All components small or big are reusable, even across different projects. They are nothing but some reusable functions with some input parameter providing some output, smaller ones are tied together to build the bigger ones. In a react component, input is the set of ‘props’ and output is the description of a UI. Basic structure of a component is just a plain JS function. A component can have one or more states which store data that may change over life cycle of the component and on which the output of the component depends.

Factory Functions vs classes

Factory Function: Quite simply function in JS can return objects when they are neither constructor function or classes, it’s called factory function.

Classes: Classes are basically a prototype of something and they usually have member variables and member function, in order to create an object and execute its behavior.

Hooks

Okay, what does it look like? Here’s some sample code from the official React documentation:

import React, { useState } from 'react';function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

we’re importing something called “useState” from React. useState is a Hook, and as you can guess, it provides stateful functionality in this component. If you take a look at the const variable count here refers to the state of this particular variable and any calls to setCount will then change that state accordingly, which you can see being used in the button’s onClick function that’s being returned. Let’s look at the class component equivalent of this.

Props

The way HTML elements can be assigned attributes like id or title, a React element can also receive a list of attributes when it gets rendered. The Button element above received a label attribute. In React, the list of attributes received by a React element is known as props. A React function component receives this list as its first argument. The list is passed as an object with keys representing the attributes names and values representing the values assigned to them.

UseState

UseState functions return an array with two items. One is used to keep initial data and store data over time and the other is using to set the data when needed.

--

--

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