You don’t know React JS

4 min readMay 7, 2021

What is React?

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. React is a library not a framework, that’s why its not a complete solution, you also need use more library for work.

React is open-source and maintain by Facebook. Since browsers understand Javascript, React to use describe for User Interface.

REACT IS NOT A FRAMEWORK

Lets find the difference between framework and library. Those are totally different. Framework is a broad thing which have too many things for work.

Example: ANGULAR JS, VUE JS.

These frameworks created by dedicated teams, and ship with everything you need to build large-scale applications.

Rather, React is a JavaScript Library, with several operations and Libraries focus only on how to use it, which means that the team doesn’t support libraries for global state management, like HTTP, routing, forms, etc..

JSX

JSX stands for JavaScript XML. JSX makes it easier to write and add HTML in React application. Its not a complex thing at all. Example:

const App = (){  return (  <div>
     <h1 style = {{color: 'red'}}>Hello react!</h1>
  </div>
);
}

That’s it. What is the different? This is a react application code with JSX. The point JSX is mix up with JavaScript.

COMPONENTS

This is the most important thing in React. React is Component Oriented. React divide everything as a component, that is much much easier to maintain an application. For example we can look at this picture below:

There is what we see, everything is a component in React. Typically Components are two types.

Similar in look, different in data.
Different look different data.

Other Example:

Look at the picture, those 3 card are same look but data are different, React make it easier.

Props

Short for properties, props can best be defined as a way of passing data from component to component, basically from parent to child component.

Example: This is Parent components

const App = (){const friends = [
  {
    name: 'Najmul',
    job: 'programmer'
  },
  {
    name: 'Tanvir',
    job: 'programmer'
  },
  {
    name: 'Mahtab',
    job: 'programmer'
  },return (<div>
     {      friends.map(friend => <friend friend = {friend}></friend>)
     }  </div>
);
}

Now we pass the parent components data to child components.

const friend = (props){
//receive data from parent components just type propsreturn ( <div>
     <h1>props.friend.name</h1>
  </div>
);
}

This is props, i was passing data child components from parent components.

STATE

If props hold immutable data and are rendered by components, then state stores data about the component that can change over time. Change could come in the form of user events or system events such as response to user input or server requests. Example:

const App = (){
const [count, setCount] = useState(0);return (<div>
     <button onClick={() => setCount(count + 1)}>increment</button>     <h1>Count: {count}</h1>     <button onClick={() => setCount(count - 1)}>Decrement</button>  </div>
);
}

This is sample example of use state. when user click

REACT HOOKS

Hooks? How hard thing are in react but Actually not. Hooks is actually a built in function. Which have pre-define task to do. But people call it Hooks for fanciness. But its actually a Function. React have some hooks that made your project easy. Some React Hooks are:

Basic Hooks
useState
useEffect
useContext
Additional Hooks
useReducer
useCallback
useMemo
useRef

And many more, In the next blog i will describe more..

CONDITIONAL RENDERING

We are able make components which we need in React. After that, ready to render them depending on a few conditions or the state of our application. In other words, based on one or a few conditions, a component chooses which components it’ll return.

Conditional Rendering are mostly easy in React. Popular Conditional Rendering is:

if
ternary operator
logical && operator
switch case operator

TERNARY OPERATOR

Its a conditional operator that makes if else easier. The JavaScript ternary operator is the only operator that takes three operands. The condition is an expression that evaluates to a Boolean value, either true or false. If the condition is true, the ternary operator returns condition_1, otherwise it returns the condition_2.

Example 1:

// If else in normallyif(true){
 console.log('This is valid')
}
else{
 console.log('This is invalid')
}

Example 2:

// ternary operatorconst age = 19; 
const canDrive = age > 16 ? 'yes' : 'no';

In ternary , after ? block is if and after : block is else.

STATE MANAGEMENT

In React, State management is more easier, you almost no need to use Flux or Redux. Though is you have an enterprise level or big big application Redux/flux make it easy to use, but mid-level application or mini application you just don’t need to use Redux/ Flux.

React Built-in Hooks makes it dashing. Yes, useReducer is the most popular react hook that make your state management easier. Its an advance version of useState hook.

In the other blog i will describe more about it..