CodeBlanks Logo Icon CodeBlanks
Login Register

Setup and Vite

Start a new React project with Vite and get to know the project structure.

Setup and Vite

The fastest way to start a new React project is Vite. Vite opens the dev server in seconds and reflects changes on screen instantly.

In the terminal you run: npm create vite@latest my-app -- --template react. This creates a folder named my-app and drops an initial React project inside.

Then you cd my-app, install dependencies with npm install, and start the dev server with npm run dev. The browser opens at http://localhost:5173.

Project structure

A Vite project has a few key files:

  • index.html: the app's entry HTML; holds a <div id="root">
  • src/main.jsx: the file that boots React; calls ReactDOM.createRoot
  • src/App.jsx: the default root component
  • package.json: dependencies and scripts

Inside main.jsx, the line createRoot(document.getElementById('root')).render(<App />) attaches React to the #root node.

Practice main.jsx contents

Complete the skeleton. Add a createRoot call in main.jsx: take the document.getElementById('root') node and render <App /> into it.

Starter code

App.jsx
import { createRoot } from 'react-dom/client';
import App from './App';

// Render React into the root

Sample solution

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

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Which command opens a Vite React project?

  • npm start react my-app
  • npm create vite@latest my-app -- --template react Correct answer
  • npm new react my-app
  • npm init react-app my-app --vite

Explanation: Vite is started with npm create vite@latest ... -- --template react.

2 The div that hosts React

Question 
React renders into the node with ____ id="root".
Answer 
React renders into the node with div id="root".

Explanation: The default root is a <div id="root"> node.

3 Match the files

Term Meaning
index.html Entry HTML
main.jsx Boots React
App.jsx Root component
package.json Dependencies

All lessons in Beginner

1 React intro

  1. What is React?
  2. Setup and Vite
  3. Your first component
  4. Summary - React intro

2 JSX basics

  1. What is JSX?
  2. Expressions and curly braces
  3. Attributes and className
  4. Summary - JSX basics

3 Components

  1. Component logic
  2. Component tree
  3. Naming rules
  4. Summary - Components

4 Profile card

  1. Project: Profile card
  2. Avatar component
  3. Info list
  4. Assemble the card

5 Props

  1. What are props?
  2. Reading props
  3. Children prop
  4. Default props
  5. Summary - Props

6 Conditional rendering

  1. What is conditional rendering?
  2. Ternary operator
  3. Logical AND (&&)
  4. Early return
  5. Summary - Conditional rendering

7 List rendering

  1. What is list rendering?
  2. The key attribute
  3. Array to components
  4. Filtering and sorting
  5. Summary - List rendering

8 Shopping list

  1. Project: Shopping list
  2. Item component
  3. List body
  4. Empty state

9 Events

  1. Events
  2. The event object
  3. Form events
  4. Summary - Events

10 useState

  1. What is state?
  2. The useState call
  3. Updating state
  4. Multiple state values
  5. Summary - useState

11 Counter app

  1. Project: Counter app
  2. Number and buttons
  3. Decrement and reset
  4. Boundary control

12 Forms

  1. Controlled input
  2. Form submission
  3. Multiple fields
  4. Summary - Forms

13 Styling

  1. Styling with CSS
  2. CSS Modules
  3. Inline styles
  4. Summary - Styling

14 styled-components

  1. What is styled-components?
  2. Styling with props
  3. Using themes
  4. Summary - styled-components

15 useReducer

  1. What is useReducer?
  2. Action and state
  3. useState vs useReducer
  4. Summary - useReducer

16 useEffect

  1. What is useEffect?
  2. Dependency array
  3. Cleanup function
  4. Summary - useEffect

17 Context

  1. What is context?
  2. createContext
  3. Provider and useContext
  4. Summary - Context

18 useRef

  1. What is useRef?
  2. DOM access
  3. Timer example
  4. Summary - useRef

19 Todo app

  1. Project: Todo app
  2. Todo entry form
  3. Todo list
  4. Filter and summary

20 Beginner final

  1. Challenge: Weather card
  2. Challenge: Cart summary
  3. Challenge: Counter and reset
  4. Challenge: Dropdown menu