Initializing a React project

Developing with node.js and npm

node.js: JavaScript runtime
(e.g. for running a local development server)

npm: package manager

Initializing a React project

possibilities:

  • create-react-app (most-used method)
  • vite
  • next.js (includes static site generation and server-side rendering)

Initializing a React project

possible commands for initializing a project named "todolist":

npx create-react-app@latest todolist
npx create-react-app@latest todolist --template typescript

npm create vite@latest

npx create-next-app@latest
npx create-next-app@latest --ts

see also: https://reactjs.org/docs/create-a-new-react-app.html

Initializing a React project

example:

npx create-react-app@latest todolist --template typescript
  • uses the latest version of create-react-app
  • creates a project in a new folder named todolist
  • uses the typescript project template

Initializing a React project

many aspects can be preconfigured by the initializer:

  • build system (e.g. webpack and babel)
  • local development server
  • unit testing framework
  • CSS modules
  • ...

File structure

File structure

create-react-app: default file structure

  • package.json: configuration, list of direct dependencies
  • node_modules: dependencies
  • public/index.html, src/index.tsx: entry points
  • src/index.css: global style declarations
  • src/App.tsx, src/App.css: define the App component

File structure

basic file structure for a simple todo list project:

  • src/
    • index.tsx
    • index.css
    • App.tsx
    • App.css
    • components/
      • AddTodo.tsx
      • AddTodo.css
      • TodoItem.tsx
      • TodoItem.css
      • ...
    • hooks/
      • useTodos.ts
    • types.ts

File structure

common approaches:

  • grouping by type (component / hook / API connection / ...)
  • grouping by features or routes

React docs on file structure

example project: bulletproof react

Dev server, build and deployment

Dev server, build and deployment

inside the project directory:

  • npm run start (or npm start): starts the local development server
  • npm run build: creates a build (for deployment)

Dev server

app runs on a local development server on the computer (typically localhost:3000)

automatic reloads on code changes

Build and deployment

A React project can be hosted on any static hosting service

Build

static build with create-react-app:

npm run build

minified and bundled app is created in the build folder

Deployment

simple options for trying out deployment options without login:

React developer tools

React developer tools

features:

  • display component structure
  • show component state and props
  • change state and props
  • (analyze render performance of components)

React developer tools

possible approach when looking for issues:

  • check state update logic: state updates correctly in response to events
  • check rendering logic: state is rendered as expected