Task 3 : Vite React Project

[yogeshtakeo]

Task 3: Creating a React Project with Create Vite App and Publishing on GitHub

Objective:

Create a new React project using Create Vite App, make changes to the application, and publish it on GitHub.

Task Overview

• Set up a React project using Create Vite App.
• Make changes to the React application.
• Publish the project on GitHub.

Task Details

Install Node.js: Ensure that Node.js is installed on your computer by visiting https://nodejs.org/ and downloading the latest LTS version.

Set up the Project:

Open a terminal or command prompt. Create a new directory for your project:

mkdir react-vite-project

Go inside the project.

cd react-vite-project

Set up a new React project using Create Vite App by running the following command:

npx create-vite@latest my-react-app --template react

Wait for the project scaffolding to be completed.

Explore the Project:

Open the project directory in your code editor.

Take a look at the project structure and files, including the src directory, App.jsx, and main.jsx.

Make Changes to the Application:

Open src/App.jsx in your code editor.

Modify the content of the App component by adding or changing some text or elements.

Save the file to see the changes in the browser.

Test the Application:

Open a terminal or command prompt in the project directory.

Start the development server by running the following command: npm run dev

Open your web browser and navigate to the provided local development server URL (e.g., http://localhost:3000).

Verify that your changes are reflected in the browser.

Create a GitHub Repository:

Sign in to your GitHub account.

Click on the "+" icon in the top-right corner and select "New repository" from the dropdown menu.

Provide a name for your repository (e.g., "my-react-app") and an optional description.

Choose the visibility (public or private) for your repository.

Click on the "Create repository" button to create the repository on GitHub.

Publish the Project to GitHub:

Back in the terminal or command prompt, navigate to your project directory.

Initialize a new Git repository in your project directory if you haven't already done so:

git init

Add all the project files to the repository:

git add .

Commit the changes with a descriptive message:

git commit -m "Initial commit: Create React app with Create Vite App"

Connect your local repository to the remote repository on GitHub using the following command:

git remote add origin https://github.com/your-username/my-react-app.git

Push the changes to the remote repository:

git push -u origin main

Verify the Published Project:

Visit your GitHub repository's page to ensure that the project files have been published successfully.

Task Submission

Take a screenshot of your modified React application running in the browser.

Share the screenshot in the comment section of the issue

Provide the GitHub repository URL as your submission.

[junuthapa011]

Name: Junu Thapa Github URL: https://github.com/junuthapa011/myreatapp-task3.git

[Namsla]

Namkhang Tsamchoe Github link:https://github.com/Namsla/React-project.git react link: http://localhost:5173/

localhost:5173

[ashmaupret100]

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

[dinakc]

Deena KC https://github.com/dinakc/Vite-app.git

[KabinaThapa]

Kabina Thapa https://github.com/KabinaThapa/my-react-app-task2/tree/master

[sandessth]

Name: Sandesh Shrestha Github repository: https://github.com/sandessth/my-react-app

[ashmaupret100]

Name : Ashma Upreti Github url: https://github.com/ashmaupret100/react_learn_third.git

[Jharanatmg]

Jharana web url-http://localhost:5173/ GitHub url- https://github.com/Jharanatmg/my-react-app.git

[babisha]

[yogeshtakeo]

@junuthapa011 @Jharanatmg @Namsla While the output is correct, a little creativity is needed adding more things and apply yourself in this feild.

[yogeshtakeo]

//

[yogeshtakeo]

@ashmaupret100 A bit more content with the use of paddings and borders could be updated. Try to go all out on the precious session we have.

Update: I see you have two submissions on the issue comments can you try on making just one submission next time

[yogeshtakeo]

@dinakc I can see the implementation is correct the design is satisfactory. Try to add a bit more UI concepts while designing.

[yogeshtakeo]

@sdhital12 Remaining to submit

[sdhital12]