Table of Contents
What is React?
React is a powerful JavaScript library developed by Facebook for building user interfaces, particularly web applications. It has revolutionized how we think about building interactive web applications by introducing a component-based architecture and efficient rendering through the Virtual DOM.
Why Choose React?
- Component-Based Architecture: Build encapsulated components that manage their own state
- Virtual DOM: Efficient updates and rendering for better performance
- Declarative: Describe what the UI should look like for any given state
- Learn Once, Write Anywhere: Use React for web, mobile (React Native), and desktop
- Strong Ecosystem: Vast community and extensive library support
Setting Up Your Development Environment
Before we start coding, let's set up a proper development environment:
Prerequisites
# Install Node.js (version 14 or higher)
# Download from https://nodejs.org/
# Verify installation
node --version
npm --version
Creating Your First React App
# Create a new React application
npx create-react-app my-first-react-app
# Navigate to the project directory
cd my-first-react-app
# Start the development server
npm start
Understanding the Project Structure
my-first-react-app/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.css
├── package.json
└── README.md
Key Files Explained
- public/index.html: The HTML template
- src/index.js: The entry point of your React application
- src/App.js: The main App component
- package.json: Project dependencies and scripts
Your First React Component
Let's examine the default App component:
// src/App.js
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Welcome to React!</h1>
<p>This is your first React application.</p>
</header>
</div>
);
}
export default App;
How React Works
React uses a Virtual DOM to efficiently update the actual DOM. When state changes occur, React:
- Creates a virtual representation of the DOM
- Compares it with the previous virtual DOM (diffing)
- Updates only the parts that changed (reconciliation)
Practical Exercise
Modify your App.js to display a personalized welcome message:
function App() {
const userName = "Your Name";
const currentYear = new Date().getFullYear();
return (
<div className="App">
<header className="App-header">
<h1>Hello, {userName}!</h1>
<p>Welcome to React in {currentYear}</p>
<p>Let's build something amazing together!</p>
</header>
</div>
);
}
Development Tools
Install the React Developer Tools browser extension for debugging:
Next Steps
In the next lesson, we'll dive deeper into JSX syntax and learn how to create and structure React components effectively.
Summary
You've successfully set up your React development environment and created your first React application. You've learned about React's core concepts, project structure, and the Virtual DOM. This foundation will serve you well as we explore more advanced React concepts in upcoming lessons.