Getting Started

Important Links

• Reactjs Homepage - A JavaScript library for building user interfaces
• Awesome Reactjs Repo - A collection of awesome things regarding React ecosystem
• React Patterns - Curated collection of react patterns
• React Cheatsheet - Great cheatsheet for react v16
• TanStack - Open source libraries including, React Ranger, React Charts, TanStack Table, TanStack Query
• SWR - React Hooks for Data Fetching
• Awesome React Hooks Repo - A collection of all the awesome repos for react hooks
• React Router - Declarative routing for React
• Awesome React Components Repo - Curated List of React Components & Libraries
• React Icons - Svg react icons of popular icon packs

Basic Setup

The easiest way to start a react app is using Create React App (CRA).

$ npx create-react-app my-app
$ cd my-app
$ cd yarn start # or npm run start

note

If npx create-react-app fails with: You are running create-react-app 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App

Try:

$ npx create-react-app@latest my-app

With Typescript

To create a new project using Typescript, you can add a --template flag to the CRA command:

$ npx create-react-app@latest my-app --template typescript

# or using yarn

$ yarn create react-app my-app --template typescript

With Vite

Another way to bootstrap a React app is using Vite.js

# npm 6.x
$ npm init vite@latest my-app --template react

# npm 7+, extra double-dash is needed:
$ npm init vite@latest my-app -- --template react

# yarn
$ yarn create vite my-app --template react

# pnpm
$ pnpm create vite my-app -- --template react

Other available templates: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts.

After the command execution ends, install dependencies (vite doesn't install dependencies) and start the develpment server:

$ yarn install
$ yarn dev

Adding path aliases with Vite

If using Vite, you need to add an extra config to the vite.config.js file in order to use path aliases:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});