CSCI 4513 - Advanced Web Programming
Week 11, Lecture 18
Before We Begin:
Make sure you have a solid understanding of JavaScript!
At the end of the day, React IS vanilla JavaScript. Being able to navigate JavaScript is paramount to building successful React projects.
Remember: React = JavaScript + Special Powers
📚 Structure: Lessons with assignments (just like before)
💻 Interactive examples: CodeSandbox demonstrations
🛠️ Projects: Build portfolio-worthy applications
Honest Talk: Learning React can be frustrating
You might think "I can do this with vanilla JavaScript, why React?"
But... Remember that dreaded Todo List project? In React, it takes less time to build!
Official definition:
"The library for web and native interfaces"
More specifically:
React is a JavaScript library that provides powerful primitives (built-in functions/modules) to build user interfaces of varying complexities.
Collection of pre-written code
You call the library
Example: React, jQuery
Complete structure for your app
Framework calls your code
Example: Angular, Vue
⚡ One of the most powerful, widely used JavaScript libraries
♻️ Reusable components - Write once, use everywhere
👥 Large community - Tons of support, resources, packages
🎨 Not opinionated - No forced patterns or structures
📉 Smaller learning curve - Especially with good JS knowledge
🚀 Makes code scalable, readable, and efficient
Used by major companies worldwide:
Netflix
Airbnb
Uber
Discord
React.js: The Documentary
An incredible hour-long film about the origin and impact of React
🔗 Link: youtube.com/watch?v=8pDqJVdNa44
What you'll learn:
Ways to start using React:
Can't we just write React directly?
Setting up React from scratch requires:
The short answer: Yes, you can set it up yourself. But it's hard and time-consuming!
Vite (French for "fast") is a modern build tool
One command to rule them all:
npm create vite@latest my-first-react-app -- --template reactWhat happens:
If you already have a GitHub repo cloned:
# Navigate to your repo
cd my-existing-repo
# Create Vite project in current directory
npm create vite@latest . -- --template reactThe . tells Vite to use the current directory instead of creating a new one
This keeps your existing git setup intact!
my-first-react-app/
├── node_modules/ # Dependencies (don't touch!)
├── public/ # Static assets (images, icons)
├── src/ # Your code lives here!
│ ├── App.css
│ ├── App.jsx # Main App component
│ ├── index.css
│ └── main.jsx # Entry point
├── .gitignore
├── index.html # HTML template
├── package.json # Project config & dependencies
└── vite.config.js # Vite configurationWhat goes here:
Important: Files here are served as-is, they're not processed by Vite
This is where the magic happens!
Rule of thumb: All your React code goes in src/
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
createRoot(document.getElementById("root")).render(
<StrictMode>
<App />
</StrictMode>,
);What's happening:
<StrictMode>
<App />
</StrictMode>This is JSX!
(JavaScript XML)
JSX lets you write HTML-like code in JavaScript
Don't worry if it looks strange - you'll be writing it fluently soon!
Essential Chrome/Firefox Extension
Install it now! Get comfortable with it early - it's invaluable for debugging
Two options:
Search "React Developer Tools" in Chrome Web Store
Click "Add to Chrome"
Search "React Developer Tools" in Firefox Add-ons
Click "Add to Firefox"
After installing, you'll see two new tabs in DevTools:
⚛️ Components | ⚡ Profiler
Task: Clean up your my-first-react-app project
Goal: Display "Hello, World!" instead of the default Vite page
Hints:
Create React App (CRA) was the official way to start React projects from 2016-2023
You'll see it mentioned in many tutorials and guides
Important: It's no longer recommended for new projects
If you see "npx create-react-app":
Use Vite instead! It's faster and more modern
Essential npm commands:
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewDevelopment workflow:
npm run devOne of Vite's superpowers! ⚡
What is HMR?
When you save a file, changes appear in the browser instantly without refreshing the page
📖 Read: React official website introduction
📖 Read: History of React article
📖 Read: FreeCodeCamp - Libraries vs Frameworks
📖 Read: Main advantages of using React
📖 Read: Vite's Getting Started Page
🎥 Watch: React.js: The Documentary (highly recommended!)
🔧 Install: React Developer Tools extension
💻 Do: Create your first React app with Vite
✏️ Practice: Make it display "Hello, World!"
❓ What is the purpose of React?
❓ What are the benefits of using React?
❓ What's the difference between a library and a framework?
❓ What are some ways to start a new React project?
❓ Why should we use pre-made toolchains?
❓ What is Vite and why would we use it?
❓ What command creates a new React project with Vite?
❓ What goes in the public folder?
❓ What goes in the src folder?
❓ Why are React Developer Tools useful?
✅ React is a JavaScript library for building UIs
✅ Libraries provide tools; frameworks provide structure
✅ Vite is the modern, fast way to start React projects
✅ npm create vite@latest gets you started in seconds
✅ src/ is where your code lives
✅ React DevTools are essential for debugging
✅ HMR gives instant feedback while coding
🧩 Deep dive into React components
📝 Understanding JSX syntax
📦 Props and component composition
🎨 Styling React components
🔄 Component lifecycle basics
Get ready to build real React apps!