React Basic and Advance || React Basic

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.

import logo from './logo.svg';
import './App.css';
function App() {
return (
<div classname="App">
<h1> hello world</h1>
</div>
);
}
export default App;
App.js

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 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.
ES6 Modules

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>

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.

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:

Store Multiple values in single variables.

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

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");
CommonJS

React Basic and Advance || React Basic

Recommended

More Related Content

Similar to React Basic and Advance || React Basic (20)

Recently uploaded (20)

React Basic and Advance || React Basic