Open yogeshtakeo opened 12 months ago
Name: Manoj Basnet Task 11: Object and Arrays git: https://github.com/mbasnet123456/Objects-and-Arrays-.git
Name :Shanti Basnet Task11: objects and Arrays URl: https://github.com/shantibasnet/Collab1/tree/shanti
Raj Kumar Maharjan
Task 11: object and array
Glink: https://github.com/samragi99/task11-object-array.git
Name: Narayan Adhikari
Task 11: Objects and Arrays
GitHub Url: https://github.com/Narayanadhikari9/ObjectsandArrays
Name: Bikalp Timalsina
Task 11 : Objects and Arrays
Git Url: https://github.com/Youngbikalp/Task-11-Objects-and-Arrays
Name: Santona Subedi
Task 11: Objects and arrays
github repo link: https://github.com/sansubed/ReactViteAppTask11.git
task 11
Raj kumar maharjan
Name: Prakash karki
Task 11: Objects and array
Name: Anil Timalsina Task 11 : Objects and Arrays Github Link: https://github.com/aniltimalsina/objects-arrays.git
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:
npm install -g create-vite
)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:
Navigate into your project directory:
Step 2: Data Preparation
data
.Inside the
data
folder, create two JSON files:students.json
andcourses.json
. Populate these JSON files with data. For example:students.json
courses.json
Step 3: Create React Components
StudentList.jsx
in a suitable directory (e.g.,src/components
).StudentList.jsx
component, import and use the data from thestudents.json
file to render a list of students. Display their names, ages, and the courses they are enrolled in.Step 4: Manipulate Data
CourseList.jsx
in thesrc/components
directory.courses.json
file to render a list of courses. Display their names and instructors.Step 5: Advanced Task (Optional)
StudentDetails.jsx
in thesrc/components
directory.StudentList
to view their details, including the courses they are enrolled in.Step 6: Style Your Components
Step 7: Test Your Webpage
Start the development server by running:
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.