Scribd
Upload
2 views

Section 2_Unit 2 React JS

This document provides an overview of ReactJS, highlighting its advantages such as speed, flexibility, and reusable components. It includes instructions for setting up a React environment, writing JSX, creating components, handling events, and applying styles. Additionally, it covers concepts like conditional rendering, lists, and props in React components.

Uploaded by

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

Section 2_Unit 2 React JS

This document provides an overview of ReactJS, highlighting its advantages such as speed, flexibility, and reusable components. It includes instructions for setting up a React environment, writing JSX, creating components, handling events, and applying styles. Additionally, it covers concepts like conditional rendering, lists, and props in React components.

Uploaded by

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

Unit-II ReactJS

Advantages of React
1. Speed
2. Flexibility
3. Performance
4. Reusable Components
5. It helps to build rich user interfaces
React Directly in HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>
Setting up a React Environment
• If you have npx and Node.js installed, you can create a React
application by using create-react-app
• Step 1:
• Run this command to create a React application named my-react-
app
• The create-react-app will set up everything you need to run a
React application.
• Step 2:
• Run the React Application
• Run this command to move to the my-react-app directory:

• Step 3:
• Run this command to run the React application my-react-app:
• A new browser window will pop up with your newly created React
App.
• If not, open your browser and type localhost:3000 in the address bar.
• The result:
Modify the React Application
• Look in the my-react-app directory, and you will find a src folder.
• Inside the src folder there is a file called App.js, open it and it will look like this:
• Replace all the content inside the <div className="App"> with a <h1> element.

function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom/client’;

const myFirstElement = <h1>Hello React!</h1>


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
React Render HTML
❑React renders HTML to the web page by using a function called createRoot()
and its method render().
❑The createRoot Function
• The createRoot() function takes one argument, an HTML element.
• The purpose of the function is to define the HTML element where a React
component should be displayed.
❑The render Method
• The render() method is then called to define the React component that
should be rendered.
const myelement = (
Display a table inside an element with the id of "root" <table>
<tr>
<!DOCTYPE html> <th>Name</th>
<html> </tr>
<head> <tr>
<script <td>John</td>
src="https://unpkg.com/react@18/umd/react.developmen </tr>
t.js" crossorigin></script> <tr>
<script src="https://unpkg.com/react- <td>Elsa</td>
dom@18/umd/react-dom.development.js" </tr>
crossorigin></script> </table>
<script );
src="https://unpkg.com/@babel/standalone/babel.min.js" const container = document.getElementById('root');
></script> const root = ReactDOM.createRoot(container);
</head> root.render(myelement);
<body> </script>
<div id="root"></div> </body>
<script type="text/babel"> </html>
React JSX
❑What is JSX?

• JSX stands for JavaScript XML.


• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.

❑ Coding JSX
• JSX allows us to write HTML elements in JavaScript and place them in
the DOM without any createElement() and/or appendChild()
methods.
• JSX converts HTML tags into react elements.
With JSX
import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = <h1>I Love JSX!</h1>;

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


root.render(myElement);
Without JSX
import React from 'react';
import ReactDOM from 'react-dom/client';

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

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


root.render(myElement);
Expressions in JSX
With JSX you can write expressions inside curly braces { }

import React from 'react';


import ReactDOM from 'react-dom/client';

const myElement = <h1>React is {5 + 5} times better with JSX</h1>;

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


root.render(myElement);
Inserting a Large Block of HTML
import React from 'react';
import ReactDOM from 'react-dom/client';
const myElement = (
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
One Top Level Element
• The HTML code must be wrapped in ONE top level element.
• So if you like to write two paragraphs, you must put them inside a parent element, like a div
element.
import React from 'react';
import ReactDOM from 'react-do/client';
const myElement = (
<div>
<h1>I am a Header.</h1>
<h1>I am a Header too.</h1>
</div>
);
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
• Use a "fragment" to wrap multiple lines.
• This will prevent unnecessarily adding extra nodes to the DOM.
• A fragment looks like an empty HTML tag: <></>.

import React from 'react';


import ReactDOM from 'react-dom/client';
const myElement = (
<>
<p>I am a paragraph.</p>
<p>I am a paragraph too.</p>
</>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Elements Must be Closed

JSX follows XML rules, and therefore HTML elements must be properly closed.

import React from 'react';


import ReactDOM from 'react-dom/client';
const myElement = <input type="text" />;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Conditions - if statements <body>
❑React Directly in HTML <div id="root"></div>
<script type="text/babel">
<!DOCTYPE html> const x = 11;
<html> let text = "Goodbye";
<head> if (x < 10) {
<script text = "Hello";
src="https://unpkg.com/react@18/umd/react.deve }
lopment.js" crossorigin></script> const myElement = <h1>{text}</h1>;
<script src="https://unpkg.com/react- const root =
dom@18/umd/react-dom.development.js" ReactDOM.createRoot(document.getElementById('root'));
crossorigin></script> root.render(myElement);
<script
src="https://unpkg.com/@babel/standalone/babel. </script>
min.js"></script>
</head> </body>
</html>
Conditions - if statements
❑With Setting up a React Environment

import React from 'react';


import ReactDOM from 'react-dom/client';

const x = 5;
let text = "Goodbye";
if (x < 10) {
text = "Hello";
}
const myElement = <h1>{text}</h1>;
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
Conditions - if statements (Use ternary expressions)
❑With Setting up a React Environment

import React from 'react';


import ReactDOM from 'react-dom/client';

const x = 5;

const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);
React Components
• Components are like functions that return HTML
elements.
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.
❑Create a Class component called Car

class Car extends React.Component {


render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Function Component
❑Create a Function component called Car

function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Rendering a Component
• React application has a component called Car, which returns an <h2> element.

• To use this component in your application, use similar syntax as normal HTML: <Car />
import React from 'react';
import ReactDOM from 'react-dom/client';

function Car() {
return <h2>Hi, I am a Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Props
• Components can be passed as props, which stands for properties.

import React from 'react';


import ReactDOM from 'react-dom/client';

function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car color="red"/>);
Components in Components
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
React Events
• React events are written in camelCase syntax:

• onClick instead of onclick.

• React event handlers are written inside curly braces.

• onClick={shoot} instead of onclick="shoot()".


• React: <button onClick={shoot}>Take the Shot!</button>
• HTML: <button onclick="shoot()">Take the Shot!</button>
• Example: Arrow Function: Sending the event object
manually
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
• To pass an argument to an event handler, use an arrow function.
• Send "Goal!" as a parameter to the shoot function, using arrow function:

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>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
React Conditional Rendering
• if Statement
import React from 'react';
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;
if (isGoal) {
return <MadeGoal/>;
}
return <MissedGoal/>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);
React Lists
• The JavaScript map() array method is generally the preferred method.
import React from 'react';
import ReactDOM from 'react-dom/client';
function Car(props) {
return <li>I am a { props.brand }</li>;
}
function Garage() {
const car = ['Ford', 'BMW', 'Audi'];
return (
<>
<h1>Who lives in my garage?</h1>
<ul>
{cars.map((car) => <Car brand={car} />)}
</ul>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);
Styling React Using CSS
• Inline Styling
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
camelCased Property Names
• Use backgroundColor instead of background-color:
import React from 'react';
import ReactDOM from 'react-dom/client';

const Header = () => {


return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
JavaScript Object
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
const myStyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Sans-Serif"
};
return (
<>
<h1 style={myStyle}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
CSS Stylesheet
• save the file with the .css file extension, and import it in your
application.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

const Header = () => {


return (
<>
<h1>Hello Style!</h1>
<p>Add a little style!.</p>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

You might also like