Scribd
Upload
672 views

1.react JS Basics

React is a JavaScript library for building user interfaces. It was created by Facebook and uses virtual DOM for improved performance. To install React, Node.js must be downloaded and then create-react-app can be used to generate a starter project. The key files and folders in a React app include node_modules, public, src, package.json and README. Key React features include JSX, components, one-way data binding, virtual DOM, simplicity and performance. Components are the building blocks and the virtual DOM improves efficiency.

Uploaded by

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

1.react JS Basics

React is a JavaScript library for building user interfaces. It was created by Facebook and uses virtual DOM for improved performance. To install React, Node.js must be downloaded and then create-react-app can be used to generate a starter project. The key files and folders in a React app include node_modules, public, src, package.json and README. Key React features include JSX, components, one-way data binding, virtual DOM, simplicity and performance. Components are the building blocks and the virtual DOM improves efficiency.

Uploaded by

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

React JS Basics

React Introduction:

● It was created by Jordan Walke, who was a software engineer at


Facebook.
● ReactJS is a declarative, efficient, and flexible JavaScript library
for building reusable UI components.
● It is an open-source, component-based front end library which is
responsible only for the view layer of the application.
● It was initially developed and maintained by Facebook and later
used in its products like WhatsApp & Instagram.
● The main objective of ReactJS is to develop User Interfaces (UI)
that improves the speed of the apps.
● It uses virtual DOM (JavaScript object), which improves the
performance of the app.

How to Install React js Apps?


★ We need to download Node.js.
★ You can check whether you installed node in your computer or not
by running “node -v” ,npm -v in the command prompt in windows
yor terminal in linux or mac.
★ Link: https://nodejs.org/en/download.
★ Download Windows Installer 32 bit or 64 bit.
★ And the Internet is required for downloading library files at the
time of application creation.
★ Open command prompt.
★ Create new folder with any name
★ Run this command npx create-react-app sample(folder name).
★ Wait until it finishes the application creation.
★ Now go into the helloworld folder by using cd sample in cmd
★ Now we are going to run the application to check if everything is
fine. By using the following command npm start.
★ It will automatically open the browser and you will get the
following screen.

★ In the React application, there are several files and folders in the root
directory.
● node_modules: It contains the React library and any other
third party libraries needed.
● public: It holds the public assets of the application. It
contains the index.html where React will mount the
application by default on the <div id="root"></div> element.
● src: It contains the App.css, App.js, App.test.js, index.css,
index.js, and serviceWorker.js files. Here, the App.js file is
always responsible for displaying the output screen in
React.
● package-lock.json: It is generated automatically for any
operations where the npm package modifies either the
node_modules tree or package.json.
● package.json: It holds various metadata required for the
project. It gives information to npm, which allows it to
identify the project as well as handle the project
dependencies.
● README.md: It provides the documentation to read about
React topics.

React Features:

● JSX
● Components
● One-way Data Binding
● Virtual DOM
● Simplicity
● Performance
Components:

★ ReactJS is all about components. ReactJS application is made up


of multiple components, and each component has its own logic
and controls.

Virtual DOM:

★ A virtual DOM object is a representation of the original DOM


object. It works like a one-way data binding.

JSX:

★ JSX stands for JavaScript XML.


★ JSX allows us to write HTML in React.

Example: <div>Hello JavaTpoint</div>

How it works: React.createElement("div", null, "Hello JavaTpoint");

You might also like