Check your NodeJs

Firstly,Just run this below command to make sure you have downloaded the NodeJs in yourlocal, this is the most import step !

node -v

and

npm -v

Init a new React project.

Secondly,Run this command to create your React project,my-app will be your project name.

npx create-react-app my-app --template typescript

I know some developers will say "reate-react-app is outdated, we should use create-next-app to initialize our react front-end project, Nextjs will provide better performance, and React officials also recommend using Nextjs" But, please stop!, All we want is a single-page React project, we don't care about topics such as SCR, SSR, and if developers have experience in Nextjs development, they should know that Nextjs has advantages and disadvantages. For a simple React front-end project, we don't need to initialize a Nextjs project, that's not what we want, so in my opinion, CRA is still the most useful way to create a SPA react project.

On this topic, you can read this article to get more ideas Create React App (CRA) vs. Next.js

Adjust default folder or files

At this step,you have created your React project successfuly,Cheers 🍻.

Plus, we need to remove or add some folders or files, which are based on the best practices of real projects to ensure that our projects can be better maintained.

1. Remove those below files

• node_modules
• package-lock.json
• src/App.css
• src/App.test.tsx
• src/index.css
• src/logo.svg
• src/reportWebVitals.ts
• src/setupTests.ts

Check the file src/App.tsx and src/index.tsx,make sure those above removed files is NOT imported.
2. Remove those libraries from package.json dependencies

• @testing-library/jest-dom,
• @testing-library/react
• @testing-library/user-event
• web-vitals
• @types/jest

Finaly,your package.json like this

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/node": "^16.18.106",
    "@types/react": "^18.3.4",
    "@types/react-dom": "^18.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

3. 在src中添加shared文件夹

shared文件夹可以存放一些多次被复用的公共组件,工具方法等,这也是我们优化项目代码非常重要的一步.
最终,我们的项目文件结构会是这样

├─ README.md
├─ .gitignore
├─ package.json
├─ tsconfig.json
├─ src
│  ├─ index.tsx
│  ├─ App.tsx
│  └─ react-app-env.d.ts
└─ public
   ├─ favicon.ico
   ├─ index.html
   ├─ manifest.json
   ├─ robots.txt

Migrate to pnpm ( optional,recommended )

到这一步,我们已经完成了你的react项目文件的调整,接下来我们只需要Install package.json中所需的library, 运行package.json中的script即可.

通常对于javaScript项目,无论是React还是NodeJs,我们都会选择npm来做为我们的包管理器,这也是我作为开发人员首次 接触的包管理器,但是随着时间的推移,我发现npm每次install时都非常缓慢,尤其是在大型项目中,这让我非常抓狂,后来很多一段时间 我使用了yarn,但之后yarn的更新变得非常频繁,yarn的第四个版本出现时我必须做出很多更改,这不是我想要的,我开始了解从社区中寻找更优的 包管理器,没错,就是pnpm,它install时非常非常非常迅速,而且由于它的一些优化策略,node_modules也变得很小,而且它的命令和npm完全兼容, 目前我已经使用它一年多了,我很庆幸我能及时的选择了它,如果你还在使用npm或者yarn,我强烈推荐你是时候尝试下pnpm了,当然出于项目维护稳定或者 其他原因,你也可以继续使用 npm 或者 yarn.

迁移包管理器到pnpm只需要采用 npm 全局安装pnpm即可.

npm install -g pnpm

关于pnpm的更多细节,你可以从这里获得了解.

Install library

不论我们的语言是JavaScript还是Java,在开发中我们都会大量使用已存在的第三方library,以JavaScript为语言的项目,依赖的第三方library都会在根目录的 package.json中记录,通常安装这些library只需要选择一个包管理器,运行初始化命令,便可自动集成这些library.

打开你的终端,运行以下命令即可.

pnpm i

or

npm i

or

yarn

Make your codes stronger!

到这一步, 你已经可以成功的启动你的react项目了,但是这还不够! 我们都知道在实际项目中,我们的代码通常都会由一个团队来共同迭代,为了让我们的项目得到更好的维护,通常我们都会制定一些共同需要遵守的”开发规则“, 同时,每一个语言或者框架,都会有一些最基本的最佳实践,这些实践会让我们的代码更为健壮!

那么,以JavaScript为语言的项目,如何实现上述目标呢.

一些开发者可能会提到 Eslint + Prettier + StyleLint

不不不,这不是最好的方法.

我承认在过去很长时间里,我都采用了上述三个的组合来让我的代码更多健壮,但是每次当我接触新项目,我都需要花费很多时间来逐一集成这三个,这花费了我很多时间, 也让我感觉很心累,我渴望能够拥有一个简单的方式,来让我集成上述三个,并且还会默认提供其他更多的最佳实践.

有一天当我无意间在一篇技术博客里看到 Biome 时, 我感觉我发现了宝藏,这就是我一直想拥有的东西,Biome集成了 Eslint,Prettier,StyleLint还有其他的一些最佳实践, 也提供了让我们从Eslint直接迁移到Biome的方法,我们唯一需要做的就是采用一个yaml config文件,便可将神奇的Biome集成到我们的项目了,于是,我认真查看了Biome的官方文档以及其他 一些开发者的反馈之后,我坚定的使用了Biome, 放弃了Eslint.

1. 安装Biome

pnpm add --save-dev --save-exact @biomejs/biome

2. 配置Biome

{
  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
  "formatter": {
    "enabled": true,
    "formatWithErrors": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineEnding": "lf",
    "lineWidth": 80,
    "attributePosition": "auto"
  },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "nursery": {
        "recommended": true
      },
    },
    "ignore": [
      "./.vscode/*",
      "node_modules"
    ]
  },
  "javascript": {
    "jsxRuntime": "reactClassic",
    "linter": {
      "enabled": true
    },
    "formatter": {
      "quoteStyle": "double",
      "lineWidth": 120
    }
  },
  "json": {
    "linter": {
      "enabled": true
    },
    "parser": {
      "allowComments": true
    }
  },
  "css": {
    "parser": { "cssModules": true },
    "formatter": {
      "enabled": true
    },
    "linter": {
      "enabled": true
    }
  }
}

这些config都会开启默认的推荐规则,你也可以根据项目的需要调整上述config,更多详情,请查看Biome官网文档

3. 配置运行命令

打开你的根目录package.json,在src中添 biome:check 命令

"biome:check": "biome check . --write --unsafe --files-ignore-unknown=true --no-errors-on-unmatched"

最终你的package.json中的script看起来会像这样

  "scripts": {
    "start": "react-scripts start",
    "biome:check": "biome check . --write --unsafe --files-ignore-unknown=true --no-errors-on-unmatched",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

4. 安装VSCode插件

在你的VSCode插件扩展中搜索Biome并安装,并且按照说明在你的项目中进行设置即可.

Precheck before commit

Migrate to Vite