有了新选择，为什么还要选择create-react-app？从零搭建React应用
2023-10-26 12:36:01
抛开Create-React-App，开启React项目的定制之路
从零搭建React项目的逐步指南
引言：
React已成为构建现代Web应用程序的首选框架之一，提供灵活性和广泛的组件生态系统。然而，在创建新的React项目时，开发人员经常依赖于Create-React-App (CRA) 等预配置工具。虽然CRA对于快速入门非常方便，但它可能会限制自定义和理解项目结构。
本文将指导你从零开始创建React项目 ，让你对项目拥有完全的控制，同时提升对React内部机制的理解。
步骤 1：安装 Yarn 2 (Berry)
Yarn 2是Facebook开发的包管理器，比NPM速度更快，功能更丰富。使用以下命令安装Yarn 2：
npm install --global yarn
步骤 2：创建项目目录
创建一个新的项目目录，例如“my-react-app”：
mkdir my-react-app
cd my-react-app
步骤 3：初始化 Yarn 项目
初始化Yarn项目以创建package.json文件：
yarn init -y
步骤 4：安装 Webpack
Webpack是一个模块打包工具，可以将你的代码打包成可供浏览器执行的单个文件。安装Webpack和它的命令行工具：
yarn add webpack webpack-cli -D
步骤 5：安装 TypeScript
TypeScript是JavaScript的超集，提供了类型检查。安装TypeScript：
yarn add typescript -D
步骤 6：创建 TypeScript 配置文件
创建一个tsconfig.json文件，并添加以下配置：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"jsx": "react",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true
}
}
步骤 7：安装 React 和 React DOM
安装React和React DOM库：
yarn add react react-dom -D
步骤 8：创建入口文件
创建一个名为“src/index.tsx”的入口文件，并添加以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
return <h1>Hello, world!</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
步骤 9：创建 Webpack 配置文件
创建一个名为“webpack.config.js”的Webpack配置文件，并添加以下配置：
const path = require('path');
module.exports = {
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
};
步骤 10：运行 Webpack
运行Webpack以打包代码：
yarn webpack
步骤 11：创建 HTML 文件
创建一个名为“public/index.html”的HTML文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
步骤 12：启动本地服务器
运行以下命令启动本地服务器：
yarn serve
现在你可以通过访问http://localhost:3000在浏览器中查看你的React应用程序。
为什么选择从零开始构建React项目？
虽然CRA对于快速入门很有用，但从零开始构建项目提供了以下优势：
- 完全自定义： 你可以完全控制项目的配置和结构，满足你的特定需求。
- 更好的理解： 你可以深入了解Webpack和React的内部机制，从而提高你的整体Web开发技能。
- 更轻松的升级： 当你需要升级依赖项时，手动升级流程让你可以更好地控制和灵活性。
常见问题解答
-
为什么使用Yarn 2而不是NPM？
Yarn 2速度更快，并提供诸如并行安装和缓存等高级功能。 -
为什么使用TypeScript？
TypeScript提供了类型检查，可以提高代码质量并减少错误。 -
如何调试React应用程序？
可以使用React Developer Tools等工具在浏览器中进行调试。 -
如何部署React应用程序？
可以使用Netlify、Vercel或Heroku等服务将你的应用程序部署到生产环境。 -
如何保持我的项目更新？
定期更新依赖项，并留意React生态系统中的最新趋势和最佳实践。
结论：
通过从零开始构建React项目，你可以获得对项目配置和结构的完全控制，同时加深对Webpack和React的理解。虽然这需要额外的努力，但它为定制、灵活性、代码质量和长期维护奠定了坚实的基础。
