Lab 4 – ReactJS Basics
MUHAMMAD ABUBAKAR
FA18-BCS-039
It is better to set up your ReactJS Environment locally. To set up local environment, follow the
instructions:
https://create-react-app.dev/docs/getting-started/
In case you are having issues in setting up local development environment, you can write ReactJS
code online at
https://glitch.com/edit/#!/remix/starter-react-template
https://codesandbox.io/
Task #1
Modify App.js file and write your Biography (personal information, education, skills) in tabular form.
import "./styles.css";
export default function App() {
return (
<div className="App">
<table border="1px">
<tr>
<td>name:</td>
<td>Reg#:</td>
<td>Semester:</td>
<td>Section:</td>
</tr>
<tr>
<td>abubakar</td>
<td>039</td>
<td>6</td>
<td>A</td>
</tr>
</table>
</div>
);
}
Task #2
Reading: If you are not familiar with components and props, visit this link:
https://reactjs.org/docs/components-and-props.html
Create a React App which Displays your CV.
Now, CV App contains several components to represent different type of information. Each
Component should receive React Props to Display Information. Which means, Component displays
information based on the props sent by the component (just like demonstrated in class).
CV should contain following Sections. Each Section would be a React Component:
Header: Picture, Name
Information: Address, Contact Details (phone, email etc)
Education: FSc, BSCS (Institute, Degree Name, Start Date, End Date, Description etc)
Experience: Company Name, Start and End Date, Responsibilities
Skills: Display a List of Skills
Hobbies: Display a List of Hobbies
Hint:
To Display Local image in React JS
<img src={ require('./images/image1.jpg') } />
Otherwise, it’s same as html:
<img src="https://bmc.edu.pk/wp-content/uploads/2019/03/doctor-red-1.png" />
import "./styles.css";
import Header from "../header";
import Info from "../info";
import Skills from "../skilss";
import Exp from "../exp";
import Edu from "../edu";
export default function App() {
return (
<div className="App">
<Header
name="Lab Assignment 2"
image="https://images.unsplash.com/photo-1541701494587-
cb58502866ab?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw
%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"
/>
<Info address="abubakar" email="[email protected]"
phone="02397812763" />
<Skills skill1="demo1" skill2="demo2" skill3="demo3" />
<Exp exp1="experience1" exp2="experience2"
exp3="experience3" />
<Edu edu1="education1" edu2="education2"
edu3="education3" />
</div>
);
}
import react from "react";
function Info(props) {
return (
<div>
<p>{props.address}</p>
<p>{props.email}</p>
<p>{props.phone}</p>
</div>
);
}
export default Info;
import react from "react";
function Exp(props) {
return (
<div>
<p>{props.exp1}</p>
<p>{props.exp2}</p>
<p>{props.exp3}</p>
</div>
);
}
export default Exp;
import react from "react";
function Edu(props) {
return (
<div>
<p>{props.edu1}</p>
<p>{props.edu2}</p>
<p>{props.edu3}</p>
</div>
);
}
export default Edu;
import react from "react";
function Skills(props) {
return (
<div>
<p>{props.skill1}</p>
<p>{props.skill2}</p>
<p>{props.skill3}</p>
</div>
);
}
export default Skills;
import react from "react";
function Header(props) {
return (
<div>
<h1>{props.name}</h1>
<img src={props.image}></img>
</div>
);
}
export default Header;
TASK # 3
import "./styles.css";
import Counter from "../counter";
export default function App() {
return (
<div className="App">
<Counter/>
</div>
);
}
import React from "react";
class Counter extends React.Component {
constructor() {
super();
this.state = { counter: 10 };
}
incrementcounter = () => {
this.setState({ counter: this.state.counter + 1 });
};
decrementcounter = () => {
this.setState({ counter: this.state.counter - 1 });
};
render() {
return (
<div>
<button onClick={this.incrementcounter}>+ </button>
<h1> {this.state.counter} </h1>
<button onClick={this.decrementcounter}>- </button>
</div>
);
}
}
export default Counter;
