React Environment
Starting a react environment, just install node. type ‘npx create-react-app {your_app_name}’ and press enter. some internal mumbo-jumbo and voila a folder with {your_app_name} is created. Open it up with ‘npm start’ and see the wondorous boilerplate code react environment provides you to start with.
Now, open the folder in your IDE. the. maze of incomprehensible code is there to amaze you. Let’s understand some of it today-
node_modules — this is the place where all your dependencies and modules are installed and stored by the node package manager(NPM). Some are ‘react’ and ‘react-dom’.
.gitignore- used to specify the files that need not be tracked by version control(git).used to avoid committing unnecessary files.
package.json — contains metadata and dependencies required for the project.
package-lock.json- ensures exact version of each package and dependency are installed. helps in maintaining consistency across developer environments.
Now coming to the meat of the React environment, the ‘public’ and ‘src’ folders.
the favicon and logos are just static assets rendered onto the browser. robots.txt is for search engine.
Get Onkar Srivastava’s stories in your inbox
Join Medium for free to get updates from this writer.
manifest.json — contains meta tags defining how the app or website would appear on mobile environment.
Index.html -
this is the single page application that actually gets rendered on the browser. the <head> contains all the meta stuff. The important portion to note is the <body> which contains just two lines one to tell the user to enable javascript (in case it isn’t already enabled). the second line renders a div of id ‘root’. let’s find out what it is.
In index.js of src folder, root (const variable) is assigned ‘root’ div of index.html file by using ReactDOM dependency(react has its own virtual DOM where it compares itself to main DOM and changes only necessary stuff).
then some <App/> tag is rendered inside that root. what is this <App/> tag. let’s check it out.
App.js
the function App() is essentially what is getting rendered inside the root at index.js.
quick q- how does the javascript gets rendered at the index.html div ‘root’ even when the script is never called?
It happens due to react:scripts dependency and other hidden metadata which can be seen on the inspect page of the rendered browser. In vite environment the ‘src’ is explicitly called in the script of index.html.
that is it for the working of react environment.
