💻 Lecture Notes Of Class 1
Introduction to React
Objective:
To introduce students to React.js, its purpose, and
why it is one of the most popular JavaScript libraries for building user
interfaces. Students will also learn the concept of SPA (Single Page
Application), Virtual DOM, and JSX.
1. What is React?
React is a JavaScript library used to build user
interfaces, especially for Single Page Applications (SPA). It allows
developers to create large web applications that can update and render
efficiently in response to data changes.
Key Points:
- Developed by Facebook (now known as Meta) in
2013.
- It was used in Facebook’s own products, like Facebook.com and Instagram.com.
- maintained by Meta .This means that even today, Meta (Facebook’s parent company) is actively involved inmproving React,Fixing bugs,Releasing updates,Managing the official documentation
- Focuses on component-based
architecture.
- Efficient, fast, and declarative.
- Used for building interactive
UI with minimal code.
2. Types of React
There are two types of React:
1.React Js
2.React Native
|
Type |
Name |
Used For |
Platform |
|
1 |
React.js (also called React or ReactJS) |
Building web applications |
Web Browsers (like Chrome, Firefox) |
|
2 |
React Native |
Building mobile applications |
Android & iOS phones and tablets |
1. What is React.js?
React.js is the original library developed by Facebook in 2013.
- It is used to build web-based
user interfaces.
- You use HTML + CSS +
JavaScript with JSX.
- Runs in the browser.
- You build websites like:
- Facebook.com
- Amazon clone
- Web dashboards
Example:
function App() {
return <h1>Hello, React Web!</h1>;
}
2. What is React Native?
React Native is a framework built on top of React in 2015.
- It is used to build native
mobile apps (like the ones on your phone).
- It does not use HTML or CSS
— instead, it uses native mobile components like <View>, <Text>,
<Image>.
- Runs on Android and iOS
devices.
- You build apps like:
- Instagram (mobile)
- Facebook mobile app
- Uber, Flipkart, etc.
Example:
import { Text } from 'react-native';
function App() {
return <Text>Hello, React Native!</Text>;
}
Real-World Analogy:
React
is like a universal language (JavaScript logic).
You can use this language to talk to:
- Web browsers using React.js
- Mobile devices using React Native
So:
- React.js = React + Web
Technology
- React Native = React + Mobile
Technology
Summary : React.js vs
React Native
|
Feature |
React.js |
React Native |
|
Platform |
Web |
Mobile (Android & iOS) |
|
Technologies Used |
HTML, CSS, JavaScript |
Native components (View, Text, etc.) |
|
Output |
Web pages |
Mobile apps |
|
Rendering |
Uses Browser DOM |
Uses Native mobile UI elements |
|
Styling |
CSS |
StyleSheet (React Native styling) |
|
Navigation |
React Router |
React Navigation |
|
Deployment |
Web servers |
Play Store / App Store |
3. Why Use React?
- Reusable Components: Code once and reuse.
- Interactive UI: Interactive User Interface with Virtual DOM .
- Fast Rendering: Uses Virtual DOM for better performance.
- Unidirectional Data Flow: Easy to manage and debug.
- Rich Ecosystem: React Router, Redux, Hooks, etc.
- Large Community: Abundant tutorials and third-party libraries and very popular in Industry.
4. What Should I know before Using React?
You have a good knowledge on JAVASCRIPT.
- Variables, datatypes , functions ,loops etc.
- Promises and asynchronous programming
- Array methods like forEach() and map().
- Fecth API and making http requests, etc.
5. What is a Single Page
Application (SPA)?
A Single Page Application is a web app that loads
a single HTML page and dynamically updates content as the user interacts
with the app.
Key Features:
- No full page reloads
- Faster and smoother user
experience
- Only parts of the page are
updated
Traditional Website vs
SPA:
|
Traditional Website |
SPA |
|
Reloads page on each request |
No page reload |
|
Multiple HTML files |
One HTML file |
|
Slower user experience |
Faster, smoother experience |
6 . What is Virtual DOM?
The Virtual DOM is a lightweight copy of the Real
DOM. React creates a virtual representation of the UI in memory and updates
the real DOM only where changes have occurred.
How It Works:
1. React creates a Virtual DOM.
2. When state changes, React creates a
new Virtual DOM.
3. It compares old and new Virtual DOM
using a process called diffing.
4. React updates only the parts of the
real DOM that changed.
Why is this good?
- Speeds up performance.
- Avoids unnecessary DOM
manipulation.
7 . What is JSX?
JSX stands for JavaScript XML. It allows us to write
HTML inside JavaScript, making code readable and easy to write. JSX means Javascript+Html;
const element = <h1>Hello, React!</h1>;
JSX is not HTML — it is a syntax extension of
JavaScript, and it gets compiled to React.createElement() calls.
JSX Rules:
- Return only one parent
element.
- Use className instead of
class.
- All tags must be closed
properly.
- You can write JavaScript
expressions inside {}.
Activity: Setting Up the
Environment
What we need or Prerequisite:
1. Node.js (https://nodejs.org)
2. Visual Studio Code (VS Code) (https://code.visualstudio.com)
Installation Steps:
1. Install Node.js (includes
npm).
2. Open VS Code.
3. Open a terminal in VS Code.
Create a New React App:
Two Common Ways to Create a React
App
|
Method |
Command |
|
Using npx |
npx create-react-app my-app |
|
Using npm |
npm install -g create-react-app |
What is npx?
- npx stands for Node Package
Execute
- It comes built-in with
Node.js (v5.2+)
- It lets you run a package
without installing it globally
What is npm?
- npm stands for Node Package
Manager
- It’s used to install
packages and manage dependencies
- With npm, you have to install
packages globally to run them via the terminal
Step-by-Step Comparison
|
Feature |
npx |
npm |
|
Installation Needed |
❌ No (runs directly) |
✅ Yes (global install first) |
|
Latest Version? |
✅ Always uses latest |
❌ May use outdated version |
|
Easy to Use |
✅ One-step command |
❌ Two steps (install + run) |
|
Disk Space |
✅ Temporary |
❌ Uses more space |
|
Clean Setup |
✅ Cleaner |
❌ May create version issues |
|
Example |
npx create-react-app my-app |
npm install -g create-react-app |
Which One is Better? →
✅ npx
is Recommended
✅ Why npx is better (in most cases):
1.
No
global install needed
o No need to run npm install -g
create-react-app
o Avoids unnecessary clutter in your
system
2.
Always
uses the latest version
o npx downloads and runs the latest
version every time
o npm might run an outdated global
version (if not updated manually)
3.
Less
chance of version conflicts
o Since npx runs a fresh version from
the internet, it avoids conflicts between multiple projects
4.
Cleaner
development environment
o No leftover files or old global
versions sitting on your machine
🚫 Problems with npm (global
install)
- If you install create-react-app
globally with npm, and the official tool gets updated, you might run into
errors like:
You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.1).
- Then you’ll need to manually
run:
npm uninstall -g create-react-app
npm install -g create-react-app@latest
❌
This is time-consuming and annoying, especially for beginners.
Real-Life Analogy:
- npm (global install): Like permanently installing a
software on your PC. It stays even if you don’t use it again.
- npx: Like running a one-time portable
app — you use it and it disappears when done.
Final Recommendation
|
For Beginners or Occasional Users | Use npx |
| For Offline Setup or Custom Templates | npm may help |
✅
Best Practice:
Always use:
npx create-react-app my-app
It’s:
- Safer
- Cleaner
- Always up to date
- Doesn’t clutter your system
Using NPX In detail
Steps to Create Your First App:
Step
1: Use Create React App
Open Terminal/Command Prompt:
npx create-react-app my-app
cd my-app
npm start
npx
downloads and runs the app setup
npm start runs your app on http://localhost:3000
File Structure:
my-app/
├── public/
│
└── index.html
├── src/
│
├── App.js <-- Main
Component
│
├── index.js <-- Entry
point
- index.js: Entry point of the app.
- App.js: Main component.
- index.html: Root HTML file where React mounts.
Open the src/App.js file and replace the default code with:
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is my first React component.</p>
</div>
);
}
export default App;
Save
→ Browser will update automatically
✅ You’ve created your first component and rendered it on the page!
➕ Add Another Component
Create
a new file src/Message.js:
function Message() {
return <p>React is fun to learn!</p>;
}
export default Message;
Now
import and use it in App.js:
import Message from './Message';
function App() {
return (
<div>
<h1>Hello, React!</h1>
<Message />
</div>
);
}
👀
Output:
Hello, React!
React is fun to learn!
You
just created and used a custom component. 🎉
Recap +
Q&A
Let’s Review:
- React is a JavaScript library
for building fast UIs
- It uses components to
structure UI like building blocks
- It uses Virtual DOM for
speed,
- You can create a
React app easily with npx create-react-app
- JSX allows you to write HTML
in JS or
- SPA allows seamless user experience without page reloads.
- npx create-react-app quickly sets up a new React project.
Ask:
"Any
questions or doubts? Feel free to ask before we wrap up."
Homework +
Closing
Task: Watch an introductory video on React.
Suggested Video: React JS Crash Course for Beginners (YouTube)
Homework for Practice:
1.
Install
Node.js and create your own React app
2.
Create
3 components: Header, About, and Footer
3.
Use
all 3 in App.js
Closing Statement:
"React
is just the beginning of your frontend development journey. Once you understand
components and JSX, you’ll be able to build real-world applications faster and
better.
In
our upcoming sessions, we’ll explore:
- Props
- State
- Event handling
- And much more
Keep practicing and Happy Coding!"
