React Essentials

what is React?
React is a javascript library for building user interface in web application . Component based architecture .
and it is mainly used for Building a Single page Application . It was developed by Facebook(Meta).

In this blog ,we will learn about basic react concept one by one .

Definition Of Library:
Library is a collection pre-written reusable code (utilities collection) that used to build application faster. If you build application by using library then the application flow controlled by developer.

Example : React.js, Axios , Lodash.

definition Framework:
Framework provides a Complete architecture for build application . where application flow control by framework . Because Framework works based on “Inversion of control” mechanism which means i give the control ,the framework decides to when to call my code . developer must follow the rules and folder structure that instructed by framework.

Example : Angular, Next.js , Django.

what is JSX?
Jsx means javascript XML that allows you to write a Html within a javascript .

import React from 'react';

const Greeting = () => {
  const name = "Arun";
  return <h1>Hello, {name}</h1>;
};

export default Greeting;

Rendering & Conditional Rendering :
Rendering is nothing but display the content in UI. Conditional rendering refers to display the content in UI based on the condition.
Example :

import React, { useState } from 'react';

//Using Ternary Operator.
const Status = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <>
      {isLoggedIn ? <p>Welcome Back</p> : <p>Please Login</p>}
      <button onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? 'Logout' : 'Login'}
      </button>
    </>
  );
};

export default Status;


//Using && Operator.
const Notification = () => {
  const [hasNewMessage, setHasNewMessage] = useState(true);

  return (
    <>
      {hasNewMessage && <p>You have a new message!</p>}
      
      <button onClick={() => setHasNewMessage(!hasNewMessage)}>
        Toggle Message
      </button>
    </>
  );
};

export default Notification;

What is Component?
Component means reusable and independent piece of code that represent part of UI . Component name must be PascalCase.

Get Developerarun’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example:

Function ProductCard() { 
return <h1>product card </h1>
}

Avoid this ,

Function productCard() { 
return <h1>product card </h1>
}

Becase,if you use camelcase react assume as that is html attribute instead of component .

How Browser Understand React :
React can not directly understand by browser . Browser only understand html,css,js.Browser understand the react with the help of babel Compiler .The Babel complier convert your react code into js object.

What is Fragments?
Fragments is a type of wrapper element that used to group ,multiple react elements.
Examples:

function UserProfile() {
  return (
    <>
      <h2>Arun Kumar</h2>
      <p>Frontend Developer</p>
    </>
  );
}

export default UserProfile;

export default function Blog() {
  return posts.map(post =>
    <Fragment key={post.id}>
      <PostTitle title={post.title} />
      <PostBody body={post.body} />
    </Fragment>
  );
}

The last one used when we need key prop or we use List / Mapping.

why we use fragements?
React component return only one element . if we need to return multiple element then we should be any wrapper element or container element.generally developer use <div> element for wrapping multiple element . but , where the problem was additionaly add one node in DOM structure .it leads to CSS conflict .

Example:

<div clssName:"container">
    <div>
        <h1>hi</h1>
        <p>hello</p>
    </div>
</div>

.container { 
display :flex; 
}

Reconsilation :
Reconsilations is a mechanism used to improve the application performence by minimize the DOM updates.
Work-Flow:
React create new virtual DOM when state or props change .After that react compare the current virtual DOM with previous virtual DOM and find the exact changes. Finally , make only that specific changes in real DOM.

SPA:
SPA means Single Page application. Where load only one html page (index.html).It is used to move or navigate from one web page to another web page without page reload.