Lab27 : Example using Routers
Lab27: Files Required:
1. [Link] 2. [Link]
3. [Link] 4. [Link]
5. [Link] 6. [Link]
7. [Link]
1. [Link]
2. [Link]
3. [Link]
4. [Link]
import React, { Component } from 'react';
import 'bootstrap/dist/css/[Link]';
import { BrowserRouter } from 'react-router-dom';
import JLCHeader from './JLCHeader';
import JLCFooter from './JLCFooter';
import JLCBody from './JLCBody';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<br/>
<JLCBody/>
<br/><br/><br/>
<JLCFooter/>
</div>
</BrowserRouter>
);
}
}
export default App;
Java Learning Center 143 React JS
5. [Link]
import React from 'react';
const JLCHeader = (props) => {
return (
<div>
<h3> Welcome to CourseCube!!! </h3>
<ul className="nav justify-content-end">
<li className="nav-item">
<h4> <a className="nav-link" href="/">Home</a> </h4>
</li>
<li className="nav-item">
<h4> <a className="nav-link" href="/courses">Courses</a></h4>
</li>
<li className="nav-item">
<h4> <a className="nav-link" href="/about">About US</a></h4>
</li>
<li className="nav-item">
<h4> <a className="nav-link" href="/contact">Contact US</a></h4>
</li>
</ul>
</div>
);
}
export default JLCHeader;
6. [Link]
import React from 'react';
const JLCFooter = (props) => {
return (
<div>
<h3> CourseCube-All Rights Reserved-2021 </h3>
</div>
);
}
export default JLCFooter;
Java Learning Center 144 React JS
7. [Link]
import React,{ Component}from 'react';
import { Route } from "react-router-dom";
class JLCBody extends Component {
render(){
return (
<div className="conatiner">
<Route path="/" render={() => <h1> Home page displays -1</h1>} exact />
<Route path="/" render={() => <h1> Home page displays -2</h1>} exact />
<Route path="/courses" render={() => <h1> Courses page Here</h1>} />
<Route path="/courses" render={() => <h1> Courses page Here</h1>} />
<Route path="/about" render={() => <h1> About page Here</h1>} />
<Route path="/about" render={() => <h1> About page Here</h1>} />
<Route path="/contact" render={() => <h1> Contact page Here</h1>} />
<Route path="/contact" render={() => <h1> Contact page Here</h1>} />
</div>
);
}
}
export default JLCBody;
Java Learning Center 145 React JS
Lab28 : Example using Routers
Lab28: Files Required:
1. [Link] 2. [Link]
3. [Link] 4. [Link]
5. [Link] 6. [Link]
7. [Link] 8. [Link]
9. [Link] 10. [Link]
11. [Link]
1. [Link]
2. [Link]
3. [Link]
4. [Link]
import React,{ Component}from 'react';
import 'bootstrap/dist/css/[Link]';
import JLCHeader from './JLCHeader';
import JLCBody from './JLCBody';
import { BrowserRouter } from "react-router-dom";
class App extends Component {
render(){
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}
export default App;
5. [Link]
import React,{ Component}from 'react';
import {Link} from 'react-router-dom';
class JLCHeader1 extends Component {
render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">
<Link to="/" className="nav-link"> Home </Link>
</li>
Java Learning Center 146 React JS
<li className="nav-item">
<Link to="/courses" className="nav-link"> Courses </Link>
</li>
<li className="nav-item">
<Link to="/about" className="nav-link"> About US </Link>
</li>
<li className="nav-item">
<Link to="/contact" className="nav-link"> Contact Us </Link>
</li>
</ul>
</div>
);
}
}
export default JLCHeader1;
6. [Link]
import React,{ Component}from 'react';
import {NavLink} from 'react-router-dom';
class JLCHeader extends Component {
render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">
<NavLink to="/" className="nav-link" exact
activeClassName="myactive"
activeStyle={{
textDecoration: "underline",
fontSize:"1.2em"
}} > Home </NavLink>
</li>
<li className="nav-item">
<NavLink to="/courses" className="nav-link"
activeClassName="myactive"
Java Learning Center 147 React JS
activeStyle={{ textDecoration: "underline", fontSize:"1.2em" }}> Courses </NavLink>
</li>
<li className="nav-item">
<NavLink to="/about" className="nav-link"
activeClassName="myactive"> About US </NavLink>
</li>
<li className="nav-item">
<NavLink to="/contact" className="nav-link"
activeClassName="myactive"> Contact Us </NavLink>
</li>
</ul>
</div>
);
} }
export default JLCHeader;
7. [Link]
import React,{ Component}from 'react';
import { Route } from "react-router-dom";
import Home from "./Home";
import Courses from "./Courses";
import About from "./About";
import Contact from "./Contact";
class JLCBody extends Component {
render(){
return (
<div className="card">
<Route path="/" component={Home} exact />
<Route path="/courses" component={Courses} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
} }
export default JLCBody;
Java Learning Center 148 React JS
8. [Link]
import React,{ Component}from 'react';
class Home extends Component {
componentDidMount(){
[Link]("Home - ",[Link]);
}
render(){
return (
<div>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
</div>
);
}
}
export default Home;
9. [Link]
import React,{ Component}from 'react';
class Courses extends Component {
componentDidMount(){
[Link]("Courses - ",[Link]);
}
render(){
return (
<div>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
<h2> This is Courses page </h2>
</div>
);
}
}
export default Courses;
Java Learning Center 149 React JS
10. [Link]
import React,{ Component}from 'react';
class About extends Component {
render(){
return (
<div>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
</div>
);
}
}
export default About;
11. [Link]
import React,{ Component}from 'react';
class Contact extends Component {
render(){
return (
<div>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
</div>
);
}
}
export default Contact;
Java Learning Center 150 React JS
Lab29 : Example using Routers
Lab29: Files Required:
1. [Link] 2. [Link]
3. [Link] 4. [Link]
5. [Link] 6. [Link]
7. [Link] 8. [Link]
9. [Link] 10. [Link]
11. [Link] 12. [Link]
1. [Link]
2. [Link]
3. [Link]
4. [Link]
import React,{ Component}from 'react';
import 'bootstrap/dist/css/[Link]';
import JLCHeader from './JLCHader';
import JLCBody from './JLCBody';
import { BrowserRouter } from "react-router-dom";
class App extends Component {
componentDidMount(){
[Link]("App - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("App - WillUnmount- ",[Link]);
}
render(){
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}
export default App;
Java Learning Center 151 React JS
5. [Link]
import React,{ Component}from 'react';
import {NavLink} from 'react-router-dom';
class JLCHeader extends Component {
componentDidMount(){
[Link]("JLCHeader - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("JLCHeader - WillUnmount- ",[Link]);
}
render(){
return (
<div>
<h1> Welcome to CourseCube!!!</h1>
<ul className="nav justify-content-end">
<li className="nav-item">
<NavLink to="/" className="nav-link" exact
activeClassName="myactive"
activeStyle={ { textDecoration: "underline", fontSize:"1.2em" }} > Home </NavLink>
</li>
<li className="nav-item">
<NavLink to={{pathname: "/courses",hash: "#Hello",search: "?name=JLC",}}
className="nav-link" activeClassName="myactive"
activeStyle={{textDecoration: "underline",fontSize:"1.2em"}}> Courses </NavLink>
</li>
<li className="nav-item">
<NavLink to="/about" className="nav-link"
activeClassName="myactive"> About US </NavLink>
</li>
<li className="nav-item">
<NavLink to="/contact " className="nav-link"
activeClassName="myactive"> Contact Us </NavLink>
</li>
</ul>
</div>
);
} }
export default JLCHeader;
Java Learning Center 152 React JS
6. [Link]
import React,{ Component}from 'react';
import { Route } from "react-router-dom";
import Home from "./Home";
import Courses from "./Courses";
import About from "./About";
import Contact from "./Contact";
import MyCourseInfo from './MyCourseInfo';
class JLCBody extends Component {
componentDidMount(){
[Link]("JLCBody - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("JLCBody - WillUnmount- ",[Link]);
}
render(){
return (
<div className="card">
<Route path="/" component={Home} exact />
<Route path="/courses" exact component={Courses} />
<Route path="/mycourses/:couId/:couName" exact component={MyCourseInfo} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
);
} }
export default JLCBody;
7. [Link]
import React,{ Component}from 'react';
import CourseList from './CourseList';
class Courses extends Component {
componentDidMount(){
[Link]("Courses - DidMount- ",[Link]);
[Link]("1. ",[Link]);
[Link]("2. ",[Link]);
[Link]("3. ",[Link]);
[Link]("4. ",[Link]);
[Link]("5. ",[Link]);
Java Learning Center 153 React JS
}
componentWillUnmount(){
[Link]("Courses - WillUnmount- ",[Link]);
}
render() {
return <CourseList />;
} }
export default Courses;
8. [Link]
import React, { Component } from "react";
import { withRouter, Link } from "react-router-dom";
class CourseList extends Component {
state = {
courseInfo: [
{ courseId: 101, courseName: "React Course" },
{ courseId: 102, courseName: "Angular Course" },
{ courseId: 103, courseName: "Spring Boot Course" },
{ courseId: 104, courseName: "MicroServices Course" },
{ courseId: 105, courseName: "Java Full Stack Course" },
],
};
componentDidMount() {
[Link]("CourseList - DidMount- Props", [Link]);
}
componentWillUnmount() {
[Link]("CourseList - WillUnmount- Props", [Link]);
}
render() {
const mycourses = [Link](
(mycourse) => {
return (
<Link
to={"/mycourses/" + [Link] + "/" + [Link]}
key={[Link]} >
{[Link]} <br />
</Link>
);
});
Java Learning Center 154 React JS
return (
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">Courses List</h1>
<p className="lead">{mycourses}</p>
</div>
</div>
);
}
}
export default withRouter(CourseList);
9. [Link]
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
class MyCourseInfo extends Component {
componentDidMount() {
[Link]("MyCourseInfo -DidMount- Props", [Link]);
}
componentWillUnmount() {
[Link]("MyCourseInfo - WillUnmount- Props", [Link]);
}
render() {
return (
<div className="jumbotron jumbotron-fluid">
<div className="container">
<h1 className="display-4">
Info about {[Link]}
</h1>
<p className="lead">
Course Id : {[Link]} <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
MyCourse Info Here MyCourse Info Here <br />
</p>
<br />
<NavLink className="nav-link" to="/courses">
Courses
</NavLink>
Java Learning Center 155 React JS
</div>
</div>
);
}
}
export default MyCourseInfo;
10. [Link]
import React,{ Component}from 'react';
class Home extends Component {
componentDidMount(){
[Link]("Home - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("Home - WillUnmount- ",[Link]);
}
render(){
return (
<div>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
<h2> This is Home page </h2>
</div>
);
}
}
export default Home;
11. [Link]
import React,{ Component}from 'react';
class About extends Component {
componentDidMount(){
[Link]("About - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("About - WillUnmount- ",[Link]);
}
Java Learning Center 156 React JS
render(){
return (
<div>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
<h2> This is About page </h2>
</div>
);
}
}
export default About;
12. [Link]
import React,{ Component}from 'react';
class Contact extends Component {
componentDidMount(){
[Link]("Contact - DidMount- ",[Link]);
}
componentWillUnmount(){
[Link]("Contact - WillUnmount- ",[Link]);
}
render(){
return (
<div>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
<h2> This is Contact page </h2>
</div>
);
}
}
export default Contact;
Java Learning Center 157 React JS
Lab30 : Example using Routers
Lab30: Files Required:
1. [Link] 2. [Link]
3. [Link] 4. [Link]
5. [Link] 6. [Link]
7. [Link] 8. [Link]
9. [Link]
1. [Link]
2. [Link]
3. [Link]
4. [Link]
import React, { Component } from "react";
import "bootstrap/dist/css/[Link]";
import JLCHeader from "./JLCHeader";
import JLCBody from "./JLCBody";
import { BrowserRouter } from "react-router-dom";
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="card">
<JLCHeader />
<JLCBody />
</div>
</BrowserRouter>
);
}
}
export default App;
5. [Link]
import React from "react";
const JLCHeader = () => {
return (
<div className="card-header">
<h1 className="text-center"> Welcome to CourseCube!!!</h1>
</div>
);
};
export default JLCHeader;
Java Learning Center 158 React JS
6. [Link]
import React, { Component, Suspense } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Login from "./Login";
const Courses = [Link](() => import("./Courses"));
//import Courses from "./Courses";
class JLCBody extends Component {
render() {
return (
<div>
<Switch>
<Route path="/courses"
render={() => (
<Suspense fallback={<div> Loading....</div>}>
<Courses />
</Suspense>
)}
/>
<Route path="/" exact component={Login} />
<Redirect from="/login" to="/"/>
</Switch>
<Redirect to="/" />
</div>
);
}
}
export default JLCBody;
7. [Link]
import React, { Component } from "react";
class Courses extends Component {
render() {
return (
<div className="container">
<br /> <br /> <br />
<h3> React Course </h3>
<h3> Angular Course </h3>
Java Learning Center 159 React JS
<h3> Spring Boot Course </h3>
<h3> Spring MicroServices Course </h3>
<h3> Java Full Stack Course </h3>
</div>
);
}
}
export default Courses;
8. [Link]
import React, { Component } from "react";
import "bootstrap/dist/css/[Link]";
import MyInputText from "./MyInputText";
class Login extends Component {
state = {
username: "",
password: "",
};
onChangeHandler = (event) => {
[Link]("onChangeHandler");
[Link]({
[[Link]]: [Link],
});
};
onSubmitHandler = (event) => {
[Link]();
const { username, password } = [Link];
[Link]("onSubmitHandler");
[Link](username);
[Link](password);
//Do the Validations
//Make Call to Server
Java Learning Center 160 React JS
if (username === password) {
//[Link]("/courses");
[Link]("/courses");
} else {
[Link]("/login");
}
};
render() {
const { username, password } = [Link];
return (
<div className="card-body container col-md-6">
<h3 className="text-center"> Login Form </h3>
<form onSubmit={[Link]}>
<MyInputText
myname="username"
mylabel="Username"
myvalue={username}
myOnChange={[Link]} />
<MyInputText
mytype="password"
myname="password"
mylabel="Password"
myvalue={password}
myOnChange={[Link]} />
<input type="submit" value="Login Now"
className="btn btn-primary btn-lg" />
</form>
</div>
);
}
}
export default Login;
Java Learning Center 161 React JS
9. [Link]
import React from "react";
import propTypes from "prop-types";
const MyInputText = ({
mylabel,
mytype,
myname,
myvalue,
myplaceholder,
myOnChange,
}) => {
return (
<div className="form-group">
<h3>
<label> {mylabel} </label>
</h3>
<input
type={mytype}
name={myname}
className="form-control form-control-lg"
placeholder={myplaceholder}
value={myvalue}
onChange={myOnChange}
/>
</div>
);
};
[Link] = {
mylabel: [Link],
myname: [Link],
myvalue: [Link],
myOnChange: [Link],
};
[Link] = {
mytype: "text",
myplaceholder: "",
};
export default MyInputText;
Java Learning Center 162 React JS