React Project Setup

React Development

React Project Setup

Beginner Lesson 2 of 2

React Project Setup

Learn to create a new React project using popular tools.

Vite (Recommended)

# Create project
npm create vite@latest my-react-app -- --template react

# With TypeScript
npm create vite@latest my-react-app -- --template react-ts

# Install dependencies
cd my-react-app
npm install

# Start dev server
npm run dev

Create React App

# Create project
npx create-react-app my-app

# With TypeScript
npx create-react-app my-app --template typescript

# Start dev server
cd my-app
npm start

Project Structure

my-react-app/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── components/
├── package.json
└── vite.config.js

Essential Files

main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

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

App.jsx

function App() {
  return (
    <div className="App">
      <h1>Hello React!</h1>
    </div>
  );
}

export default App;

VS Code Extensions

• ES7+ React/Redux/React-Native snippets
• Prettier - Code formatter
• ESLint
• Auto Rename Tag

Next Steps

Continue to Components →