React项目创建指南：三种方式，从零开始开发旅程

React项目创建的三个方法

1. 直接在浏览器中引入

最简单的方法是直接在浏览器中引入React的两个核心包：react和react-dom。这种方法非常适合小型项目或快速原型设计。

<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>

之后，您就可以在HTML文件中直接使用React了。

<div id="root"></div>

<script>
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>Hello, world!</h1>);
</script>

2. 使用官方脚手架create-react-app

create-react-app是React官方提供的脚手架工具，可以快速创建一个新的React项目。

npx create-react-app my-app

执行此命令后，create-react-app会自动安装所有必要的依赖项并创建一个新的项目目录。

cd my-app
npm start

这将启动开发服务器，您就可以在浏览器中查看您的项目了。

3. 使用Webpack创建

Webpack是一种构建工具，可以将多个JavaScript文件打包成一个文件。这种方法比较复杂，但它提供了更多的灵活性。

首先，您需要安装Webpack及其相关的依赖项。

npm install --save-dev webpack webpack-cli webpack-dev-server

然后，您需要创建一个Webpack配置文件。

webpack.config.js

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

最后，您就可以使用Webpack来构建您的项目了。

webpack

这将生成一个名为bundle.js的文件，其中包含了您的所有JavaScript代码。

React框架的两个核心包

React框架的两个核心包是react和react-dom。

• react ：包含了React的核心功能，如组件、状态和生命周期方法。
• react-dom ：提供了将React组件渲染到真实DOM的方法。

这两个包是任何React项目的基础。

结论

在这篇文章中，我们介绍了三种从零开始创建React项目的方式。无论是直接在浏览器中引入、使用官方脚手架create-react-app还是使用Webpack创建，您都可以选择最适合自己项目的方法。同时，我们还简要介绍了React框架的两个核心包：react和react-dom。希望这些信息对您有所帮助，祝您在React项目的开发之旅中一路顺畅！