What is a model in an MVC?

• The Model-View-Controller (MVC) is an architectural pattern that

separates an application into three main logical components:
the model, the view, and the controller.
Where is MVC used?
• It was used for desktop graphical user interfaces but nowadays is used
in designing mobile apps and web apps.
ReactJS

• 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.
Why we use ReactJS?

• 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.
• The JavaScript virtual DOM is faster than the regular DOM.
• It uses component and data patterns that improve readability and
helps to maintain larger apps.
React ES6 Arrow Functions

• Arrow functions were introduced in ES6.

• Arrow functions allow us to write shorter function syntax
Destructuring
❖Destructuring makes it easy to extract only what is needed.
❖Destructuring means to break down a complex structure into simpler
parts.
❖With the syntax of destructuring, you can extract smaller fragments
from objects and arrays. It can be used for assignments and
declaration of a variable.
❖Destructuring is an efficient way to extract multiple values from data
that is stored in arrays or objects. When destructuring an array, we
use their positions (or index) in an assignment.
Example

var arr = ["Hello", "World"]

// destructuring assignment
var [first, second] = arr;

console.log(first); // Hello
console.log(second); // World
Note:
• When destructuring arrays, the order that variables are declared is
important.
• Notice that the object properties do not have to be declared in a
specific order.
 React ES6 Spread Operator
• ES6 introduced a new operator referred to as a spread operator,
which consists of three dots (...).
• The JavaScript spread operator (...) allows us to quickly copy all
or part of an existing array or object into another array or object.
Syntax

• var variablename1 = [...value];

Example
React ES6 Array Methods
⮚ There are many JavaScript array methods.
⮚ One of the most useful in React is the .map() array
method.
⮚ The .map() method allows you to run a function on
each item in the array, returning a new array as the
result.
React ES6 Modules

❖JavaScript modules allow you to break up your code

into separate files.
❖This makes it easier to maintain the code-base.
❖ES Modules rely on the import and export statements.
Export

• You can export a function or variable from any file.

• There are two types of exports: Named and Default.
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.
React ES6
• ES6 stands for ECMA Script 6 version
• ECMAScript is the Standardization of Javascript programming
language.
• Use of ES6 features we Write Less and Do More.
React Render HTML

• Render means renew only an appropriate part of information on

user’s screen when the element properties (props) are replaced by
new ones or a component state (as set of props) changes in
application.
• Thanks to the render method, we avoid reloading the whole web
page, save time, and increase productivity.
• React's goal is in many ways to render HTML in a web page.
• React renders HTML to the web page by using a function called
ReactDOM.render().
Packages:

⮚ import React from 'react';

⮚ import ReactDOM from 'react-dom';
ReactDOM

• The react-dom package provides DOM-specific methods that can be

used at the top level of your app and as an escape hatch to get
outside the React model if you need to.

• import * as ReactDOM from 'react-dom';

React DOM Render
• The purpose of the function is to display the specified HTML code inside
the specified HTML element.
• The Function takes two arguments, HTML code and an HTML element.

For Example:
ReactDOM.render(<p>Welcome</p>,document.getElementById('root'));
React JSX
• JSX Stands for Javascript XML.
• JSX allows us to write HTML in React.
• JSX allows us to write HTML elements in JavaScript and place them in
the DOM without any createElement().
React JSX
• With JSX code vs Without JSX code
• Expression in JSX
• Wrapping elements or children in JSX
• Styling in JSX
• Attributes in JSX
• Comments in JSX
React Components
React Components
• Every application you will develop in React Will be made up of pieces
called components.
• Components make the task of building UIs much easier.
• We have lot of individual components like a Single web page contain
(Search bar,menu bar,nav bar,content,article etc..,)
• Merge all of these individual components to make a parent
components which will be the final UI
Types of Components
• 1)Function Component
• 2)Class 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.
• The component also requires a render() method, this method returns
HTML.
Example

