创建反应应用程序 - Javascript (1)

📌 相关文章

📜 创建反应应用程序 - Javascript (1)

📅 最后修改于: 2023-12-03 15:07:11.899000 🧑 作者: Mango

创建 React 应用程序 - Javascript

什么是 React？

React 是一个用于构建用户界面的 JavaScript 库。它专注于提高开发人员在创建可重用 UI 组件时的效率和组件的可维护性。React 采用了组件化的开发方式，简化了前端开发中界面复杂性的处理问题。

React 应用程序由组件树构成，每个组件都可以有自己的状态和生命周期方法。在每个时间点，React 只会更新它需要更新的内容。

为什么使用 React？

高效：React 的 Virtual DOM 和优化算法使得在页面渲染时只会更新需要更新的部分，大大提升了性能表现。
组件化：React 组件化的开发方式，让开发人员可以将界面拆分为若干个自包含的组件进行开发，使得代码更加清晰易懂，方便重用。
生态丰富：React 不仅有自己的核心库，还拓展了许多周边库，如路由、状态管理等，可以方便的进行组合和拓展，满足不同业务场景的需求。

如何创建一个 React 应用程序？

使用 Create React App

Create React App 是官方推荐的一种创建 React 应用的方式。它是一个零配置的工具，可以快速帮助你搭建一个 React 应用的基础结构。

安装

使用 npm 安装 create-react-app：

npm install -g create-react-app

创建一个应用程序

使用 create-react-app 命令创建一个新的 React 应用程序：

create-react-app my-app
cd my-app
npm start

此时，浏览器将自动打开 http://localhost:3000，你将看到一个默认的 React 应用程序。

使用 React + Webpack

如果你需要更多的自定义选项，可以使用 React + Webpack 的方式来创建你的 React 应用程序。这需要你手动配置 Webpack。

步骤

创建一个新的目录：
```
mkdir my-app
cd my-app
```
初始化 npm 项目：
```
npm init -y
```
安装 React 和 React DOM：
```
npm install react react-dom
```

安装 Webpack 和相应的插件：

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

在根目录下创建一个名为 webpack.config.js 的文件：

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    port: 3000
  }
};

在根目录下创建一个名为 src 的文件夹，用于存放你的代码。

在 src 文件夹下创建一个名为 index.js 的文件，作为入口文件：

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>
  }
}

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

在根目录下创建一个名为 index.html 的文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

执行 webpack 命令打包代码:
```
npm run build
```
执行 webpack-dev-server 命令在浏览器中预览你的应用程序：

npm run start

现在你的应用程序应该已经在浏览器中正常运行了。