React Fundamentals
Master React fundamentals with comprehensive understanding of its architecture, core concepts, and practical applications. Learn why React is the most popular frontend library and how to build modern web applications. This is a foundational concept in component-based UI development that professional developers rely on daily. The explanations below are written to be beginner-friendly while covering the depth and nuance that comes from real-world React experience. Take your time with each section and practice the examples
Understanding React Architecture
React is a JavaScript library for building user interfaces, particularly single-page applications. It's used for handling the view layer and can be used for developing both web and mobile applications. React's component-based architecture makes it easy to build complex UIs from simple, reusable pieces. Think of React as a set of building blocks that you can combine to create any kind of user interface you can imagine.
React's Core Philosophy
- Component-Based Architecture: Build encapsulated components that manage their own state and can be composed together
- Declarative Programming: Describe what the UI should look like for any given state, and React efficiently updates and renders components
- Learn Once, Write Anywhere: Develop new features without rewriting existing code, works across web and mobile
- Virtual DOM: efficient rendering through a virtual representation of the DOM for better performance
- Unidirectional Data Flow: Data flows down from parent to child components, making the application predictable
- JSX Syntax: Write HTML-like syntax directly in JavaScript for better developer experience
Why React is the Industry Standard
- Industry Adoption: Used by Facebook, Instagram, Netflix, Airbnb, WhatsApp, and thousands of companies worldwide
- Large Ecosystem: Extensive community, third-party libraries, and tools like Redux, Next.js, and React Native
- Job Market: High demand for React developers with competitive salaries and career opportunities
- Performance: Virtual DOM and efficient diffing algorithm provide excellent performance
- Developer Experience: Great tooling, debugging tools, and hot reloading for faster development
- Future-Proof: Continuously updated by Facebook and the community, staying current with web standards
React vs Other Frameworks Comparison
Understanding how React compares to other popular frameworks helps you make informed decisions about technology choices. Each framework has its strengths and use cases.. This is an essential concept that every React developer must understand thoroughly. In professional development environments, getting this right can mean the difference between code that works reliably and code that breaks in production. The following sections break this down into clear, digestible pieces with practical examples you can try immediately
Framework Comparison Examples
// React - Component-based approach with JSX
function Welcome({ name, age }) {
const [isVisible, setIsVisible] = useState(true);
return (
<div className="welcome-container">
<h1>Hello, {name}!</h1>
{isVisible && <p>You are {age} years old</p>}
<button onClick={() => setIsVisible(!isVisible)}>
Toggle Age
</button>
</div>
);
}
// Angular - Template-based approach with TypeScript
@Component({
selector: 'app-welcome',
template: `
<div class="welcome-container">
<h1>Hello, {{name}}!</h1>
<p *ngIf="isVisible">You are {{age}} years old</p>
<button (click)="toggleVisibility()">Toggle Age</button>
</div>
`
})
export class WelcomeComponent {
@Input() name: string;
@Input() age: number;
isVisible = true;
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
// Vue.js - Template-based approach with Composition API
<template>
<div class="welcome-container">
<h1>Hello, {{ name }}!</h1>
<p v-if="isVisible">You are {{ age }} years old</p>
<button @click="toggleVisibility">Toggle Age</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps(['name', 'age'])
const isVisible = ref(true)
const toggleVisibility = () => {
isVisible.value = !isVisible.value
}
</script>When to Choose React
- Large-scale applications: React's component architecture scales well for complex applications
- Team collaboration: Component-based structure makes it easy for teams to work on different parts
- Rich ecosystem: Extensive library ecosystem and community support
- Mobile development: React Native allows sharing code between web and mobile
- Performance requirements: Virtual DOM provides excellent performance for dynamic UIs
- Learning curve: Relatively easy to learn compared to full frameworks like Angular
React Development Setup
// Create React App (CRA)
npx create-react-app my-react-app
cd my-react-app
npm start
// Vite (Modern alternative)
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
// Next.js (Full-stack React)
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
// Project Structure
my-react-app/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.js
│ ├── index.js
│ └── components/
├── package.json
└── README.md
// Basic 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>Start building amazing applications!</p>
</header>
</div>
);
}
export default App;Practice Exercise: React Setup
// Exercise: Create a React Project
// 1. Set up a new React project
npx create-react-app todo-app
cd todo-app
// 2. Create a simple component
// src/components/TodoList.js
import React from 'react';
function TodoList() {
const todos = [
{ id: 1, text: 'Learn React', completed: false },
{ id: 2, text: 'Build a project', completed: false },
{ id: 3, text: 'Deploy to production', completed: false }
];
return (
<div className="todo-list">
<h2>My Todo List</h2>
<ul>
{todos.map(todo => (
<li key={todo.id}>
<input
type="checkbox"
checked={todo.completed}
onChange={() => console.log('Toggle todo')}
/>
<span style={{
textDecoration: todo.completed ? 'line-through' : 'none'
}}>
{todo.text}
</span>
</li>
))}
</ul>
</div>
);
}
export default TodoList;
// 3. Update App.js
import React from 'react';
import TodoList from './components/TodoList';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>React Todo App</h1>
</header>
<main>
<TodoList />
</main>
</div>
);
}
export default App;
// 4. Add some basic styling
// src/App.css
.App {
text-align: center;
padding: 20px;
}
.todo-list {
max-width: 500px;
margin: 0 auto;
text-align: left;
}
.todo-list ul {
list-style: none;
padding: 0;
}
.todo-list li {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
align-items: center;
gap: 10px;
}
// 5. Run the application
npm start
// Challenge: Add a form to create new todos
// Challenge: Add functionality to delete todos
// Challenge: Add local storage to persist todos