class Reactjs extends React.Component {

render() {
return <h2>Hi, I am a React JS!</h2>;
}
}
⮚ Before React 16.8, Class components were the only way to track state and lifecycle on
a React component.
⮚ Function components were considered "state-less".
⮚ With the addition of Hooks, Function components are now almost equivalent to Class
components.
⮚ The differences are so minor that you will probably never need to use a Class
component in React.
⮚ Even though Function components are preferred, there are no current plans on
removing Class components from React.
Difference between class & functional
component
React Props
• Props stand for “Properties.”
• React allows us to pass information to a Component using Props.
• Props are immutable so, we cannot modify the props from inside the
component.
• Props are basically kind of global variable or Object.It is an Object
which stores the value of attributes of a tag and work similar to the
HTML attributes.
• We can access any prop from inside a component’s class
import React from 'react';
import ReactDOM from 'react-dom';

function Laptop(props) {
return <h2>I am a { props.brand }!</h2>;
}

// const myElement = <Laptop brand="Dell" />;

//
ReactDOM.render(myElement,document.getElementById('root')
);

ReactDOM.render(<Laptop brand="Dell"
/>,document.getElementById('root'));
Pass Data React Props

• Props are also how you pass data from one component to another, as
parameters.
import React from 'react';
import ReactDOM from 'react-dom';

function Student(props) {
return <h2> { props.name }!</h2>;
}

function College() {
return (
<>
<h1>Who Join today in my Whatsapp Group?</h1>
<Student name="vinitha" />
</>
);
}
ReactDOM.render(<College />,document.getElementById('root'));
React State
❖ The state is an updatable structure that is used to contain data or
information about the component.
❖ The state in a component can change over time. The change in state over
time can happen as a response to user action or system event.
❖ It is the heart of the react component which determines the behavior of the
component and how it will render.
❖ It can be set by using the setState() method and calling setState() method
triggers UI updates.
React State
What is the difference between state and props?

❖ props (short for “properties”) and state are both plain JavaScript objects.
❖ While both hold information that influences the output of render, they are
different in one important way:
❖ props get passed to the component (similar to function parameters)
❖ whereas state is managed within the component (similar to variables declared
within a function).
class Reactstate extends React.Component{
constructor()
{
super();
this.state={initalvalue:"Welcome",name:"Guys"}
}
render()
{
return <h1> {this.state.initalvalue} {this.state.name}</h1>
}
}
ReactDOM.render(<Reactstate />,document.getElementById("root"));
class Reactstate extends React.Component{
constructor(){
super();
this.state={initalvalue:"Welcome",name:"Guys"}
}
changevalue = () =>{
this.setState({initalvalue:"Thanks for Watching"})
}
render(){
return <div>
<h1> {this.state.initalvalue} {this.state.name}</h1>
<br/>
<button onClick={this.changevalue} > Exit</button>
</div>
}}
ReactDOM.render(<Reactstate />,document.getElementById("root"));
React Event
❖ An event is an action that could be triggered as a result of the user
action or system generated event
❖ For Example, a mouse click,loading of a web page,pressing a key,
window resizes , and other interactions are calles events.
❖ React events are named using camelCase,rather than lowercase.
❖ In React,with help of JSX you pass a function as the event
handler,rather than a string.
❖ OnClick={submit} instead of onClick=”submit()”
import React from 'react';
import ReactDOM from 'react-dom';

function ShowMessage() {
const msg = () => {
alert("Hi all Welcome to ISMUNIV") ;
}

return (
<button onClick={msg}>CLICK!</button>

);
}

ReactDOM.render(<ShowMessage />,document.getElementById('root'));
function ShowMessage() {
const msg = () => {
alert("Hi all Welcome to ISMUNIV") ;
}
const mouseOVer=()=>{
alert("This is MouseOVer");
}
const keyDown=()=>{
alert("This is keyDown");
}
return (
<div>
<button onClick={msg}>CLICK!</button> <br /><br />
<button onMouseOver={mouseOVer}>MouseOver</button><br /><br />
<button onKeyDown={keyDown}>keyDown</button>
</div>
);}
ReactDOM.render(<ShowMessage />,document.getElementById('root'));
React Conditional Rendering
Conditional rendering in React works the same way conditions work in
JavaScript.
There is more than one way to do conditional rendering in React. They
are given below.

● if
● ternary operator
● logical && operator
function Login() {
return <h1>Welcome To Google</h1>;
}
function NewUser() {
return <h1>Plese sign up</h1>;
}
function Signup(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <Login/>;
}
return <NewUser/>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Signup isLoggedIn={true} />);