Scribd
Upload
16 views

Unit 2

Uploaded by

Suchi Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Unit 2

Uploaded by

Suchi Patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Unit-2: Fundamentals of React.

js

2.1 Overview of React

• The world can't live without mobile and web applications in this day and age.
Everything is digitized, from booking cabs to ordering food to make bank transactions.
Thanks to the efficient frameworks that provide a seamless user experience. One such
robust frontend library is React.
2.1.1 Concepts of React.

• React is a JavaScript-based UI development library.


• Facebook and an open-source developer community run it.
• React is a library rather than a language, it is widely used in web development. The
library first appeared in May 2013 and is now one of the most commonly used
frontend libraries for web development.
• React offers various extensions for entire application architectural support, such as
Flux and React Native, beyond mere UI.

Why React?

• Easy creation of dynamic applications: React makes it easier to create dynamic web
applications because it requires less coding and offers more functionality, as opposed
to JavaScript, where coding often gets complex very quickly.

• Improved performance: React uses Virtual DOM, thereby creating web applications
faster. Virtual DOM compares the components’ previous states and updates only the
items in the Real DOM that were changed, instead of updating all of the components
again, as conventional web applications do.

• Reusable components: Components are the building blocks of any React application,
and a single app usually consists of multiple components. These components have
their logic and controls, and they can be reused throughout the application, which in
turn dramatically reduces the application’s development time.

• Unidirectional data flow: React follows a unidirectional data flow. This means that
when designing a React app, developers often nest child components within parent
components. Since the data flows in a single direction, it becomes easier to debug
errors and know where a problem occurs in an application at the moment in question.

• Small learning curve: React is easy to learn, as it mostly combines basic HTML and
JavaScript concepts with some beneficial additions. Still, as is the case with other tools
and frameworks, you have to spend some time to get a proper understanding of
React’s library.

• It can be used for the development of both web and mobile apps: We already know
that React is used for the development of web applications, but that’s not all it can do.
There is a framework called React Native, derived from React itself, that is hugely
popular and is used for creating beautiful mobile applications. So, in reality, React can
be used for making both web and mobile applications.
Unit-2: Fundamentals of React.js

• Dedicated tools for easy debugging: Facebook has released a Chrome extension that
can be used to debug React applications. This makes the process of debugging React
web applications faster and easier.

2.1.2 Using React with HTML

• React’s goal is in many ways to render HTML in web page.


• React renders HTML to the web page by using a function called
ReactDOM.render().
• Render()
The reactDOM.render() function take two arguments: HTML code and HTML
element.
• The purpose of the function is to display the specified HTML code inside the
specified HTML element.
Display a paragraph inside the root element:
ReactDOM.render(<p>Hello</p>,document.getElementById(‘root’));
Output:
<body>
<div id=”root”></div>
</body>

2.1.3 React Interactive components: Components within components and Files

• A Component is one of the core building blocks of React.


• In other words, we can say that every application you will develop in React will
be made up of pieces called components.
• Components make the task of building UIs much easier.
• You can see a UI broken down into multiple individual pieces called components
and work on them independently and merge them all in a parent component
which will be your final UI.
Unit-2: Fundamentals of React.js

Two types of components:

1. Functional Components

• Functional components are simply javascript functions.


• We can create a functional component in React by writing a javascript function.
• These functions may or may not receive data as parameters.
• In the functional Components, the return value is the JSX code to render to the DOM
tree.
• Example: Program to demonstrate the creation of functional components.
1. Filepath- src/index.js: Open your React project directory and edit
the index.js file from src folder:
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './App';

ReactDOM.render(
<React.StrictMode>
<Demo />
</React.StrictMode>,
document.getElementById('root')
);

2. Filepath- src/App.js: Open your React project directory and edit


the App.js file from src folder.
import React from 'react';
import ReactDOM from 'react-dom';

const Demo=()=>
{
Unit-2: Fundamentals of React.js

return <h1>Welcome to GeeksforGeeks</h1>;


}

export default Demo;

2. Class Components

• The class components are a little more complex than the functional components.
• The functional components are not aware of the other components in your program
whereas the class components can work with each other.
• We can pass data from one class component to other class components. We can use
JavaScript ES6 classes to create class-based components in React. Below example
shows a valid class-based component in React.

2.1.4 Passing data through Props

• Props are arguments passed into React components.


