零经验学 react 的第2天 - 初始化一个 react 项目

7 阅读2分钟

学习的过程中,我暂时使用 vite 来构建一个 react 项目作为练习

初始化一个 React 项目有多种方式,以下是一些常见的方法

1. 使用 Create React App

Create React App 是官方推荐的方式,用于快速创建一个新的 React 应用。它提供了一个良好的开发环境,包含了常用的配置。


npx create-react-app my-app

cd my-app

npm start

  • npx 是 npm5.2版本的一个自带工具,让我们不用安装就可以使用一些包
  • package.json 文件中 eject 命令可以将项目的打包配置等文件暴露出来
  • src/index.js 为项目入口js文件
  • public/index.html 为项目入口 html文件
  • node_modules 依赖包

2. 使用 Vite

Vite 是一个现代的构建工具,支持快速开发和构建 React 应用。它比 Create React App 更快,适合大型项目。


npm create vite@latest my-app
# 选择 react 模版及合适的预设即可:例如 react + typescript

cd my-app

npm install

npm run dev

3. 使用 Next.js

Next.js 是一个 React 的服务端渲染框架,适合构建 SEO 友好的应用和静态网站


npx create-next-app my-app

cd my-app

npm run dev

4. 使用 Gatsby

Gatsby 是一个基于 React 的静态网站生成器,适合构建快速的静态网站。


npx gatsby new my-app

cd my-app

gatsby develop

5. 手动配置

如果希望完全控制项目的配置,可以手动创建一个 React 项目。这通常涉及到安装 React 和 ReactDOM,以及配置 Webpack、Babel 等工具。


# 需要手动配置 Webpack 和 Babel

mkdir my-app

cd my-app

npm init -y

npm install react react-dom

6. 使用其他脚手架工具

还有其他一些脚手架工具可以用来初始化 React 项目,例如:

Parcel:一个快速的 Web 应用打包工具。

Electron:用于构建跨平台桌面应用的框架,支持 React。

7. 使用 CodeSandbox 或 StackBlitz

如果想快速原型设计或实验,可以使用在线编辑器,如 CodeSandbox 或 StackBlitz,它们支持直接创建 React 项目并在线运行。

总结

  • 可以根据需求和项目规模,选择合适的方式来初始化 React 项目

  • 对于大多数新手和标准项目:Create React App 和 Vite 是最推荐的选择

  • 对于需要服务端渲染或静态网站生成的项目:Next.js 和 Gatsby 是更好的选择