ReactJS — Part 1
Introduction To ReactJS:
What is ReactJS?
ReactJS is a JavaScript library developed by Meta used for building fast and interactive user interfaces using reusable components.
Why Developers Like React?
1. Reusable code (as it is component based)
2. Faster websites (because of Virtual DOM)
3. Easy to Manage Large Projects
React vs Normal JavaScript
Creating our first react app using create-react-app:
npx create-react-app my-app
What is npx?
npx is a tool that comes with Node.js.
It allows you to:
· Run packages directly
· Without installing them globally
What is create-react-app?
create-react-app is a tool made to quickly create a React project with all setup already done.
Without it, you would manually configure:
· Webpack
· Babel
· Dependencies
· Folder structure
This tool does everything automatically.
What is my-app?
This is your project name.
What we get at the end in the folder?
Exploring the ‘public’ folder:
Here the most important file is the “index.html”, rest can be ignored. We don’t modify the index.html even.
How to run the react app?
Output:
Understanding JSX
What is JSX?
JSX is a syntax used in React to write UI code in an HTML-like way inside JavaScript. It allows us to write:
· HTML-like code
· Inside JavaScript
Example:
const element = <h1>Hello React</h1>;
Is JSX same as HTML?
JSX looks like HTML, but:
· It is actually JavaScript
· Browser does not understand JSX directly
· React converts JSX into JavaScript
This conversion is done by:
· Babel (behind the scenes)
Why JSX is Useful?
1. Easier to read
2. Easier to write UI
3. JS + HTML together
Example: a basic example of JSX.
Here the App() is component, while <div> is JSX and, return() returns UI.
JSX rules:
Rule1: Return Only One Parent Element. Below example is correct as the <div> is the only one which is returned (discussed later in details)
Rule2: Every Tag Must Be Closed
Here the <img> tag is closed, while the <br> tag is not closed. If uncommented, it will show error.
Rule 3: Use className Instead of class
Rule 4: JavaScript Inside {} JSX allows JavaScript using curly braces.
Output:
What is a Fragment?
A Fragment is used to: Group multiple JSX elements without adding an extra HTML tag to the browser.
Without the <> </> (React Fragments):
Output:
In JSX, we must return: Only one parent element.
So, this is right:
While this is wrong: Error happens because React expects one root element.
How to deal with the above error?
Either you can make sure that only one root element is returned (by using one parent <div> or use the Fragments.
Example: using the parent <div>
Output:
Example: using the fragments.
Output:
Setup + Adding Bootstrap to React:
Let’s first understand about the types of page applications. By this we meant about the: Single Page Application (SPA) and Multi page application (MPA).
What is SPA?
A Single Page Application means: The website has only ONE HTML page, and content changes dynamically without full page reload.
Example: Gmail, Netflix, Instagram.
How SPA works?
When you open a SPA:
1. Browser loads one HTML file
2. React loads JavaScript
3. React controls the entire UI
Get Aditya Kumar’s stories in your inbox
Join Medium for free to get updates from this writer.
4. When you click something:
· Only part of the page updates
· Page does NOT reload
Why SPA is Fast?
Because:
· Only required data changes
· No full page refresh
· Less network usage
Important File in SPA: public/index.html (This is the ONLY HTML file in React SPA. Everything else is JavaScript.)
What is MPA?
A Multi Page Application means: Every page is a separate HTML file, and browser reloads the page every time.
Examples: traditional websites, blogs, government websites.
How MPA Works?
When you click a link:
Home.html → reload → About.html → reload → Contact.html
Each page:
· Sends new request to server
· Loads full HTML again
Why MPA is Slower?
Because:
· Full page reload every time
· More server requests
· More loading time
SPA vs MPA:
Now, let’s talk about the Node Modules folder:
What is node_modules folder?
node_modules is a folder that contains all installed packages (libraries) used in your project.
What is inside node_modules?
It contains:
· React library
· React DOM
· Babel tools
· Webpack tools
· Other dependencies
· Sub-dependencies (dependencies of dependencies)
Why node_modules folder is so big?
Because:
· Each library depends on other libraries
· All dependencies are installed locally
That’s why it becomes very large.
Why we don’t upload node_modules to GitHub?
Because:
· Very large (MBs to GBs)
· Can be recreated using package.json
Can we delete the node modules folder?
Yes, we can.
How to install node_modules folder again if got deleted?
Using the following command:
npm install
Now, let’s talk about BootStrap in React.
What is Bootstrap?
Bootstrap is a CSS framework that gives you:
· Ready-made styles
· Buttons
· Forms
· Navbar
· Grid system
Instead of writing CSS from scratch, you use prebuilt classes.
Where can we find this?
Website: https://getbootstrap.com/
How to include this BootStrap in our project?
Visit the docs:
Using the CDN link:
https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js
https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
Where to paste this link?
Inside the index.html of the public folder, as shown below:
Why index.html?
Because for the SPA, in react index.html is the only page which will be loading every time.
Before pasting the link:
After pasting the link:
Now, let’s do something in the code to see the implementation of them practically.
As usual we will work on the App.js:
Output: (don’t forget to do ‘npm start’)
What is the difference between JS function call and React function call:
· JS function → you call it anytime, it runs immediately.
· React component function → React calls it during render to build UI, and may re-call it on state/props changes.
How to pass functions to the button for onClick event?
App.js:
Output:
When clicked on button:
Basically, Always pass a function reference, not a function call.
Wrong way:
Output:
Not worked as expected.
Contact Me
📧 Email: adii.utsav@gmail.com
🔗 LinkedIn: https://www.linkedin.com/in/aditya-kumar-3241b6286/
💻 GitHub: https://github.com/Rememberful
