REACT

 

REACT

React is a library in JS which helps to build UI.

UI – User Interface is the space where human & machine interacts.

Facebook - React

 

FRAMEWORK vs LIBRARY

Framework – Pre build things are available u can just pick and place  them to create the app

Library – U have to build from the scratch (reusable component) and  place it in your app.

React Pre-requisite

HTML,CSS,JS

Wherever we need to handle large quantities of data, animations we can go with react

Angular Pre-requisite

HTML,CSS,JS,OOPS,TYPESCRIPT

For enterprise structures we prefer to use angular (Admin, Mentor, Student for different users category we need to allow/block some particular modules(access) in that cases we can go with angular)

 

 WHY REACT IS FASTER THAN JS

React will create two virtual DOM which is similar to real DOM.

After doing any changes in the node part of DOM it will compare with another virtual DOM and it update only the changes in the real DOM so it is faster.

HOW TO START WITH REACT

 

1.      Install Node js;

2.      Node js automatically install npm;

3.      Node –v; npm-v  (check versions to support React);

      https://reactjs.org/docs/create-a-new-react-app.html

 

4.      Check npm path is already in Environmental Variable otherwise set path using the below instruction

·         Copy npm path from program files or program files(x86)

C:\Program Files (x86)\nodejs\node_modules\npm\bin

·         Control Panel – System –Advance Setting – Environmental Variable –Path –check npm path is there otherwise u add npm path and save changes with ok.

5.      Select the drive where this React app folder need to be created / open that particular drive in command prompt

6.      Add  npx  create-react-app  (Folder Name) –(Need Internet Connection for React) (if this fail follow the below code).

Note : Name must start with small case only.

7.      npm  install –g create- react – app (Folder Name)

8.      After  folder creation open the folder path in cmd and  

 

    command        npm start

 

 

NPM vs NPX

Node Package Manager is a tool that uses to install packages.

Node Package Execute is a tool that uses to execute packages.

npm	npx
If you wish to run package through npm then you have to specify that package in your package.json and installed it locally.	A package can be executable without installing the package, it is an npm package runner so if any packages that aren’t already installed it will installed automatically.
To use create-react-app in npm the commands are npm install create-react-app then create-react-app myApp(Installation required).	But in npx you can use that without installing like npx create-react-app myApp, this command is required in every app’s life cycle only once.
Packages used by npm are installed globally you have to care about pollution for the long term.	Packages used by npx are not installed globally so you have to carefree for the pollution for the long term.

 

 Create React App cmd WEBSITE

 

https://reactjs.org/docs/create-a-new-react-app.html

 

To check whether react properly initiated in your system or not ,after npm start type localhost:3000 in your browser address  and check  u will get React logo  

 

WHAT IS COMPONENT & APP

 Component is a building block (reusable) of react where App is the container for Component.

COMPONENT TYPES

Function Component

Class Component ---- mostly used in older version of react

 

FUNCTION COMPONENT

Rules for Functional Component

1.      Function Name starts with Capital Letter

2.      It should return something as a single element

BASIC CODE

 

import react from "react"

function App() {

    return (

      <div>

      <h1>Welcome to React</h1>

      </div>

    );

  }

  export default App

  

 

To run Locally in VS Code

 

Ctr+  ~   => open terminal

Npm start

to close npm   ctr + C

 

 REACT FRAGMENT

In react, function component will return single element in jsx  for that every element should be wrapped in a div tag. Using so much of div tag may lead to confusions and sometimes it doesn’t shoot for styling like flex to avoid that we are using react fragment

<>    </>

import react from "react"

function App() {

    return (

      <>

      <h1>Welcome to React</h1>

      </>

    );

  }

  export default App

 

 

EXPORT & IMPORT

 

If we want to use component from another file then we can use export and import.

export default (Function name)

import function name from file

 

To Import Multiple Component from single file we prefer export

export

import {functionname1,function name2} from file

 

#App.js

import './App.css';

import { useState } from 'react';

import Test from "./test"

import {Welcome} from "./Welcome"

function App() {

   

  return (

    <div className="App">

   <Test></Test>

   <Welcome> </Welcome>

    </div>

  );

}

export default App;

  

 

#Welcome.js

export  function Welcome(){

    

    return(

        <>

        <h1>Welcome</h1>

        </>

    )

}

  #test.js

import {Welcome} from "./Welcome"

export default function Test(){

    return(

        <>

        <Welcome></Welcome>

        <Welcome></Welcome>

        

        </>

    )

}

 

To Import Multiple Component from single file we prefer export

 

function Welcome(){

    

    return(

        <>

        <h1>Welcome</h1>

        </>

    )

}

function Hello(){

    return(

        <>

        <h1>Hello</h1>

        </>

    )

}

export{Welcome,Hello}

// import{Welcome,Hello} from "./Welcome"

 

  WHAT IS JSX – Java Script Extended

 JSX is used in react which have a syntax similar to HTML and also provide power of JS.