How to start with react

tauriguy

IgosProjects

Posted on March 28, 2024

How to start with react

We all know React is a framework even the birds on trees but it can be hard sometimes today we are going to be talking about react and how to use it. React is used in alot of places like Facebook,Instagram,Facebook marketplace ,etc.
It is recommmended to use Vite or Next with it today we will use vite to make a simple app with react.Lets start firsty we want to make a new vite project we can do that by running

npm create vite@latest
Enter fullscreen mode Exit fullscreen mode

this will create our project. Two
You may be thinking how to inplement react when it gives you the option to chose a framework choose React today we will use Javascript so chose Javascript

it should look like this

image
.
Three

Now lets make our app so
run

cd /yourprojectname
Enter fullscreen mode Exit fullscreen mode

and run

npm install
Enter fullscreen mode Exit fullscreen mode

we reccomend to use VS code for this project

now edit App.jsx

image

Remove everything in this part
image

it should look like this

image

To make our app type this in the return

<h1>Hello Vite + React</h1>
Enter fullscreen mode Exit fullscreen mode

and oh yeah we forgot something so lets run our server so run

npm run dev
Enter fullscreen mode Exit fullscreen mode

now when we go to

http://localhost:5173
Enter fullscreen mode Exit fullscreen mode

it should look like this

image

now add this before the H1

 <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} alt="Vite Logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} alt="React Logo" />
        </a>
Enter fullscreen mode Exit fullscreen mode

now when we save this is what we see

image

Happy coding

💖 💪 🙅 🚩
tauriguy
IgosProjects

Posted on March 28, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024