Scribd
Upload
2 views5 pages

React Introduction Assignment

The assignment involves creating a React application based on a provided Figma design, focusing on implementing various React concepts discussed in a workshop. Key tasks include setting up the app structure, developing components (both class and functional), styling, integrating API calls, managing state and props, and handling events. Additionally, there are guidelines for maintaining clean code and a specific submission format.

Uploaded by

my time to shine
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views5 pages

React Introduction Assignment

The assignment involves creating a React application based on a provided Figma design, focusing on implementing various React concepts discussed in a workshop. Key tasks include setting up the app structure, developing components (both class and functional), styling, integrating API calls, managing state and props, and handling events. Additionally, there are guidelines for maintaining clean code and a specific submission format.

Uploaded by

my time to shine
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Extended Bootcamp Training Assignment

Introduction to React
Assignment for the day:
Link to figma: [Link]

The UI and functionalities all remain same.


The intend here is to put all the react concepts discussed in today’s workshop into
implementation.

Topics to be implemented:

1. Create new react app


2. Folder structure
3. Components breakdown
4. Develop components – class and functional
5. Common componentsa
6. Styling
7. Integrating API calls
8. Props
9. State variables
10. Events

Create new react app:


1. Create a react app as demoed in workshop.
2. Start by displaying a simple Hello World message on the web page.
Folder structure: Make sure to maintain folder structure in below way

Components breakdown:

1. Develop components as per the component breakage mentioned below.

Entire page:
Component name – HomePage

Create a component called HomePage and call it from [Link].

This component further contains below sections:

Section Component Name


Header section HeaderContainer
Discover Available Services section DiscoverAvailableServicesContainer
Recommended Services section RecommendedServicesContainer
Footer Section FooterContainer
Header section – Breakdown as mentioned in below image

Discover Available Services section – Breakdown as mentioned in below image


Recommended Services section – Breakdown mentioned as below

Footer section – Breakdown mentioned as below

Comon components:
Create common components for button, card and link. Use them throughout the
application.

Styling:

Make sure to use any of the below ways to style the site.

1. Inline styling
2. CSS modules
3. CSS stylesheets

API calls:

Text shown in discover available section cards should be dynamic. Under the services folder,
create a file called ‘NumberService’ and add a function which calls the below API.

Open API – [Link]


Call the API in DiscoverAvailableServicesContainer component.

State variables:
When the above API call is initiated, show the spinner and once data loads show content.
The above can be achieved using state variables .

Props:
Pass the above API data from DiscoverAvailableServicesContainer to child components.

Events:

In the search component, add an event that responds to button click and navigates to
web search results for the entered keywords.

Good to have:
1. Develop all container components as class components and the rest as functional
components.
2. Clean code with standards – naming conventions, usage of common components. Please go
through the below link.
React JS (Web view)

Note: Delete node_modules folder before submitting. Save the file name as EMPID_Name and zip it.

You might also like