React is a JavaScript library specifically designed for building user interfaces (UI) for web applications .

In this article we are going to learn about how we can setup a React project with Vite and understand it's directory structure

Setting up a React project (using Vite) :

Implement the following steps to setup a react project

• create a directory called "react-setup" or any name of your choice and open it up on VS code

• open up the integrated terminal , make sure you have npm installed

• run the following commands

    npm create vite@latest
  

• give it a project name , select react as our framework , select Javascript as our variant :

• Now let's run the following commands in our terminal

    cd react-app
  

    npm install
  

  if you gave a different project name , use it instead of react-app, in the terminal if the path ends with "react-app" that means you are in the correct directory :

  

• now run :

    npm run dev
  

  you should see something like this :

• 

Congratulations you've successfully setup your react project , now go to localhost:5173 in your browser , and you should be able to see this User interface:

Understanding Directory Structure :

Now Open up your react-app directory and you should see similar files :

let's start exploring the directory structure :

• package.json : it contains all the dependencies , devDependencies , version , scripts and a whole lot of other information regarding the project.

  

• index.html : it contains the html boiler plate code and has a div with an id of root , this div is very important because all the dynamic html that is generated by react is nested into the div as it's children.

  

• public directory : contains all the public assets like favicon image or svg .

• src directory :

  It is the main directory that contains all of our components , it's styles and assets .

  • assets directory :

    contains all the static assets of application like the images , gifs , videos or svg.

  • App.jsx :

    • this is a jsx file not a js file , meaning the functions that we define in this file can not only return string , boolean and other primitive data types but also html and javascript .

    • it contains all the main components of our web application

      

  • App.css :

    It is a css file that is going to contain all the styles that are going to be applied in App.jsx file.

  • main.jsx :

    

    • this file contains React-dom library that helps us render our components into the root div in the index.html file

    • <React.StrictMode></React.StrictMode> :

      A development only tool that helps us catch potential issues in our react development

      • It often causes double Renders of components nested inside it, in our case it contains App component , hence the App component will double render

      • To stop the double rendering , you can simply remove

        <React.StrictMode></React.StrictMode>

        

        or

        you can just move the component outside of the

        <React.StrictMode></React.StrictMode> tags.

        

  • index.css :

    index.css contains all the general styles that we want to apply to our website.

    App.css contains all the styles that are specific to the App component whereas index.css contains more general styles that will apply to each component in our website , for example :

    if we want all of our website buttons to be black , we will give it a style

      .button {
          background-color: black;
      }
    

    inside the index.css not the App.css.

    whereas if we want one of our app component buttons to have a bg color green then that css will go inside the App.css not the index.css.

  • Now that you know what each file does , let's create a Hello World 😊 website

Hello World :

open you App.jsx file and clear everything inside App component

copy paste this code inside App function:

return (
    <>
      <div style={{

        display:"flex" , 

        height:"screen" , 

        justifyContent :"center", 

        alignItems : "center" , 

        font:"bold" , 

        fontSize:"50px"}}>

        Hello World

      </div>
    </>
  )

your App.jsx should look like this now :

save the file and run this command in your terminal

 npm run dev

go to localhost:5173 in your browser and you should see this :

Hurray 🎉 with this you have created your very first Hello World Web Application in React .

Thank you for reading this far , i hope you got to learn something from this article .

Stay tuned If you want to learn more about React , React hooks or maybe you wanna write your own custom hooks , or learn about how React functions under the hood .