Scribd
Upload
6 views37 pages

Unit5 Pure React

The document provides an overview of setting up a React application, including essential files and libraries such as React and React DOM. It explains the concepts of Virtual DOM, React components (both class and function), and the role of Babel and Webpack in the development process. Additionally, it highlights the importance of separating data from UI elements in React to enhance component reusability and efficiency.

Uploaded by

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

Unit5 Pure React

The document provides an overview of setting up a React application, including essential files and libraries such as React and React DOM. It explains the concepts of Virtual DOM, React components (both class and function), and the role of Babel and Webpack in the development process. Additionally, it highlights the importance of separating data from UI elements in React to enhance component reusability and efficiency.

Uploaded by

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

UNIT-5

Pure React
Version Checking
TO START THE REACT SERVER
Setup
• Setup Test.js
• Serviceworker.js
• Logo.svg
• Gitignore
• Package.lock.\js
• App.js These files can be
• App.css delete
• App.test.js
• Robot Task- what is <noscript>
• Manifest
• favicon
Page
Setup
• To work with React two libraries we need to import
• React
• React DOM
• Both can be used with the help of CDN
• React Library is used to create views
• React Dom is used for the UI in the Browser.
IMPORTING CDN’s
Files in React-

Package.json- contain information regarding name, version, private, reflect how many
dependencies are there in this react’s project.
If to share the project with someone just you need to share package.json because it
contain version used in the project.
Importing the files
HTML DOM is basically used to
create the Nodes.

To get the value from the HTML Document

To set the value in HRML Document


changing class name, changing Text.

NOTE- With the Help of DOM you can add HTML


Element or delete the HTML element.
Virtual DOM

• What is DOM ?
• Document  HTML Document File
• Object  title, body, url
• Model  Collection and arrangement of HTML tags
• If to call a particular object of a document [document.title]
• It will display the content of a title
• Calling the particular object of the class.
Virtual DOM
• In every javascript DOM having corresponding virtual DOM.
• Virtual DOM is basically the clone of the DOM.
• If any changes done in the DOM, it should be done in virtual DOM instead
of doing in real/original DOM.
• If heavy changes/ maximum changes is in the single tag then that changes
will be done in virtual DOM then it will render after that final changes
done in the real DOM.
React Component
React Component

• Components are independent and reusable bits of code.


• They serve the same purpose as JavaScript functions, but
work in isolation and return HTML.
• Components come in two types, Class components and
Function components.
• Basically components can be reused many times.
• There is no need to rewrite the coding.
React Component
Class Component
A class component must include the extends React.Component statement. This
statement creates an inheritance to React.Component, and gives your component access
to React.Component's functions.
The component also requires a render() method, this method returns HTML.
React Component

import React from 'react'


export default extends React.component{
render()
{
return(
<div>
<h1>Home component</h1>
</div>)
}
}
Function Component
Here is the same example as above, but created using a
Function component instead.
A Function component also returns HTML, and behaves much
the same way as a Class component, but Function components
can be written using much less code, are easier to understand,
and will be preferred in this tutorial.
React Elements
• The React DOM is made up of React elements.
• React elements are the instructions for how the browser DOM should be
created.
• We can create a React element using React.createElement:
• CreateElement method takes few parameters.
• First one is the type of Element we want to create like h1 or h2
or div.
• Second parameter specifies the Properties we want to apply to
this element.
• Third one represents the Child Element or Elements that has
be placed inside the Parent one.
const element = React.createElement("h1",null,'Hello
World');
What is Babel
• Babel is an JavaScript Compiler.

• It is mainly used to convert ECHMA script 2015 + code into a


backward compatible version of JavaScript in current and
old version of browsers or environment.

• When we create an app by using “create-react-app” then


babel automatically included in our reactapp.

• Babel can convert JSX Syntax.


Webpack
Use of Webpack
Constructing Elements with
Data
The major advantage of using React is its ability to separate data from UI
elements. Since React is just JavaScript, we can add JavaScript logic to
help us build the React component tree. For example, ingredients can be
stored in an array, and we can map that array to the React elements.

You might also like