School of Science and Engineering Computer Science Department

Lab 4
Introduction to React
Front End development
 School of Science and Engineering Computer Science Department

I. Introduction:
React, is an open-source JavaScript library used for building user interfaces (UIs) and front-
end web applications. React is known for its component-based architecture, which allows
developers to create reusable UI components. These components are like building blocks that
can be combined to build complex user interfaces. This modular approach makes it easier to
manage and scale large web applications.

II. Editing the App.js file:

On VScode, open the client folder which we created last time and open the App.js file.This is the
file that contains our main application:

Replace the current code with the following:

import logo from './logo.svg';

import './App.css';
import Student from "./components/Student.js";

function App(props) {
return (
<div className="container">
<h1>Students lists</h1>
<ul role="list">
<Student />
<Student/>
<Student/>
</ul>
</div>
);
}

export default App;

III. Creating the student Component:

Using the terminal, run the command cd src then the command mkdir components to
create a component folder. Inside the folder create a file named Student.js and paste
the following code:
export default function Student() {
return (
<li className="student">
<div className="info">
 School of Science and Engineering Computer Science Department

Full Name: <h1>Mohamed Taha</h1>

<li>Email: mohammed@aui.la</li>
<li>Id: Computer Science</li>
<li>Major: Computer Science</li>

</div>

</li>
);
}
Run the front end through the command npm start. You should have the following
screen:

IV. Changing attributes of a component:

Edit your App.js file so that you pass the name of the student as prop:
V. <ul role="list">
VI.
VII. <Student name="Mohammed" />
VIII. <Student name="Amina" />
IX. <Student name="Taha" />
X.
XI. </ul>

And edit the Student.js so that the default name is replaced by the content of
{props.name}:
export default function Student(props) {
School of Science and Engineering Computer Science Department

return (
<li className="student">
<div className="info">
Full Name: <h1> {props.name}</h1>
<li>Email: mohammed@aui.la</li>
<li>Id: Computer Science</li>
<li>Major: Computer Science</li>

</div>

</li>
);
}

Now the names should be updated accordingly:

ASSIGNMENT: Edit the remaining attributes of students so that they are passed as props. Submit the
code for the App.js and Student.js component