yogeshtakeo commented 12 months ago

Full Stack Development Bootcamp - Objects and Arrays in React Vite

Task Description

In this task, you will work with objects and arrays in a React project created using Vite. Understanding how to manipulate data structures like objects and arrays is essential for building dynamic and interactive web applications. You will perform tasks involving data manipulation, rendering data in components, and practicing common operations with objects and arrays in a React context.

Prerequisites

Before you begin, ensure you have the following installed on your system:

Node.js (at least version 14.0.0)
npm (Node Package Manager)
Vite (installed globally, you can do this with npm install -g create-vite)
A code editor

Task Steps

Step 1: Set Up a React Project with Vite

Open your terminal and navigate to the directory where you want to create your React project.
Run the following command to create a new Vite project with React:
```
create-vite my-react-objects-arrays --template react
```
Navigate into your project directory:
```
cd my-react-objects-arrays
```

Step 2: Data Preparation

In your project directory, create a folder named data.

Inside the data folder, create two JSON files: students.json and courses.json. Populate these JSON files with data. For example:

students.json

[
 {
   "id": 1,
   "name": "Alice",
   "age": 20,
   "courses": [1, 2]
 },
 {
   "id": 2,
   "name": "Bob",
   "age": 22,
   "courses": [2, 3]
 },
 // Add more student data...
]

courses.json

[
 {
   "id": 1,
   "name": "Mathematics",
   "instructor": "Dr. Smith"
 },
 {
   "id": 2,
   "name": "History",
   "instructor": "Prof. Johnson"
 },
 // Add more course data...
]

Step 3: Create React Components

Create a new React component named StudentList.jsx in a suitable directory (e.g., src/components).
Inside the StudentList.jsx component, import and use the data from the students.json file to render a list of students. Display their names, ages, and the courses they are enrolled in.

Step 4: Manipulate Data

Create a new React component named CourseList.jsx in the src/components directory.
Import and use the data from the courses.json file to render a list of courses. Display their names and instructors.
Implement a feature to filter the courses based on instructor names. Create a filter input field that allows users to search for courses taught by a specific instructor.

Step 5: Advanced Task (Optional)

Create a new React component named StudentDetails.jsx in the src/components directory.
Implement a feature that allows users to click on a student's name in the StudentList to view their details, including the courses they are enrolled in.
Use React Router to create routes for viewing student details.

Step 6: Style Your Components

Use CSS or a CSS-in-JS library like Styled Components to style your components.
Apply appropriate styles to make your student list, course list, and any other components visually appealing.

Step 7: Test Your Webpage

Start the development server by running:
```
npm run dev
```
Open your web browser and navigate to http://localhost:3000 to see your React webpage with the student and course lists in action.
Verify that data is correctly displayed and that any filtering or advanced features you implemented work as expected.

Task Completion

Congratulations! You've successfully completed the Objects and Arrays in React Vite task. You've practiced working with JSON data, rendering it in React components, and manipulating objects and arrays. These skills are essential for building dynamic web applications.