20TS2101S - MSWDSKILL WORKBOOK

Team EP
K

L UNIVERSITY | ENTERPRISE PROGRAMMING – 19CS210

SKILL WORKBOOK
20TS2101S –MEA(R)N STACK WEB DEVELOPMENT (MSWD)

TEAM MSWD
K L UNIVERSITY | MEA(R)N STACK WEB DEVELOPMENT –20TS2101S
 20TS2101S - MSWDSKILL WORKBOOK

SKILLING WORKBOOK \

STUDENT NAME
REG NO
YEAR
SEMESTER
SECTION
FACULTY NAME
 20TS2101S - MSWDSKILL WORKBOOK

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Date of the Session: __/__/____ Time of The Session: _____to_____

#SKILL–1 REACT

Prerequisites:
 Installation of Node JS & Visual Studio Code

Rahul is a boy from CSE Department, he is 19 years old, and he comes from Hyderabad and is
interested in Front End Development. To show off his front-end design skills he created a simple
yet elegant Card design containing all the above details.

Here is an example which Rahul created. And your task is to mimic what he did or try to make
your own design which is better than what Rahul did.

Example: Card

To display the profile image, keep an image of yourself in the assets folder which will be auto
generated when you initialize the project using the command:-

Y20-MSWD Page |1
 20TS2101S - MSWDSKILL WORKBOOK

$ npx create-react-app appName

Here appName could be any name which you want to keep.

Quick Fix:
index.js

App.js

Y20-MSWD Page |2
 20TS2101S - MSWDSKILL WORKBOOK

Y20-MSWD Page |3
 20TS2101S - MSWDSKILL WORKBOOK

Exercises:
Q1. Describe JSX and where it is used?

Q2. What is the purpose of render() in react?

Q3. What do you understand by Virtual Dom in react?

Q4. Why can’t browsers read JSX?

Q5. Why is React App called a Single Page Application (SPA)?

Y20-MSWD Page |4
 20TS2101S - MSWDSKILL WORKBOOK

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Date of the Session: __/__/____ Time of The Session: _____to_____

#SKILL–2 REACT ROUTER

Prerequisites:
 Installation of React Router

Routing is a major part of any front-end app which helps you to switch between different pages of
your app since react is a single page application this makes learning this topic more important. So,
your task is to create two routes: one for your profile page (which you made in the previous lab)
and second one is for a simple counter. Include these route links in two buttons in a NavBar
Component. Separate the components in different files.

Example: Counter (You can make your own designs)

The working procedure of Counter:-

You should keep two buttons: one for increasing the count and one for decreasing the count. Create
a state in which you can store the count value, initialize the count with 0. And display the count.

For implementing Routing in your React app you need to install a package called ‘react-router-
dom’.

To install this, type this simple command in your command line:

Y20-MSWD Page |5
 20TS2101S - MSWDSKILL WORKBOOK

$ npm install react-router-dom

Quick Fix:
index.js

App.js

Y20-MSWD Page |6
 20TS2101S - MSWDSKILL WORKBOOK

Y20-MSWD Page |7
 20TS2101S - MSWDSKILL WORKBOOK

Exercises:
Q1. What hooks are in react?

Q2. Will react hooks work in a React class-based component?

Q3. What are the rules you must follow while using Hooks?

Q4. What are the different components needed to make the react router work in your project?

Q5. What is the importance of ‘exact’ argument in a react router?

Y20-MSWD Page |8
 20TS2101S - MSWDSKILL WORKBOOK

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Date of the Session: __/__/____ Time of The Session: _____to_____

#SKILL–3 MATERIAL UI

Prerequisites:
 Installation of Material UI

Our university needs a new design for its webpage, and we are asked to create a simple React app
which will display the details and image of different departments present in our University. Install
the material-ui package and use the material-ui components for giving the page a modern look. A
link is provided for the data required in the making of the project.
Use the useEffect hook from react to change the data when you click on a tab to switch to a
different department page.

$npm install @material-ui/core

Example: University Webpage

Y20-MSWD Page |9
 20TS2101S - MSWDSKILL WORKBOOK

Link for that data needed for the project -

1. Extract the images in the assets folder dir - project/public/assets - Be cautious while you
do this the path must be the same as mentioned above
2. And you can keep the data.js file wherever you want in the project as long as you are able
to access the file inside your app.

Quick Fix:
index.js

App.js

Y20-MSWD P a g e | 10
 20TS2101S - MSWDSKILL WORKBOOK

Y20-MSWD P a g e | 11
 20TS2101S - MSWDSKILL WORKBOOK

Exercises:
Q1. How does the useState hook work? What is/are the arguments accepted by this hook and what
is returned by the hook?

Q2. What are the differences in using hooks and class components with respect to state
management?

Q3. What’s the difference between state and props?

Q4. What are the advantages of React hooks?

Q5. Describe how the useEffect hook works and when is it called?

Y20-MSWD P a g e | 12
 20TS2101S - MSWDSKILL WORKBOOK

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Date of the Session: __/__/____ Time of The Session: _____to_____

#SKILL–4 AXIOS

Prerequisites:
 Installation of Axios

Piyush is very fond of the game Valorant. He wants to see all the characters/agents and weapons
available in the game and also details about them. Luckily he found an API (https://valorant-
api.com/v1/agents, https://valorant-api.com/v1/weapons) which provided him the necessary data
so with the help of axios library or fetch method access the data from the above api using an
asynchronous call to the API.

Also make a search page where the users can search for any agents or weapons and then display
the results in a card. Leverage the life cycle hooks provided by React.js to display the data
according to the page and use material-ui for giving the page a modern look. Display the
information in different pages using the react router.

A simple example is given below to show you the data and how you may use it but we want you
to use your own imagination and create the app.

Y20-MSWD P a g e | 13
 20TS2101S - MSWDSKILL WORKBOOK

Important packages needed

Quick Fix:
index.js

App.js

Y20-MSWD P a g e | 14
 20TS2101S - MSWDSKILL WORKBOOK

Y20-MSWD P a g e | 15
 20TS2101S - MSWDSKILL WORKBOOK

Exercises:
Q1.Why you are using axios in react?

Q2. What higher order components are in react?

Q3. Why does the callback function in the useEffect hook cannot be asynchronous?

Q4. How to pass data in react from one Component to another in react?

Q5. Why are API calls made from useEffect hooks or ComponentDidMount?

Y20-MSWD P a g e | 16