Skip to content
Search

Create React App

lastmod 2023-03-09created 2021-12-2826 edits

Set up a modern web app by running one command.

Features

  • WebPack 5 + JEst 27 + ESLint 8 + PostCSS 8
  • Tailwind support
  • Improved Fast Refresh
  • yarn/npm package manager detection changed to use environment variables
  • Node 10/12 no longer supported

Categories

Libraries

  • sourceMap loads both the original source and the transpiled code
  • css-loader: reads css files
  • style-loader: injects css into the head element; used together with css-loader
  • postcss-loader: a tool that transforms css through JavaScript plugins. A plugin-based automation tool that extends/supports css syntax that will become standard in the future — the Babel of the css world.
  • autoprefixer a plugin that handles css vender-prefixes automatically
  • post-css-color-function color modifier support
  • postcss-simple-vars sass-style variable support
  • postcss-nesting Nesting syntax support
  • postcss-for for loop support
  • postcss-assets computes paths of files referenced in url and measures image width
  • precss a collection of plugins for using css like sass
  • cssnext support for new syntax not yet supported

Templates

Creating an App

You’ll need to have Node >= 14 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

npx 

npx create-react-app my-app

npx comes with npm 5.2+ and higher, see instructions for older npm versions

npm 

npm init react-app my-app

npm init<initializer> is available in npm 6+

Yarn 

yarn create react-app my-app

yarn create is available in Yarn 0.25+

Using TypeScript 

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

Using Sass/Scss

WARNING

LibSass and the packages built on top of it, including Node Sass, are deprecated. If you are a Node Sass user, you can migrate to Dart Sass by replacing node-sass with sass in your package.json file or by running the following command: 

$ npm uninstall node-sass
$ npm install sass

or 

$ yarn remove node-sass
$ yarn add sass

This lets you do imports like the following: 

@use 'styles/_colors.scss'; // assuming a styles directory under src/
@use '~nprogress/nprogress'; // loading a css file from the nprogress node module

Environment variables

Apply environment variables with the cross-env package whenever possible.

Running tests non-interactively from the command line

Use the CI=true environment variable.

Preventing the browser from opening automatically from the command line

Use the BROWSER=none environment variable.

Changing the port number

Use the PORT=8080 environment variable.

Why there are no devDependencies

When you start a project with Create React App, all packages are added to dependencies in the package.json file. 

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },

Why didn't they put things like @testing-library/react in devDependencies?

Someone asked this on CRA Github, and Dan Abramov answered as follows. 

Node 앱이면 dependencies 와 devDependencies 를 나누는게 의미가 있는데, CRA의 경우 결과물 자체가 static bundle이고, build시에만 모든 package를 이용하기때문에 궅이 따지자면 모든 dependencies가 development dependencies 입니다.

It doesn't matter which of the two you put them in, but he says all packages were intentionally put in dependencies because some deployment scripts might not work otherwise. :)

CSS Modules

Name files as follows to apply css-modules:

  • [name].module.css
  • [name].module.scss
  • [name].module.sass

Adding SVGs

Used as follows, the svg is inlined directly from the file. That is, you can access the SVGSVGElement. 

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

lib/react-app.d.ts 

/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NODE_ENV: 'development' | 'production' | 'test';
    readonly PUBLIC_URL: string;
  }
}

declare module '*.avif' {
  const src: string;
  export default src;
}

declare module '*.bmp' {
  const src: string;
  export default src;
}

declare module '*.gif' {
  const src: string;
  export default src;
}

declare module '*.jpg' {
  const src: string;
  export default src;
}

declare module '*.jpeg' {
  const src: string;
  export default src;
}

declare module '*.png' {
  const src: string;
  export default src;
}

declare module '*.webp' {
    const src: string;
    export default src;
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

declare module '*.module.css' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string };
  export default classes;
}

See also

Favorite site

author Zer0 sitemap