React Flow and Structure

In this blog, we will see the React flow and the difference between a React app created using Create React App and Vite.

Let's talk about the React pages created using create-react-app. There's an important index.html file that has an empty div with the id "root." There's also an index.js file, which is the entry point of the React app. In index.js, two libraries are imported: React and ReactDOM. React is the main library, and ReactDOM is for web implementation. React uses a virtual DOM. In index.js, we reference the index.html file with ReactDOM.createRoot(document.getElementById('root')), and then the root variable renders a file or component called App.js. You might wonder why we don't load JavaScript in our index.html file and how the index.js file is loaded. The answer is that in our package.json, there's a react-scripts dependency that helps load the index.js file in the web browser.

For React pages created using Vite, there's also an index.html file with an empty div having the id "root." The entry point of the React app is a file named main.jsx. In main.jsx, two libraries are imported: React and ReactDOM. We reference the index.html file using the root variable with ReactDOM.createRoot(document.getElementById('root')), and then the root variable renders a file or component called App.jsx. A key difference with Vite is that the index.html file loads the main.jsx file directly, unlike the app created using create-react-app, which uses a different dependency inside package.json.Inside the projects created using vite the file that was named as .js is named with .jsx extension.

Vite, compared to create-react-app, is lightweight, faster, and can be installed easily.

We should always name the function inside our component starting with a capital letter, as not doing this will create an error. Although it is not necessary, naming the components with their first letter capitalized is also a good practice.

I have written this article based on the learnings I got from the "Chai aur Code" YouTube channel.

video link - https://www.youtube.com/watch?v=yNbnA5pryMg&list=PLu71SKxNbfoDqgPchmvIsL4hTnJIrtige&index=3

channel link - https://www.youtube.com/@chaiaurcode