Task 8 : Folder Structure and JS Concepts

[yogeshtakeo]

Task 8: Folder Structure in Vite Environment and JavaScript Concepts

Objective:

Create a folder structure for a Vite environment and practice JavaScript concepts including the map() method, array destructuring, rest parameter, object destructuring, and spread operator.

Task Overview

1. Understand the folder structure in a Vite environment.
2. Apply the map() method to transform an array.
3. Practice array destructuring to extract values from arrays.
4. Utilize the rest parameter to handle variable-length arguments.
5. Apply object destructuring to extract values from objects.
6. Utilize the spread operator to combine and clone arrays or objects.

Task Details

Folder Structure in Vite Environment:

Open a terminal or command prompt. Create a new directory for your react project npx create-vite@latest vite-folder-structure and cd vite-folder-structure

Familiarize yourself with the default folder structure created by Vite, including the src directory for source files, public directory for static assets, and the main index.html file.

Transform Array using map():

1. Open your project in a code editor.
2. Identify a JavaScript file within the src directory (e.g., main.js or any other file you create).
3. Declare an array of numbers.
4. Use the map() method to transform the array by doubling each number.
5. Print the transformed array to the console.

Array Destructuring:

1. Declare an array of values (e.g.,[1, 2, 3, 4, 5]).
2. Use array destructuring to extract the first two values from the array into separate variables.
3. Print the extracted values to the console.

Rest Parameter

1. Declare a function that takes multiple arguments.
2. Use the rest parameter syntax to handle a variable number of arguments.
3. Calculate the sum of all the arguments passed to the function.
4. Print the sum to the console.

Object Destructuring:

1. Declare an object with properties like name, age, and location.
2. Use object destructuring to extract the values of name and location into separate variables.
3. Print the extracted values to the console.

Spread Operator:

Declare two arrays with values (e.g., [1, 2, 3] and [4, 5, 6]). Use the spread operator to combine the arrays into a single array. Print the combined array to the console. Use the spread operator to clone the original array into a new array. Print the cloned array to the console.

Task Submission

1. Take a screenshot of the web browser displaying the rendered React component .
2. Share the screenshot
3. Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repositary.

[ashmaupret100]

Name : Ashma Upreti Github Url: https://github.com/ashmaupret100/array_methods.git

[KabinaThapa]

Kabina Thapa https://github.com/yogeshtakeo/task_BFD30/tree/kabinathapa

[junuthapa011]

Name: Junu Thapa Git URL: https://github.com/junuthapa011/Bootcamp-task8

[sandessth]

Name: Sandesh Shrestha Git URL: https://github.com/yogeshtakeo/task_BFD30/tree/Sandesh/folder-structure-and-js-concepts

[Namsla]

Namkhang Tsamchoe git url: https://github.com/yogeshtakeo/task_BFD30/tree/namkhang/folder_structure_and_js_concepts

[Jharanatmg]

Jharana Github Url: https://github.com/yogeshtakeo/task_BFD30.git

[babisha]

Github URL: https://github.com/yogeshtakeo/task_BFD30.git

[dinakc]

Deena KC https://github.com/dinakc/Folder-Structure-And-JS-Concepts.git