[React 2021新书]102、项目配置

辣味儿
331 阅读6分钟

React新手村

可以使用一下几种方式配置一个新的React项目：

  • 使用Script标签引入, 使用标签引入React, React DOM 和 Babel三个Javascript支持包。
  • 使用Create React App脚手架, 一个生成React项目的工具项目，常用。
  • 使用Webpack手动配置, 使用Webpack手动配置React项目也是可以的.

使用Script引入标签

对初学者来说最简单,可以让你马上体验和学习React的相关特性。

📌 使用Script标签和CDN，配置一个新的React项目.

  1. 创建一个js文件 app.js ，包含以下代码:

    // app.js

class Application extends React.Component {
  render() {
    return (
      <div>
      App
      </div>
    );
  }
}

ReactDOM.render(<Application />, document.getElementById('app'));

  2. 然后创建一个html文件 index.html 包含以下代码:

    <!-- index.html -->

<html>
  <body>
  <!-- This is where our app will live -->
    <div id="app"></div>

  <!-- These are script tags we need for React, JSX and ES2015 features -->
  <script src="https://cdn.bootcdn.net/ajax/libs/react/15.0.0/react.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/15.0.0/react-dom.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script type="text/babel" src="app.js"></script>
</body>

</html>

    文件列表如下：

    -| app.js
-| index.html

  3. 在终端运行 npx http-server -p 5000 :

    npx http-server -p 5000

    服务已经启动 http://localhost:5000.

  4. 使用浏览器访问 http://localhost:5000 将显示： App.

这种方式的缺点是代码会在运行时临时编译，导致运行缓慢，优点是配置简单，用来学习还是不错的。请不要在生产环境使用！

使用Create React App脚手架

Create React App脚手架由Dan Abramov开发，使用它可以快速创建和运行一个App应用.

📌 使用Create React App脚手架和npx快速创建React应用

只需一行命令就可以达到目的：

  1. 创建名为my-app的应用：

    npx create-react-app my-app

    要求Node>=8.10，NPM >= 5.6

  2. 进入项目

    cd my-app

  3. 运行项目:

    yarn start

    服务已经启动 http://localhost:3000.

  4. 使用浏览器访问 http://localhost:3000 将显示：

cra.png

create-react-app 在github上是一个非常活跃的项目，它可以帮助初学者学习，也可以帮你创建真实的项目。是否使用它处决于你要如何配置你的项目。事实上，create-react-app可以应付大多数场景，直到有一天，你对React足够熟练，不再需要它。 官方文档传送门: github.com/facebook/cr…

手动配置

使用Webpack可以降低手动配置Reat项目的难度，我们一步一步演示应该怎么做：

  • 安装Node.js. 使用Node.js安装各个不同版本的包。
  • Webpack. 下载webpack包并为它创建一个配置文件。
  • Babel. Babel为JavaScript添加更多功能，这些功能可能尚不支持。其中一个功能就是将JSX转化为原生 JavaScript。

📌 -1- 创建一个Webpack项目

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Webpack 也有代码转换功能：

  • JSX转为原生JavaScript. 我们的React项目包含JSX语法。
  • SCSS转为CSS. SCSS 已经被使用了很长时间，让CSS 更易于管理。它提供了诸如模块、变量和功能函数之类的东西。随着Web技术的不断发展，现在许多功能可以由原生CSS提供。

  1. 现在开始创建一个Webpack项目。 先创建文件夹和文件：

    mkdir src
mkdir dist
cd src
touch index.js
cd ..
cd dist
touch index.html

  2. 在项目的更目录运行npm init -y 初始化项目:

    npm init -y

    运行后会自动生成一个配置文件package.json:

    -| src/
