Experiment No-1

Welcome to Starting with React

import logo from './logo.svg';

import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}

export default App;

O/P:-
 Experiment No-2

React Components

Components are independent and reusable bits of code. They serve the same
purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this
tutorial we will concentrate on Function components.

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

Here is the same example as above, but created using a Function

component instead.

A Function component also returns HTML, and behaves much the same
way as a Class component, but Function components can be written
using much less code, are easier to understand
Example

Create a Function component called Car

function Car() {

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

}
 Experiment No-3

React State and Props

React components has a built-in state object.

The state object is where you store property values that belong to the component.

When the state object changes, the component re-renders.

Creating the state Object

The state object is initialized in the constructor:

Example:

Specify the state object in the constructor method:

class Car extends React.Component {

constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Using the state Object

Refer to the state object anywhere in the component by using

the this.state.propertyname syntax:

Example:

Refer to the state object in the render() method:

class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}

React Props:- Props are arguments passed into React components.

Props are passed to components via HTML attributes.

React Props
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:

Example:

Add a "brand" attribute to the Car element:

const myElement = <Car brand="Ford" />

The component receives the argument as a props object:

Example:

Use the brand attribute in the component:

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.

Example:

Send the "brand" property from the Garage component to the Car component:

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 />);
 Experiment No-4

React Event Handling

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
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()".

Example:

Put the shoot function inside the Football component:

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.

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

Event handlers have access to the React event that triggered the function.

In our example the event is the "click" event.

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 />);
 Experiment No-5

Routing - React
Create React App doesn't include page routing.

React Router is the most popular solution.

Add React Router

To add React Router in your application, run this in the terminal from the root
directory of the application:

npm i -D react-router-dom@latest

Folder Structure

To create an application with multiple page routes, let's first start with the file
structure.

Within the src folder, we'll create a folder named pages with several files:

src\pages\:

 Layout.js
 Home.js
 Blogs.js
 Contact.js
 NoPage.js

Each file will contain a very basic React component.

Basic Usage

Now we will use our Router in our index.js file.

Example:-
Use React Router to route to pages based on URL:

index.js:

import ReactDOM from "react-dom/client";

import { BrowserRouter, Routes, Route } from "react-
router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {

return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}

const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />)

Pages / Components

The Layout component has <Outlet> and <Link> elements.

The <Outlet> renders the current route selected.

<Link> is used to set the URL and keep track of browsing history.
Anytime we link to an internal path, we will use <Link> instead of <a href="">.

The "layout route" is a shared component that inserts common content on all pages,
such as a navigation menu.

Layout.js:

import { Outlet, Link } from "react-router-dom";

const Layout = () => {

return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>

<Outlet />
</>
)
};

export default Layout;

Home.js:

const Home = () => {

return <h1>Home</h1>;
};

export default Home;

Blogs.js:
const Blogs = () => {
return <h1>Blog Articles</h1>;
};

export default Blogs;

Contact.js:

const Contact = () => {

return <h1>Contact Me</h1>;
};

export default Contact;

NoPage.js:

const NoPage = () => {

return <h1>404</h1>;
};

export default NoPage;

 Experiment No-6
Styling React
There are many ways to style React with CSS, this tutorial will take a
closer look at three common ways:

 Inline styling
 CSS stylesheets
 CSS Modules

Inline Styling
To style an element with the inline style attribute, the value must be a
JavaScript object:

#Example:

#Insert an object with the styling information:

const Header = () => {

return (
<>
<h1 style={{color: "red"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}

camelCased Property Names

Since the inline CSS is written in a JavaScript object, properties with hyphen
separators, like background-color, must be written with camel case syntax:

Example:

Use backgroundColor instead of background-color:

const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
<p>Add a little style!</p>
</>
);
}

JavaScript Object
You can also create an object with styling information, and refer to it in the
style attribute:

Example:

Create a style object named myStyle:

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>
</>
);
}

CSS Stylesheet
You can write your CSS styling in a separate file, just save the file with
the .css file extension, and import it in your application.

App.css:

Create a new file called "App.css" and insert some CSS code in it:

body {
 background-color: #282c34;
color: white;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}

Import the stylesheet in your application:

index.js:
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 />);

CSS Modules
Another way of adding styles to your application is to use CSS Modules.

CSS Modules are convenient for components that are placed in separate files.

"""Create the CSS module with the .module.css extension, example: my-
style.module.css.

Create a new file called "my-style.module.css" and insert some CSS code in it:

my-style.module.css:"""

.bigblue {
color: DodgerBlue;
padding: 40px;
font-family: Sans-Serif;
text-align: center;
}

# Import the stylesheet in your component:

# Car.js:
import styles from './my-style.module.css';

const Car = () => {

return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

Import the component in your application:

index.js:
import ReactDOM from 'react-dom/client';
import Car from './Car.js';

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

root.render(<Car />);