UNIT-IV

REACT
 INTRODUCTION
• React is a JavaScript library for building user interfaces.
• React is used to build single-page applications.
• React allows us to create reusable UI components.
• React is work on components. We can create different
components and create a web page.
• Maintained by Facebook.
Why React JS
• Improves speed of app
• Uses Virtual DOM- improved performance
• Faster than DOM
• High demand due to fast speed.
• Readability –due to components
• Maintains longer code.
• Large Community for support.
• Mobile App development with react- Native.
 React.JS History

• Current version of React.JS is V18.0.0 (April 2022).

• Initial Release to the Public (V0.3.0) was in July 2013.
• React.JS was first used in 2011 for Facebook's Newsfeed feature.
• Facebook Software Engineer, Jordan Walke, created it.
• Current version of create-react-app is v5.0.1(april 2022)
• Apps with React is:
1. Netflix
2. Whatsapp web
3. Instagram etc.
 React Getting Started
• To use React in production, you need npm which is
included with Node.js.
• To get an overview of what React is, you can write
React code directly in HTML.
• But in order to use React in production, you need npm
and Node.js installed.
https://youtu.be/tiLWCNFzThE
 Node JS

• Node Js is a javascript runtime environment.

• Framework for writing server side javascript application.
• Node js use javascript as a programming language.
• It execute javascript into a server side .
• We can connect javascript with database using nodejs.
• It is can be used basically with NPM for store packages.
• NodeJs is basically used to create API so that you can connect with
database.
• NodeJs is run on serverside, javascript is run on web browser.
 NPM

• Node package manager.

• It is the largest software registry.
• Registry contains over 80,000 packages.
• Npm is installed with node JS.
• Npm is like warehouse.
 App.js
import logo from
'./logo.svg';
import './App.css';

function App() {
return (
<div classname="App">
<h1> hello world</h1>
</div>
);
}

export default App;

 Create a New file Users.js

function Users(){
return (
<div classname="App">
<h1> hello how are
you</h1>
</div>
);
}

export default Users;

Import file Users.js into Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Users from './Users';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Users />
</React.StrictMode>
);
 What is ES6?

• ES6 stands for ECMAScript 6.

• ECMAScript was created to standardize JavaScript, and
ES6 is the 6th version of ECMAScript.
• It was published in 2015, and is also known as
ECMAScript 2015.
• ECMA is an organization which decides standers for the
ECMA script.
 Why should use ES6 ?

1.JavaScript ES6 brings new syntax and new awesome features to

make your cod emore modern and more readable.

2.It allows you to write less code or do more.

3.ES6 introduce us to many great features.

4.It is used by modern javascript frameworks like reactJs, AngularJs

etc.
 Variables
Before ES6 there was only one way of defining your variables: with
the var keyword. If you did not define them, they would be assigned to the
global object. Unless you were in strict mode, then you would get an error if
your variables were undefined.
Now, with ES6, there are three ways of defining your variables: var, let,
and const.
If you use var outside of a function, it belongs to the global scope.
If you use var inside of a function, it belongs to that function.
NEW WAY OF DECLARING VARIABLES
 ES6 Modules
ES6 Modules A JavaScript module is a piece of reusable code that can
easily be incorporated into other JavaScript files without causing
variable collisions.
JavaScript modules are stored in separate files, one file per module.
There are two options when creating and exporting a module: you can
export multiple JavaScript objects from a single module or one
JavaScript object per module.
In text-helpers.js, two functions are exported:
export const print=(message)
export can be used to export any JavaScript type that will be consumed
in another module.
Named Exports
You can create named exports two ways. In-line individually, or all at once
at the bottom.
Default Exports
Let us create another file, named message.js, and use it for demonstrating default export.
You can only have one default export in a file.
Import
You can import modules into a file in two ways, based on if they are named
exports or default exports.
Named exports must be destructured using curly braces. Default exports do
not.
In methods, only those properties can be used that we have declared in the
UI besides them, we cannot use any other property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
class hello{
message(){
console.log("hello everyone");
}
sorry(){
console.log("i am sorry");
}
}
let a = new hello();
a.message();
a.sorry();
</script>
</head>
<body></body>
</html>
Objects
 FUNCTIONS
Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript
is similar to a procedure—a set of statements that performs a task or calculates a value,
but for a procedure to qualify as a function, it should take some input and return an output
where there is some obvious relationship between the input and the output. To use a
function, you must define it somewhere in the scope from which you wish to call it.
FUNCTIONS
 Arrow Functions

Arrow functions allow us to write shorter function syntax:

It gets shorter! If the function has only one statement, and the statement returns a value, you can
remove the brackets and the return keyword:
<script>

let a = function(){
document.write("Hello
world");
}
a();
</script>
<script>
let a = () => {

document.write("hello");
=> }
a();

</script>
 Promises
A JavaScript Promise object contains both the producing code and calls to the consuming code:

Promise Object Properties

A JavaScript Promise object can be:

•Pending
•Fulfilled
•Rejected

The Promise object supports two properties: state and result.

While a Promise object is "pending" (working), the result is undefined.

When a Promise object is "fulfilled", the result is a value.
When a Promise object is "rejected", the result is an error object.
• Then() & catch both are call back functions.
• Inbuilt functions are used in javascript
If Condition is true than call resolve()

If Condition is false than call reject()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<script>
let complete = true;
let prom = new Promise (function(resolve,reject){
if(complete){
resolve("i am sucessful.");
}else{
reject("i am failed.");

}
});
console.log(prom);
</script>
</head>
<body>

</body>
</html>
Imperative Versus Declarative
 CommonJS
CommonJS is the module pattern that’s supported by all versions of Node (see
the Node.js documentation on modules). You can still use these modules with
Babel and webpack. With CommonJS, JavaScript objects are exported using
module.exports. For example, in CommonJS, we can export the print and log
functions as an object:
const print(message) => log(message, new Date())
const log(message, timestamp) =>
console.log(`${timestamp.toString()}: ${message}`}
module.exports = {print, log}
CommonJS does not support an import statement. Instead, modules are
imported with the require function:
const { log, print } = require("./txt-helpers");
Store Multiple values in single variables.
ES6 Array Methods
ES6 Array Methods
ES6 Array Methods
ES6 Array Methods
ES6 Array Methods
ES6 Array Methods
ES6 Array map() Methods
ES6 Array Map() Method