Understand the Basics

I want to tell you about the structure of both projects one is created using Vite while the other is created using React.

First I want to tell you about What is Vite?
Vite is a light library used to build React Projects and Vite library is too light so it takes very little time to build a React Project. If we create a project using create-react-app then it is time-consuming so I preferred Vite create vite@latest over React to create React projects due to its speed and light code.

I'm starting with the structure and flow of the project which is made using React then I'll explain the structure of the project which is made using Vite.
When you create a React Project using the create-react app you might see the following files which are used in the project. I'm creating a React using the React library and named it 01BASICREACT

Let's understand the working of every file present in the React Project:-
package.json:- This file describes the name, version and dependencies of the React Project and web vitals different React scripts are also present in this file by which a React project works.
package-lock.json:- The dependencies that we use in building a React project are locked in this file and I'll explain to you about that file later.
gitignore:- The file that we don't want to push in the GitHub are present in his gitignore file.
manifest.json:- This file works when we are opening my React project on mobile devices. We can see meta tags in this manifest file.
robots.txt:- This file is used for search engines which is not much required.

index.html:- The main file in this project is index.html which is the backbone or foundation of the project. We are writing only a single div tag with a unique ID in the HTML file and afterwards, we will manipulate this file using the js file present in the src folder.
So we have to mainly focus on the index.html file the reason why we called react projects is a single page application(SPA) as there is only a single HTML file present in the project and the changes we have made are directly reflected in the index.html file only.

Explanation of index.html file:- Remove the unnecessary comments from this file and minimize the head tag then you get a clear and normal HTML file.
<noscript> tag shows the message that JavaScript is enabled or not in any of the browsers. Only a <div> tag with id root is present in the HTML file in which all the changes are reflected which we will make through the js file.

index.js:- At the first line we have imported React and ReactDOM library which helps in taking all the references.
Then we also imported a component file named App.js.

ReactDOM vs Browser DOM

Browser has its own DOM but react designs its own DOM which is called a Virtual DOM and then it compares the virtual DOM with the main DOM and changes the differences only in the main DOM not to the whole main DOM.

(This is how our virtual DOM looks like we have designed using React)

We have designed a variable root where we have stored the reference of the div element using the tag getElementByID as we already read it in the DOM manipulation in JavaScript.
There are many ways to select the div element:-
document.getElementById("root")
or
document.querySelector("#root")

root.render is used to render all the HTML tags that are written inside it and give output to the Browser at some specific port.

What is JSX?

React gives us the power to use all HTML elements with JavaScript and also gives us the power to design our tag and use it.
React gives us the power of JSX, which means we can render our HTML elements with JavaScript.
Here we are using <App/> tag which is written inside the App.js file by importing it into the index.js file.

Here in this App.js file, I have taken the function App in which certain HTML code is written inside it and then we render it using the command export default App;

Note:- We have not injected index.html file inside any of the js files then how this index.html file loaded and rendered in the browser page.

Analysis of React Project Using Vite

In Vite there is no React Script present in the package.json file so we can link the js file directly to the HTML file using the <script> tag.

How to write another component

We can create a js file with any name like I'm creating a file named abc.jsx in which we are writing the HTML code.
We have to write a function with a unique name and inside the function return the HTML elements that we want to be in the DOM and then render that function using the export command.

Rules while writing a React Component:-

Create a function with capitalising name only like 'Hello' is correct while 'hello' is wrong.
When you are returning more than one HTML element then put all the HTML inside a div tag or put it into a fragment <> and </> .
You can save the component with the .js or .jsx extension it depends on the library we used in Vite we create the file using .jsx extension while when we create a file using react we create a file using .js extension or .jsx extension both.

Here a component abc is created in which function Abc is written with the first letter capital and exported at the last. To use this component import it into the js file and then use it.

Beginner Project

Output

The output of this code can be seen by running a command npm run dev for Vite and npm run start for React library in the VS Code terminal when cd pointing to that folder.

Before We End...

Thank you for reading!

I hope you learned something from this blog and if there is a problem whatsoever with the article, let me know in the comments.

If you found this blog helpful, please share and like it to help more people discover it.

Let's Connect

Don't miss out on future articles like this one! Follow me on the socials listed below and Hashnode to stay updated.

React Flow and Structure

Table of contents