- compare create-react and vite ; once understood the flow you will be able to use any library
- Goal is to understand how React gets injected to HTML (Foundation)
- point and time of injection
- basically foundational rule says; we have to inject javascript using
<script>tag , no exception
- nodemodules folder have the dependencies needed
- .gitignore ; tells which files to ignore like nodemodules folder because that can be installed easily using
npm i - package-lock.json : fix/locks the version of dependencies package.json
- README.md : introductory file
- public folder have files that are not much of importance
- manifest.json : meta tags are looked from here , when web app works on the mobile device
- only file important is index.html
- Also called "SIngle Page Application" or SPA because all the work is done here .
- Foundation is same : images , elements tags , sliders all are brought by DOM
- with DOM manipulation , we move from one page to other
- This is the main page , which is loaded
- Also called "SIngle Page Application" or SPA because all the work is done here .
- Go to index.html file and clean all the comments and close the head tag too
<!DOCTYPE html>
<html lang="en">
<head>...
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>-
Breaking down , part by part
<noscript>You need to enable JavaScript to run this app.</noscript>: says that if JS is not enabled in the browser ; enable it<div id="root"></div>: it is the only thing
-
Go to src/iindex.js file
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);- breaking line by line
- line 1 & 2 depicts the library needed to manipulate the DOM of web
- react is a core
- react-dom is an implemention for web
- line 4 ; DOM : a tree structure
- react creates a virtual DOM ; browser have its own main DOM . and comparision is there and changes the elements needed
- method
createRootwhich takes an id , its just basic JS <div id="root"></div>: get back to index.html ; id can have any name ; no rules- our whole application will load at this div
- refernce to all this is stored in a variable
root
- line 5 ; Html main browser does what ? it renders the html
- here is the same implemention
- we render here
<App/> - There was tag like that in html ; YES!! it is a custom tag ; This is the power of react : JSX ; we can render html tags through javascript
<React.StrictMode>: it is just a property of react ; app can render without it too- it is for optimization and safe mode for development ; have advantages but it is not complusory
- From does this App come from
- Yes! line 3
- visit App.js file
- App() is a function there which return html
- Intersting !! React says , take a function ; return html and that html is rendered
- We got Programming capabilities in hmtl . Wow
- Did we load JS, NO then How ?
- Go to package.josn and check
"react-scripts": "5.0.1",; this helps in loading Js in html ; need Prof - run the project and check the page source you will see this:-
<script defer src="/static/js/bundle.js"></script> - inspect in browser too and see the scripts added
- Go to package.josn and check
- line 1 & 2 depicts the library needed to manipulate the DOM of web
- Go to package.json see , there are no web scripts so how the React file is injected? Let's Analyse
- First: index.html is in root folder i.e outside of public folder
- Open index.html ; see they have directly loaded
- Loaded like classical JS instead of that many scripts
<body style="background-color: rgb(5, 4, 45);"> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body>
- compare main.jsx of vite and index.js of basicreact
- differnce is that main.jsx of vite is not taking refernce to DOM ; rest working is same
- Let's work on 01vitereact ;
- run the app first
npm run dev-$Protip💡$: .jsx extension is for making components - Make a new file chai.js in src folder and write
function chai() {
return (
<h2>Chai</h2>
)
}
export default chai - and in App.jsx write
import chai from './chai.jsx'
function App() {
return (
<chai/>
)
}
export default App- Error encountered
- Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
- How to resolve ; rename the chai.js to chai.jsx
- Now no error but no output on page ;
- go to inspect->console
- react-dom.development.js:86 Warning: The tag
<chai>is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. at chai at App - These are Best Practices
- After changes
- App.jsx
import Chai from './chai.jsx'
function App() {
return (
<Chai/>
)
}
export default App- chai.jsx
function Chai() {
return (
<h2>Chai is here</h2>
)
}
export default Chai - It will work fine now
- try writing this
function App() {
return (
<Chai/>
)- Error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)
- It means ; we have to return only single element
- Solution is wrapping all the components / elements in a
<div></div>tag - Because this was a common issue so they introduced : fragment <>...</>
- Now code will look like ; by these multiple elements are returned as a single component
function App() {
return (
<>
<Chai/>
<h1>yo</h1>
<p>Tomato is Red</p>
</>
)
)- Try the same things here , and observe the differnce
- it also restricts the use of intial lowercase
- but it works with .js extension and .jsx both
: Best Practices , the intials of file like App.jsx or Chai.jsx should be capital