Skip to main content
This section covers the fundamentals of React and helps you build your first React application.

​
What is React?

React is a JavaScript library for building user interfaces. It makes building complex, interactive UIs easier by embracing a declarative programming approach.

Why React?

  • Extremely popular library
  • Makes building interactive UIs a breeze
  • Powerful and flexible
  • Active and versatile ecosystem

Core Features

  • Components, JSX & Props
  • State management
  • Hooks (e.g., useEffect())
  • Dynamic rendering

​
React vs Vanilla JavaScript

The key difference between React and vanilla JavaScript is the programming paradigm: 
import { useState } from "react";

export default function App() {
  const [activeContentIndex, setActiveContentIndex] = useState(0);

  return (
    <div>
      <header>
        <img src="react-logo-xs.png" alt="React logo" />
        <div>
          <h1>React.js</h1>
          <p>i.e., using the React library for rendering the UI</p>
        </div>
      </header>

      <div id="tabs">
        <menu>
          <button
            className={activeContentIndex === 0 ? "active" : ""}
            onClick={() => setActiveContentIndex(0)}
          >
            Why React?
          </button>
          <button
            className={activeContentIndex === 1 ? "active" : ""}
            onClick={() => setActiveContentIndex(1)}
          >
            Core Features
          </button>
        </menu>
        <div id="tab-content">
          <ul>
            {content[activeContentIndex].map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}
Imperative Programming: You define all the steps needed to achieve a result.Declarative Programming: You define the goal and React figures out how to get there.

​
Your First React App

​
Setting Up

The easiest way to get started with React is using a build tool like Vite: 
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

​
Basic App Structure

A simple React app consists of:
  1. Entry Point (index.jsx or main.jsx)
  2. Root Component (App.jsx)
  3. Additional Components (as needed)
1

Create the Root Component

Every React app has a root component, typically called App:
App.jsx
export default function App() {
  return (
    <div>
      <h1>React.js</h1>
      <p>i.e., using the React library for rendering the UI</p>
    </div>
  );
}
2

Render the App

Use ReactDOM to render your app to the DOM:
index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
3

Run Your App

Start the development server and view your app in the browser:
npm run dev

​
Key Concepts

JSX is a syntax extension for JavaScript that lets you write HTML-like code in your JavaScript files:
const element = <h1>Hello, world!</h1>;
JSX gets transformed into regular JavaScript function calls.
Components are the building blocks of React applications. They are reusable pieces of UI:
function Header() {
  return (
    <header>
      <h1>React Essentials</h1>
      <p>Fundamental React concepts you will need for almost any app!</p>
    </header>
  );
}
Use curly braces {} to output dynamic values in JSX:
function Header() {
  const description = 'Fundamental';
  
  return (
    <header>
      <h1>React Essentials</h1>
      <p>{description} React concepts you will need!</p>
    </header>
  );
}

Official React Docs

Official React documentation

Next.js

Fullstack React framework

React Native

Build native mobile apps with React

​
Next Steps

JavaScript Refresher

Review essential JavaScript concepts needed for React development

Build docs developers (and LLMs) love

Get started for freeTalk to us