1. 介绍
引言
在现代的 Web 开发中，React 已经成为最流行的 JavaScript 库之一，用于构建强大的用户界面。本文将引导你探索 React 的初始阶段，从零开始构建你的第一个 React 应用。无论你是初学者还是有经验的开发者，本文都将为你提供几种不同的方式，帮助你理解如何启动和构建你的第一个 React 应用。
范围
这篇文章将探讨几种不同的方法来创建你的第一个 React 应用。首先，我们将从头开始，一步一步地构建一个简单的 React 应用，从设置环境到添加样式和交互。接着，我们将介绍如何使用现成的 React 工具——Create React App——来快速创建和开发 React 应用。通过比较这两种方式，你将能够了解到不同的开发流程和工具，以及如何选择适合你的方法。
2. 从头开始逐步搭建
2.1 安装 Node.js 和 npm
download
根据操作系统，选择对应的版本
https://nodejs.org/en/download
复制代码
install (以 linux 为例)
假设下载版本：v18.17.1-linux-x64
VERSION=v18.17.1 DISTRO=linux-x64 sudo mkdir -p /usr/local/lib/nodejs sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs s
复制代码
设置环境变量
# NodejsVERSION=v18.17.1DISTRO=linux-x64export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH
复制代码
生效环境变量
测试
node -v$ npm version$ npx -v
复制代码
2.2 创建项目并初始化
创建项目：打开终端，创建一个新的项目目录，然后进入该目录。
mkdir my-react-ts-appcd my-react-ts-app
复制代码
初始化项目： 使用以下命令初始化项目，并根据提示填写项目信息。
安装依赖： 安装 React、React DOM 和 TypeScript 依赖。
npm install react react-domnpm install typescript @types/react @types/react-dom
复制代码
创建 tsconfig.json 文件：在项目根目录创建一个 tsconfig.json 文件，用于配置 TypeScript 编译选项。您可以手动创建，也可以使用以下命令生成默认配置
增加 jsx 支持：默认情况下该文件并不会包含用于支持 JSX 的配置。要启用对 JSX 的支持，你需要手动修改生成的 tsconfig.json 文件。以下是一种添加 JSX 支持的示例：
在生成的 tsconfig.json 文件中，找到 "jsx" 属性，然后将其值设置为 "react"。
{ "compilerOptions": { // 其他选项...
// 设置 JSX 为 "react" "jsx": "react", }}
复制代码
2.3 创建源代码目录和文件
创建入口文件：创建一个 src 目录，然后在其中创建一个 TypeScript 文件，例如 index.tsx，作为应用的入口文件。
编辑入口文件： 打开 src/index.tsx，编写 React 应用的代码。例如：
import React from 'react';import ReactDOM from 'react-dom';
const App = () => { return <h1>Hello, TypeScript React App!</h1>;};
ReactDOM.render(<App />, document.getElementById('root'));
复制代码
创建 HTML 文件：在项目根目录创建一个 HTML 文件，用于加载 React 应用。例如，创建一个 index.html 文件。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>React TypeScript App</title></head><body> <div id="root"></div></body></html>
复制代码
2.4 安装配置打包工具
安装打包工具：例如 webpack 和相关插件，以将应用打包成一个 bundle。
npm install --save-dev html-webpack-plugin copy-webpack-plugin
复制代码
创建 webpack 配置文件：在项目根目录创建一个 webpack.config.js 文件，用于配置 webpack。
const path = require('path');
module.exports = { entry: './src/index.tsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.tsx', '.ts', '.js'], },};
复制代码
2.4 安装配置 html plugin
安装 html-webpack-plugin 和 copy-webpack-plugin。运行以下命令：
npm install --save-dev html-webpack-plugin copy-webpack-plugin
复制代码
配置：webpack.config.js
const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { entry: './src/index.tsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), publicPath: '/', }, module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }, ], }, resolve: { extensions: ['.tsx', '.ts', '.js'], }, plugins: [ new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'index.html'), }), ], devServer: { historyApiFallback: true, },};
复制代码
2.5 配置 npm
package.json
{ "name": "my-first-react-ts-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack serve --mode development", "build": "webpack --mode production" }, "author": "", "license": "ISC", "dependencies": { "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", "react": "^18.2.0", "react-dom": "^18.2.0", "ts-loader": "^9.4.4", "typescript": "^5.2.2", "webpack": "^5.88.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" }, "devDependencies": { "copy-webpack-plugin": "^11.0.0", "html-webpack-plugin": "^5.5.3" }}
复制代码
2.6 运行
# 开发模式npm run start
#生产模式npm run build
复制代码
> my-first-react-ts-app@1.0.0 start> webpack serve --mode development
<i> [webpack-dev-server] Project is running at:<i> [webpack-dev-server] Loopback: http://localhost:8080/<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.124.34:8080/<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/<i> [webpack-dev-server] Content not from webpack is served from '/Users/lyb/code/node-project/my-first-react-ts-app/public' directory<i> [webpack-dev-server] 404s will fallback to '/index.html'asset bundle.js 1.37 MiB [emitted] (name: main)asset index.html 293 bytes [emitted]runtime modules 26.4 KiB 12 modulesmodules by path ./node_modules/ 1.25 MiB modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules modules by path ./node_modules/webpack/hot/*.js 5.3 KiB 4 modules modules by path ./node_modules/html-entities/lib/*.js 81.8 KiB 4 modules modules by path ./node_modules/react/ 85.7 KiB 2 modules modules by path ./node_modules/react-dom/ 1000 KiB 2 modules modules by path ./node_modules/scheduler/ 17.3 KiB ./node_modules/scheduler/index.js 198 bytes [built] [code generated] ./node_modules/scheduler/cjs/scheduler.development.js 17.1 KiB [built] [code generated] ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated] ./node_modules/events/events.js 14.5 KiB [built] [code generated]./src/index.tsx 538 bytes [built] [code generated]webpack 5.88.2 compiled successfully in 1126 ms
复制代码
2.6 访问
完整代码下载：https://github.com/liyangbing/my-first-react-ts-app.git
3. 使用 create-react-app
node.js npm 安装，同上
3.1 创建一个应用
npx create-react-app my-second-react-ts-app --template typescript
复制代码
3.2 目录结构
3.2 运行
npm run start
Compiled successfully!
You can now view my-second-app in the browser.
Local: http://localhost:3000 On Your Network: http://192.168.124.34:3000
Note that the development build is not optimized.To create a production build, use npm run build.
webpack compiled successfullyFiles successfully emitted, waiting for typecheck results...Issues checking in progress...No issues found.
复制代码
4. 使用 create-next-app
node.js npm 安装，同上
4.1 创建一个应用
npx create-next-app
根据提示填入信息
复制代码
4.2 目录结构
4.3 运行
npm run build
npm run start
复制代码
参考文档
https://react.dev
https://create-react-app.dev
评论