Ever wondered how react executes ? Gave a prompt to gpt but still find it difficult to get. Dont worry, below I have listed the key differences in executing between an 'create-react-app' and vite method in a minimalist way. Please note, this will not focus on how the installation on both differs but rather on the working. Feel free to reach out if any mistakes.
Let's start from the very basics. We know the browser understands simple html, css and javascript but in order to create dynamic websites it becomes difficult to maintain the websites. Here frameworks like angular and react come to play. Now there are majorly two ways to work with react.
1. Create-React-App - In simple terms cra is easy to use and pre-configured but it offers less flexibilty and configuration challenges.
2. Vite - Build for production its lightweight and blazing fast.

CREATE-REACT-APP:

• Now we all know inorder to add functionalities in a website we must use javascript and this javascript is always injected into html using script tags

• But this is not the case in cra react apps where there is an absence from html code. So how does it work.

• To get this we have to see the html code first.

Above we can see the absence of a script tag but still it works. Reason being the presence of "react-scripts" in package.json file which automatically adds a script tag in website. This can be seen when we inspect an website.

Next when the script tag is executed , the index.js file runs which gets a document model of the div "root".

Here a new element root is created which gets root id as document and then the root is rendered according to react syntax. We can see the App element is getting rendered in the snippet. Lets look into this file to understand better.

Now another element chai is similarly being returned. Lets ingnore this for now. Our main focus here is that the app that was being rendered in index was a component which was being exported. But isn't app a function ?? Then how its being executed within react syntax. Well the simplest answer is here app acts as a library which can be customized. So not only react but we can write also js in react. Now lets move to "chai".

Does it have something different ?? Does it seems familiar to vite ?? What is jsx ?? jsx stand for javascript xml, it allows us to write html code inside js similar to vite. Hence not only functions but we can also export components as resuable items.

Summazing we got that unlike normal js, cra understands js through react scripts, where a html element is taken as anchor and used accordingly through index.js which renders the root element with components and functions.

Vite :

Unlike cra a script tag is already present in index.html file.

Now unlike cra rather than .js files vite uses .jsx files.

Rather than creating a different root variable the whole DOM element is rendered as a whole.

We saw the difference between their working. Now while understanding this topic a question came to my mind that if cra uses both .js and .jsx file structure and vite uses .jsx only then why vite is more flexible than cra ??

Well it turns out that both vite and cra can use .js and .jsx but :
CRA: By default, CRA assumes that .js files don't contain JSX syntax. If you include JSX in a .js file, you'll encounter errors. You can work around this by using tools like Babel to transpile the code for compatibility, but it adds complexity.
Vite: Vite is more flexible in handling file extensions. It treats both .js and .jsx files as potential React components by default. However, if a .js file doesn't contain JSX, Vite serves it directly as plain JavaScript without transpilation, improving performance in development.

Thank You for reading, if you want to know more such interesting concepts then do follow Hitesh Choudhary and his youtube channel.