javascript-today

What is React?

What is React?

React is a JavaScript library for building user interfaces, created and maintained by Meta (Facebook). It’s one of the most popular tools for building modern web applications. While it was created by Meta is is also open source and has a huge community of contributors and users.

Why React?

1. Component-Based Architecture

React lets you break your UI into reusable components:

function WelcomeMessage() {
  return <h1>Welcome to React!</h1>;
}

function App() {
  return (
    <div>
      <WelcomeMessage />
      <WelcomeMessage />
    </div>
  );
}

2. Declarative

You describe what the UI should look like, and React handles how to update it:

// You write this
function Counter({ count }) {
  return <div>Count: {count}</div>;
}

// React handles updating the DOM when count changes

3. Learn Once, Write Anywhere

  • Web apps with React
  • Mobile apps with React Native
  • Desktop apps with Electron + React
  • VR with React 360

Core Concepts

Components - Building blocks of your UI
Props - Data passed to components
State - Data that changes over time
JSX - HTML-like syntax in JavaScript

React vs Vanilla JavaScript

Vanilla JavaScript:

// Manual DOM manipulation
const button = document.querySelector('#myButton');
button.addEventListener('click', () => {
  const counter = document.querySelector('#counter');
  const current = parseInt(counter.textContent);
  counter.textContent = current + 1;
});

React:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

React handles the DOM updates for you!

How React Works

Virtual DOM:

  1. React keeps a virtual copy of the DOM in memory
  2. When data changes, React updates the virtual DOM
  3. React compares the virtual DOM with the real DOM
  4. React updates only what changed (efficient!)
// When count changes from 0 to 1
<div>Count: {count}</div>

// React only updates the text, not the whole div

What You Need to Know First

Before learning React, you should understand:

  • ✅ JavaScript fundamentals (variables, functions, arrays, objects)
  • ✅ Arrow functions
  • ✅ Destructuring
  • ✅ Spread operator
  • ✅ Array methods (especially .map())
  • ✅ Browser JavaScript basics (DOM, events)

All covered in the JavaScript and Browser sections!

Types of React Components

1. Function Components (Modern):

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2. Class Components (Legacy):

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

We’ll focus on function components - they’re simpler and the modern standard.

Setting Up React

Option 1: Create React App (outdated)

npx create-react-app my-app
cd my-app
npm start

Option 2: Vite (Faster)

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Option 3: CDN (Learning/Testing)

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

Your First React Component

// App.jsx
function App() {
  return (
    <div className="app">
      <h1>My First React App</h1>
      <p>This is a React component!</p>
    </div>
  );
}

export default App;

Key Points:

  • Components are just JavaScript functions
  • They return JSX (looks like HTML)
  • Component names must start with capital letter
  • Use className instead of class (JavaScript reserved word)

Common React Patterns

Rendering lists:

function TodoList() {
  const todos = ['Learn React', 'Build app', 'Deploy'];
  
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

Conditional rendering:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}
    </div>
  );
}

The React Ecosystem

React is just the view layer. You’ll often use:

  • React Router - Navigation between pages
  • State Management - Redux, Zustand, or React Context
  • Styling - CSS Modules, Styled Components, Tailwind
  • Data Fetching - React Query, SWR
  • Forms - React Hook Form, Formik

Why Developers Love React

✅ Component reusability - Write once, use everywhere
✅ Large community - Tons of resources and libraries
✅ Performance - Virtual DOM makes it fast
✅ Developer experience - Great tools and debugging
✅ Job market - High demand for React developers

React’s Philosophy

1. All components are pure functions

Given the same props, a component should always render the same output:

// Pure - predictable
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

// Impure - changes based on external state
let globalCount = 0;
function Counter() {
  globalCount++;  // Side effect!
  return <div>{globalCount}</div>;
}

2. Immutability

Never mutate state directly:

// Wrong
state.push(newItem);

// Right
setState([...state, newItem]);

3. One-way data flow

Data flows down from parent to child through props:

function Parent() {
  const [data, setData] = useState('Hello');
  return <Child message={data} />;
}

function Child({ message }) {
  return <div>{message}</div>;
}

React Versions & Hooks

  • React 16.8+ introduced Hooks (modern way)
  • React 18 is the current major version (2024)
  • Old tutorials might show class components - skip to Hooks-based tutorials

Common Gotchas for Beginners

1. JSX requires single root element:

// Wrong
function App() {
  return (
    <h1>Title</h1>
    <p>Text</p>
  );
}

// Right
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Text</p>
    </>
  );
}

2. Events use camelCase:

// HTML
<button onclick="handleClick()">

// React
<button onClick={handleClick}>

3. JavaScript expressions need curly braces (inside JSX):

This is a common mistake for beginners who are new to JSX. Remember that anything inside JSX that is not a string literal must be wrapped in curly braces {} to be evaluated as JavaScript.

// Wrong
<div>2 + 2</div>  // Shows "2 + 2"

// Right
<div>{2 + 2}</div>  // Shows "4"

What Makes React Different

jQuery way:

$('#button').click(function() {
  $('#counter').text(parseInt($('#counter').text()) + 1);
});

React way:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

React manages the DOM updates automatically!

Next Steps

Now that you know what React is, let’s dive into JSX and start building components!

In this series, you’ll learn:

  • JSX syntax and rules
  • Creating and composing components
  • Props and data flow
  • State and interactivity
  • Effects and side effects
  • Common patterns and best practices