Scribd
Upload
7 views5 pages

React 2

Uploaded by

bybit1sai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views5 pages

React 2

Uploaded by

bybit1sai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

How React works internally

==========================
Diagram: react2.1

React uses a virtual DOM that is basically a DOM tree representation in JavaScript.

So when it needs to read or write to the DOM, it will use the virtual
representation of it.Then the virtual DOM will try to find the most efficient way
to update the browser's DOM.

Assume we have created multiple components and consistently we are performing some
changes in our application.Now we need to see ,how virtual DOM react on each
change.

JSX
====
JSX stands for JavaScript XML.

JSX allows us to write HTML in JavaScript.

JSX elements contain tag, attribute and children.

JSX is not necessity to develop react applications instead we can use Babel.

JSX makes our code elegant and simple.

JSX ultimately compiled to pure javascript which is understand by the browser.

JSX Elements
=============
JSX allows us to write HTML elements in JavaScript and place them in the DOM
without any createElement() and/or appendChild() methods.

ex:1
-----
JSX
----
<h1> Heading Tag </h1>

Babel
-----
React.createElement("h1",null,"Heading Tag");

Here
h1 is a tag name.
null is a optional attribute.
Heading Tag is a children.

ex:2
----
JSX
---
<div>
<h1> Heading Tag </h1>
</div>

Babel
-----
React.createElement("div",null,
React.createElement("h1",null,"Heading Tag"));

ex:3
----
JSX
----
<h1 id="myId"> Heading </h1>

Babel
-----
React.createElement("h1",{id:"myId"},"Heading");

ex:4
----
JSX
----
<h1 className="myClass"> Heading </h1>

Babel
-------
React.createElement("h1",{className:"myClass"},"Heading");

ex:5
----
JSX
----
<h1 id="myId" classname="myClass"> Heading </h1>

Babel
------
React.createElement("h1",{id:"myId",classname:"myClass"},"Heading");

JSX Expressions
===============
JSX allows us to write expressions inside curly braces { }.

The expression can be a React variable, or property, or any other valid JavaScript
expression.

JSX will execute the expression and return the result.

ex:

1) var i=10;
{i}

2) {10 * 20}

3) {Math.random()}

NPM
=====
NPM stands for Node Package Manager

It is a integrated tool for nodejs.

npm is used to download or install node dependencies or package or library.

WE need to below command to download node dependencies.


ex:
npm install -g <dependency_name>

All the dependencies installed in "node_modules" folder.

NPM
=====
NPM stands for Node Package Manager.

It is a integrated tool for nodejs.

It is used to download node depedencies or packages.

To downoad node packages and dependencies we need to use below command.


ex:
npm install -g <node_package_name>;

All node packages will installed in a "node_modules" folder.

Steps to setup npm for react applications


=========================================
step1:
------
Download and install nodejs.
ex:
https://nodejs.org/en/blog/release/v16.16.0

step2:
-----
Copy nodejs directory from C drive.
ex:
C:\Program Files\nodejs

step3:
------
Paste nodejs directory in environmental variables.
ex:
Right click to this pc --> properties --> Advanced system settings -->
environment variables --> user variables --> click to new button
variable name : path
variable value : C:\Users\DELL\AppData\Roaming\npm;C:\Program Files\
nodejs;
--> ok --> ok --> ok.
step4:
-----
Check the version of nodejs and npm.
ex:
npm -version
node --version

First React application Development


=====================================

step1:
------
Make sure nodejs and npm setup done perfectly.

step2:
------
Download and Install VSC code editor.
ex:
https://code.visualstudio.com/download

step3:
-------
Create a "Reactprojects" folder inside 'E' drive.

step4:
-----
Open the VSC editor from "Reactprojects" folder.
ex:
Reactprojects> code .

step5:
-----
Install node module to create react applications.
ex:
Reactprojects> npm install -g create-react-app

step6:
-----
Create a react project i.e myapp1.
ex:
Reactprojects> npx create-react-app myapp1

step7:
-----
Switch to project i.e myapp1.
ex:
Reactprojects> cd myapp1;

step8:
-----
Run the react application.
ex:
Reactprojects/myapp1> npm start

step9:
-----
Test the react application.
ex:
http://localhost:3000

You might also like