• Props are passed to components via HTML attributes.
• React Props are like function arguments in JavaScript and attributes in HTML.
• To send props into a component, use the same syntax as HTML attributes:
const myElement = <Car brand="Ford" />;
• The component receives the argument as a props object:

function Car(props) {

return <h2>I am a { props.brand }!</h2>;

Pass Data
• Props are also how you pass data from one component to another, as parameters.
function Car(props) {
return <h2>I am a { props.brand }!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand="Ford" />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Unit-2: Fundamentals of React.js

2.2 Class components


2.2.1 React class and class components

• When creating a React component, the component's name must start with an upper-
case letter.
• The component has to 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.

Create a Class component called Car

import React,{Component} from ‘react’;

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

To use this component in your application, use similar syntax as normal HTML: <Car />

Component Constructor

• If there is a constructor() function in your component, this function will be called when
the component gets initiated.
• The constructor function is where you initiate the component's properties.
• In React, component properties should be kept in an object called state.
• The constructor function is also where you honor the inheritance of the parent
component by including the super() statement, which executes the parent
component's constructor function, and your component has access to all the functions
of the parent component (React.Component).

class Car extends React.Component {

constructor() {

super();

this.state = {color: "red"};

render() {
Unit-2: Fundamentals of React.js

return <h2>I am a Car!</h2>;

Components in Components

class Car extends React.Component {

render() {

return <h2>I am a Car!</h2>;

class Garage extends React.Component {

render() {

return (

<div>

<h1>Who lives in my Garage?</h1>

<Car />

</div>

); } }

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

2.2.2 Conditional statements, Operators, Lists


Conditional Statement

• if Statement

We can use the if JavaScript operator to decide which component to render.

Example:

import React from 'react';


import ReactDOM from 'react-dom/client';

function MissedGoal() {
return <h1>MISSED!</h1>;
Unit-2: Fundamentals of React.js

function MadeGoal() {
return <h1>GOAL!</h1>;
}

function Goal(props) {
const isGoal = props.isGoal;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<Goal isGoal={false} />);

Operators
Logical && Operator
import React from 'react';
import ReactDOM from 'react-dom/client';

function Garage(props) {
const cars = props.cars;
return (
<>
<h1>Garage</h1>
{cars.length > 0 &&
<h2>
You have {cars.length} cars in your garage.
</h2>
}
</>
);
}

const cars = [];


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);
Ternary Operator

condition ? true : false

import React from 'react';


Unit-2: Fundamentals of React.js

import ReactDOM from 'react-dom/client';

function MissedGoal() {
return <h1>MISSED!</h1>;
}

function MadeGoal() {
return <h1>GOAL!</h1>;
}

function Goal(props) {
const isGoal = props.isGoal;
return (
<>
{ isGoal ? <MadeGoal/> : <MissedGoal/> }
</>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<Goal isGoal={false} />);

Lists

• In React, you will render lists with some type of loop.


• The JavaScript map() array method is generally the preferred method.

function Car(props) {

return <li>I am a { props.brand }</li>;

function Garage() {

const cars = ['Ford', 'BMW', 'Audi'];

return (

<>

<h1>Who lives in my garage?</h1>

<ul>

{cars.map((car) => <Car brand={car} />)}


Unit-2: Fundamentals of React.js

</ul>

</>

);

const root =
ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

Example:

function Car(props) {

return <li>I am a { props.brand }</li>;

function Garage() {

const cars = [

{id: 1, brand: 'Ford'},

{id: 2, brand: 'BMW'},

{id: 3, brand: 'Audi'}

];

return (

<>

<h1>Who lives in my garage?</h1>

<ul>

{cars.map((car) => <Car key={car.id} brand={car.brand}


/>)}

</ul>

</>

);
Unit-2: Fundamentals of React.js

const root =
ReactDOM.createRoot(document.getElementById('root'));

root.render(<Garage />);

2.2.3 React Events: Adding events, Passing arguments, Event objects

• Just like HTML DOM events, React can perform actions based on user events.
• React has the same events as HTML: click, change, mouseover etc.
Adding Events

<button onClick={shoot}>Take the Shot!</button>


import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
const shoot = () => {
alert("Great Shot!");
}

return (
<button onClick={shoot}>Take the shot!</button>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<Football />);

Passing Arguments
import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
const shoot = (a) => {
alert(a);
}

return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
Unit-2: Fundamentals of React.js

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<Football />);

React Event Object


import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function.
In this case, the 'click' event
*/
}

return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<Football />);

You might also like