Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 React-js Fundamental, Installation 

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front-end library responsible only for the view layer of the application. It was created by Jordan Walke, who was a software engineer at Facebook. It was initially developed and maintained by Facebook and was later used in its products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed section, but it was released to the public in the month of May 2013.
Today, most of the websites are built using MVC (model view controller) architecture. In MVC architecture, React is the 'V' which stands for view, whereas the architecture is provided by the Redux or Flux.


A ReactJS application is made up of multiple components, each component responsible for outputting a small, reusable piece of HTML code. The components are the heart of all React applications. These components can be nested with other components to allow complex applications to be built of simple building blocks. ReactJS uses a virtual DOM-based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading the complete DOM every time.


To create React app, we write React components that correspond to various elements. We organize these components inside higher-level components which define the application structure. For example, we take a form that consists of many elements like input fields, labels, or buttons. We can write each element of the form as React components, and then we combine it into a higher-level component, i.e., the form component itself. The form components would specify the structure of the form along with elements inside of it.


Traditional Web application Development:-

In Traditional Web Applications, we use HTML, CSS, and JS Code to design UI under application, but in modern web development, we divide the application into two different sub-projects.

the first project contains API and database-related information and the second application contains FrontEnd Design.

React JS and Angular JS both are used to create modern Web application development using React and Angular Front End User Interface.

1)  User Access Layer  (UI/UX)  ----> 

      HTML5, CSS, JS and Jquery

2)  Business Access Layer

       Java, .NET, PHP

3)  Data Access Layer

      Database related code based on technology for Java (JDBC), .NET (ADO.NET), etc


     Modern Web Application Development:-

     Modern Web applications divide the project into two different subparts.

     The first, the part will be implemented by Design Layer

    The second part will be implemented for the Database and Code Layer.


1)  User Access Layer and Business Layer:-

       React or Angular


2)   Data Access Layer

        Create API using any Server Side Scripting.


What you should learn before REACT-JS?


1)  JS, JSX, JS with ES6


2)  Object-oriented JavaScript or JSX 


What is MERN?

MERN  Means

M  --->  MONGO


E --->   Express JS


R ---->  REACT JS


N --->   NODE JS


What is MVC Architecture?


MVC is the design pattern to distribute the project on different project layers, M stands for Model that is used to create data access layer, V stands for View that is used to contain the design layer and C stand for Controller that is used to contain business code of an application.


React Js is used to create the View Layer of an application.


Installation of React-JS?


1)  Install NODE JS in Machine


https://nodejs.org/en/download/


2)  npm install react



3)  npx create-react-app app-name


4)  cd app-name


5)  npm start





node_modules:- the base package of react is a node 


js.


public:-


it contains all assets of the project means js , CSS and images file of an application will be implemented by the public folder.



src:-  it means source, all application component 


will be defined under src folder. start-up file of 


react application is index.js means when we call 


any application then first index.js file will be 


called.



the flow of react js

In react first index.html file will be loaded that will display the result of index.js and index.js file is the start up file that is used to call the app component of the application using app.js file.'

1) public ---> index.html (provide contain to show 


2) result of a component)----> index.js(calling of 


3) component) ----> app.js(component)


we should never write any code on .html, all code


(design, business logic) will be implemented by the component.



What is a Component?

it is the business class or object of react js that is used to provide the design layer and code layer of an application.

react js is sepcially used to design single page application and page component (header, sidebar,footer, content section) will be created by component.

type of component.


1)  Function Component:-


    function App() {

       return ( 


           )

 

        }


    export default App;

    export means public accessbility to component


    2)   Class Component:-


it provides the class pattern to implement component code, we can create a separate section to initialize data member and form attribute under the constructor \and init block. we can implement all features of oop's to create 


1) class-based component.


class Classname extends React. Component


{

       render()

       {

           return ( 


           )

       }


}



Addition program in REACT JS:-


import React from "react";


export class Addition extends React.Component

{

    state = {

        a: 100,

        b: 200,

        c:0

      };

    

   constructor()

   {

    

    super();

    

   }

   render()

   {

    const { a, b } = this.state;

    //console.log(this.state) ; 

     this.state.c=a+b;

    return(

       <div>

       <p>{this.state.a+this.state.b}</p>

       <p>{a+b}</p>

       <p>{this.state.c}</p>

       </div>


       )

   } 


}



index.js file:-

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import {Addition} from './Addition'

import reportWebVitals from './reportWebVitals';


ReactDOM.render(

  <React.StrictMode>

    <Addition />

  </React.StrictMode>,

  document.getElementById('root')

);


// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();






Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post