---| index.js
-| dist/
---| index.html 
-| package.json

  3. 在 index.html 文件中添加以下内容:

    <!DOCTYPE html>
 <html>
   <head>
     <title>Hello App</title>
   </head>
   <body>
     <div>
       <h1>Hello App</h1>
     </div>
     <script src="./bundle.js"></script>
   </body>
 </html>

    bundle.js 在哪？不用担心，该文件将由webpack自动生成.

  4. 在 index.js 文件中添加以下内容:

    console.log('hi from app')

  5. 运行 npm install 命令安装webpack所需的包，这些将自动写入到package.json配置文件中:

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

  6. 为webpack创建一个配置文件 webpack.config.js :

    touch webpack.config.js

  7. 在 webpack.config.js 文件中添加以下内容:

    const path = require('path');
module.exports = {
   entry: path.resolve(__dirname, './src/index.js'),
   output: {
     path: path.resolve(__dirname, '/dist'),
     filename: 'bundle.js'
   },
   devServer: {
     contentBase: path.resolve(__dirname, './dist')
   }
 };

    entry 入口指使用哪个模块来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的. Output 出口指在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

  8. 在 package.json 的scripts模块中配置 start 脚本:

    "start": "webpack serve --mode development"

  9. 然后在命令行运行npm start 命令执行:

    npm start

    运行完后会有如下提示

    Project is running at http://localhost:8080/.

  10. 现在打开浏览器访问Project is running at http://localhost:8080/. 打开开发工具, 在命令行console看到输出 index.js:1 hi from app。

📌 -2- 添加 Babel支持

React依赖JSX撰写页面代码，让页面代码变得更简单。Webpack将JSX转化成为原生的JavaScript。可以使用Babel或者其他技术来进行转换，我们把这个叫做_preset_：

  1. 创建一个配置文件 .babelrc, 添加以下内容:

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

  2. 安装Babel preset相关的依赖包:

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

  3. 打开 webpack.config.js.文件，在 entry 元素后添加以下内容:

    module: {
   rules: [
     {
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: ['babel-loader'],
     },
   ],
 },
 resolve: {
   extensions: ['*', '.js', '.jsx'],
 },

    该配置告诉webpack将查找扩展名为_.js_ 或 .jsx 的文件，通过运行babel-loader命令将JSX转换为原生JavaScript。

📌 -3- 添加 React

此时一切都已设置完毕，您只需要向其中添加 React。

  1. 安装React所需的相关包:

    npm install --save react react-dom

  2. 找到 index.js 文件并修改为以下内容:

     import React from 'react';
 import ReactDOM from 'react-dom';
  
 const title = 'Your React app';
  
 ReactDOM.render(
   <div>{title}</div>,
   document.getElementById('app')
 );

  3. 找到 index.html 文件并添加以下标签:

    <div id="app"></div>

    React会查找这个标签并在这里创建React app。完整的代码如下：

     <!DOCTYPE html>
 <html>
   <head>
     <title>Hello App</title>
   </head>
   <body>
     <div id="app"></div>
     <script src="./bundle.js"></script>
   </body>
 </html>

  4. 在命令行运行 npm start :

    npm start

  5. 打开浏览器访问 http://localhost:8080. 访问结果:

    Your React app

    使用Webpack和Babel配置React项目成功。

    我们再添加HMR功能。每当JS文件修改时，Webpack会重新编译项目并马上看到修改结果。

  6. 使用 npm install安装:

    npm install --save-dev react-hot-loader

  7. 修改 webpack.config.js 配置文件:

    • 在顶部新增引入:

      const webpack = require('webpack');

    • 在 devServer 元素前增加:

      plugins: [new webpack.HotModuleReplacementPlugin()],

    • 在 devServer 元素中添加属性:

      hot: true,

  8. 重启项目查看HMR是否生效.

    npm start

  9. 修改 index.js 文件的内容:

    const title = 'Your React app';

    变成:

    const title = 'Your awesome React app';

    文件保存后，注意查看命令行和浏览器 http://localhost:8080 的变化----命令行会rebuild项目，而新的结果会在浏览器显示 Your awesome React app

示例代码

avatar
文章
阅读
粉丝