MERN STACK
TASK 1: Basic React Application Development
Description
This task focuses on building a foundational understanding of ReactJS by creating a basic
application. It covers project setup, file structure exploration, component creation, and
understanding the development workflow.
Responsibilities
1. Build the React Application
● Set Up React Project:
○ Use the npx create-react-app command or its equivalent to create a React
application.
○ Ensure all required dependencies and configurations are properly set up during
the initialization process.
2. Explore the File and Folder Structure
● Understand the purpose of key folders and files in a React project:
○ src Folder: Contains the main application code such as components, styles,
and utilities.
○ public Folder: Holds static files like [Link], which serves as the entry
point for the React application.
○ node_modules Folder: Contains all installed dependencies for the project.
○ Package Files:
■ [Link]: Manages project dependencies, scripts, and metadata.
■ [Link]: Maintains an exact record of dependency
versions.
○ Configuration Files:
■ .gitignore: Specifies files and folders to ignore in version control.
■ [Link]: Contains information about the project, including setup
instructions.
■ Other configuration files for linting or environment settings.
Main Flow Services and Technologies Pvt. Ltd.
Contact Us. +91 9389641586, +91 97736 99074
Email-Add. [Link]@[Link]
[Link]
3. Create a Basic React Component
● Develop a simple React component to display basic content on the browser:
○ Use JSX for the structure.
○ Demonstrate the usage of state and props for dynamic rendering.
● Integrate the created component into the main application, typically in [Link] or
another central file.
4. Understand Development Workflow
● Learn the development workflow:
○ Start the development server using the npm start command.
○ View the application in a browser.
○ Observe hot reloading, which updates the browser view as you make changes to
the code.
5. Document Observations and Learnings
● Record details about:
○ The structure and functionality of the files and folders.
○ Challenges faced during setup or development.
○ Insights gained about React's core concepts, such as component-based
architecture and real-time updates.
Expected Outcomes
By completing this task, you will:
1. Gain hands-on experience in setting up and configuring a ReactJS application.
2. Develop an understanding of the default project structure and the role of its components.
3. Create a functional React component that demonstrates the use of JSX, state, and
props.
4. Familiarize yourself with the development workflow, including starting the server and
leveraging hot reloading.
5. Document your observations and learnings, creating a reference for future projects.
Deadline Compliance
● Restriction: Submit the project within 7 days from the start date.
Main Flow Services and Technologies Pvt. Ltd.
Contact Us. +91 9389641586, +91 97736 99074
Email-Add. [Link]@[Link]
[Link]
● Reason: Meeting deadlines is crucial in the real-world software development
environment. This restriction helps students practice time management and task
prioritization. In professional settings, tight deadlines are often the norm, and learning
to meet them without compromising quality is an essential skill.
● Learning Outcome: Students will learn to manage their time effectively, complete
projects under pressure, and deliver results on time, which are all important skills in
the workplace.
Main Flow Services and Technologies Pvt. Ltd.
Contact Us. +91 9389641586, +91 97736 99074
Email-Add. [Link]@[Link]
[Link]