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
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
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