Summary - React intro

Combine the basic flow by opening a Vite project and adding your first component.

Summary - React intro

In this group you learned what React is, how to start a project with Vite, and how to write your first component. Now it's time to put it together.

The typical flow is: open a project with Vite, write your own component inside src/App.jsx and export it as a function with a capital letter. main.jsx takes this component and renders it into #root.

In the next step you'll write a component yourself and walk through the whole flow.

Exercise Welcome component

Complete the skeleton. Write a component called Welcome that returns <main> with <h1>Welcome</h1> and <p>Start React</p> inside. Don't forget to export.

Show example solution

function Welcome() {
  return (
    <main>
      <h1>Welcome</h1>
      <p>Start React</p>
    </main>
  );
}

export default Welcome;

Test yourself

What does main.jsx do?
- Loads CSS files
- Starts the server
- Runs tests
- Renders React into root with createRoot
Show answer

Renders React into root with createRoot — main.jsx calls createRoot(...).render(<App />).
Match the flow steps

npm create vite

Open project
npm install

Install deps
createRoot

Render root
export default

Export component

Next lesson: What is JSX?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies