ReactJS - 创建一个React应用程序

你好，未来的React开发者们！我很高兴能引导你们开始这段激动人心的旅程，创建你们第一个React应用程序。作为一位有着多年计算机科学教学经验的人，我可以向你们保证，React不仅功能强大，而且学习起来也很有趣。那么，让我们开始吧！

ReactJS - Creating a React Application

React是什么？

在我们开始编码之前，先来了解一下React是什么。React是一个流行的JavaScript库，用于构建用户界面。它由Facebook开发，现在被许多大公司如Netflix、Instagram和Airbnb使用。你可以将React看作是一套乐高积木，你可以用它轻松构建复杂的Web应用程序。

开始

要创建一个React应用程序，我们需要一些工具。如果你之前从未使用过这些工具，不用担心——我们会一起完成每个步骤！

准备工作

Node.js和npm（Node包管理器）
一个代码编辑器（我推荐Visual Studio Code）

如果你还没有安装这些，请花点时间安装它们。这就好比在做饭之前准备好厨房！

使用Rollup打包器

让我们从使用Rollup创建一个React应用程序开始。Rollup是一个JavaScript模块打包器，它将小块代码编译成更大、更复杂的代码。

第一步：设置项目

首先，让我们为我们的项目创建一个新的目录并初始化它：

mkdir my-react-app
cd my-react-app
npm init -y

这将创建一个新文件夹并初始化一个新的Node.js项目。这就好比为我们的小屋打基础！

第二步：安装依赖

现在，让我们安装必要的包：

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

不要被这些长名字吓到。把它们想象成我们React食谱中的食材！

第三步：创建配置文件

让我们创建两个重要的文件：

rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

这个文件告诉Rollup如何打包我们的应用程序。这就好比给厨师提供如何准备菜肴的指示。

.babelrc：

{
"presets": ["@babel/preset-react"]
}

这个文件配置Babel，帮助将现代JavaScript翻译成旧版浏览器能理解的版本。

第四步：创建我们的React组件

现在，让我们创建我们的第一个React组件！创建一个新文件src/App.js：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>欢迎来到我的第一个React应用程序！</p>
</div>
);
}

export default App;

这是我们的主要组件。它就像是我们节目的明星！

接下来，创建src/index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

这个文件负责将我们的App组件渲染到HTML中。

第五步：创建HTML文件

创建一个新文件public/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的React应用</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

这是我们React应用程序将要挂载的地方。

第六步：在package.json中添加脚本

更新你的package.json以包含以下脚本：

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

这些脚本将帮助我们构建和运行我们的应用程序。

第七步：构建和运行应用程序

现在，让我们让我们的作品活起来！运行：

npm run build

这将创建我们的打包JavaScript文件。要查看您的应用程序，请在Web浏览器中打开public/index.html。恭喜！您刚刚使用Rollup创建了您的第一个React应用程序！

使用Parcel打包器

现在我们已经看到了如何使用Rollup，让我们尝试另一个流行的打包器：Parcel。Parcel以其零配置方法而闻名，这使得入门变得非常简单。

第一步：设置项目

让我们创建一个新项目：

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

第二步：安装依赖

安装React和Parcel：

npm install react react-dom
npm install --save-dev parcel-bundler

第三步：创建我们的React组件

创建src/App.js：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>这个应用是用Parcel打包的。</p>
</div>
);
}

export default App;

创建src/index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

第四步：创建HTML文件

创建src/index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的Parcel React应用</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

注意我们是如何直接链接到我们的index.js文件的。Parcel会为我们处理打包！

第五步：在package.json中添加脚本

更新你的package.json：

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

第六步：运行应用程序

现在，让我们启动我们的应用程序：

npm start

Parcel将自动在浏览器中打开您的应用程序。您所做的任何更改都会立即反映出来！

要为生产环境构建：

npm run build

这将创建优化后的文件在dist目录中。

比较Rollup和Parcel

以下是我们在本文中使用过的两个打包器的快速比较：

特性	Rollup	Parcel
配置	需要配置文件	零配置
速度	快速	非常快速
打包大小	通常较小	略大
学习曲线	较陡	平缓
灵活性	高度可定制	较少可定制

这两个打包器都有各自的优势，选择哪一个通常取决于项目的具体需求。

结论

恭喜！现在您已经使用Rollup和Parcel都创建了React应用程序。记住，千里之行始于足下，而您已经迈出了进入React开发激动人心世界的第一个步伐。

随着您继续学习和成长，您会发现React为Web开发打开了一个全新的世界。这就像学习画画——起初，您可能会挣扎于基本形状，但很快您就能创作出杰作！

继续练习，保持好奇心，最重要的是，享受乐趣！React是一个强大的工具，同时使用起来也是一种享受。快乐编码！

Credits: Image by storyset