React Get Started

Setting Up a New Project

The fastest way to start a new React 18 project today is with a build tool like Vite, which provides instant server start and fast refresh during development. Create React App is still widely referenced in older tutorials, but Vite has become the recommended default for new projects.

// Terminal commands (not JSX) - run these to scaffold a project:
// npm create vite@latest my-app -- --template react
// cd my-app
// npm install
// npm run dev

function SetupNote() {
  return <p>Run the commands above in your terminal to scaffold a project.</p>;
}

export default SetupNote;

The Project Structure

A freshly scaffolded Vite + React project includes an index.html file, a src folder with main.jsx and App.jsx, and a package.json listing your dependencies. The index.html contains a single empty <div id="root"></div> that React will take over and fill with your component tree.

• index.html: the single HTML page served to the browser, containing the root div.
• src/main.jsx: the entry point that creates the React root and renders your app.
• src/App.jsx: the top-level component, typically where your UI tree begins.
• package.json: lists react, react-dom, and your build tooling as dependencies.

Creating the Root and Rendering

React 18 introduced the createRoot API from react-dom/client, replacing the older ReactDOM.render call. createRoot enables React's concurrent features, such as automatic batching of state updates.

import { useEffect, useRef } from 'react';
import { createRoot } from 'react-dom/client';

// In a real Vite project this would be:
// import App from './App';
function App() {
  return <h1>My First React App</h1>;
}

function Root() {
  return <App />;
}

function MainDemo() {
  const containerRef = useRef(null);

  useEffect(() => {
    // This mirrors what src/main.jsx does in a real Vite project:
    const container = containerRef.current;
    const root = createRoot(container);
    root.render(<Root />);
  }, []);

  return (
    <div>
      <p>src/main.jsx creates a root and renders &lt;Root /&gt; into it:</p>
      <div ref={containerRef}></div>
    </div>
  );
}

export default MainDemo;

A Minimal App Component

App.jsx is just another function component. It's common to start with something simple and grow it as you add features.

function App() {
  return (
    <main>
      <h1>My First React App</h1>
      <p>Edit src/App.jsx and save to see changes instantly.</p>
    </main>
  );
}

export default App;