Deep Dive Into React.js

WHAT IS REACT?

React is a declarative, efficient, and flexible javascript library for building User Interfaces of Web and Mobile Applications. It’s a library that used to make web applications. React is an open-source platform and it maintains by Facebook.

REACT IS A FRAMEWORK OR LIBRARY?

React is not a framework it’s a library.

A framework provides you with the certainty that you are developing an application that is in full compliance with the business rules, that is structured, and that is both maintainable and upgradable. But frameworks bind us in a certain way. That means when we are using frameworks we need to code in a certain way and we finally get to mess up with the code.

But a library focus only on how to use it, it doesn't bind us in a certain way. That means the library gives us full control of the application and we can use or do anything in the application whatever we want to do. That makes the application smoother. React is a simple javascript library whether we can use it to make some great web or mobile applications.

JSX

JSX stands for Javascript XML. JSX makes it easier to write and add HTML code to the react application.

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

Components in React

After knowing about JSX, we can now move on to components of react. A component is an independent, reusable code block that divides UI into smaller pieces.

There are two types of the component in react

1. Functional Component
2. Class component.

Functional Component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Different from functional components, class components must have an additional render( ) method for returning JSX.

PROPS

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. ( one way from parent to child)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

STATE

React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.

const [count,setCount] = useState(0);
<button onClick={()=> setCount(count+1)}>Increase</button>
 <h1 style={{color:"black"}}>{count}</h1>

Here first, we initialized the state value first then gives an on-click function and updated count.

React Hooks:

A Hook is a react function that lets you use state and react features from a function-based component. Hooks let you use the functions instead of switching between higher-order components, Classes, and functions. As Hooks are regular Javascript functions, thus you can use the built-in Hooks and create your own custom one.

Basic Hooks Are :

1. useState
2. useEffect
3. useParams
4. useContext

Additional Hooks Are:

1. useReducer
2. useCallback
3. useRef
4. useMemo

Conditional Rendering

Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create elements representing the current state, and let React update the UI to match them.

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

1. if
2. Ternary Operator
3. Logical && operator
4. Switch case operator

REACT STATE MANAGEMENT

React components have a built-in state object. The state is encapsulated data where you store assets that are persistent between component renderings.

The state is just a fancy term for a JavaScript data structure. If a user changes state by interacting with your application, the UI may look completely different afterward, because it’s represented by this new state rather than the old state.