本文导航

React应用入门（一）搭建最简单的基本应用

开发环境配置

nvm

nvm 的意思是Node Version Manager,即管理nodejs的工具.

强烈建议：使用nvm管理nodejs的版本,这样可以在本机安装多个版本的nodejs，并可以方便的进行切换

安装

brew install nvm

检查是否安装成功

nvm -v

查看具体帮助

nvm help

npm

npm的意思是Node Package Manager，是一个管理JavaScript包的工具。后端的同学可以简单理解为Maven，但是它要比Maven的功能弱一些，Maven还提供打包功能

安装

通过nvm进行安装，安装最新的LTS(Long Term Support-长期支持)版本的nodejs

nvm install --lts

上述命令可以通过以下命令找到

nvm help

检查是否安装成功

node -v
npm -v

WebStrom

开发工具选择WebStrom

搭建应用

初始化应用

• 创建应用根目录并初始化Git仓库

  mkdir badminton-community
  git init

• 创建.gitignore文件，内容如下

  vim .gitignore

  node_modules
  dist
  *.iml
  *.xml
  .idea/

• 在应用根目录下通过npm init初始化项目

  npm init

  根据提示填写即可，如果不知道填什么，也可以一路回车下来.

  完成之后，会发现应用根目录下多了一个package.json的文件

• 在根目录中创建public 和 src文件夹

  mkdir public
  mkdir src

  public文件夹内放置静态资源文件，还有index.html文件，React会用这个页面渲染我们的程序。

  src文件夹放置我们开发React应用时自己写的代码

• 在public文件夹中创建index.html,内容如下

  cd public
  vim index.html

  <!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />
      <title>React Starter</title>
    </head>
  
    <body>
      <div id="root"></div>
      <noscript> You need to enable JavaScript to run this app. </noscript>
      <script src="../dist/bundle.js"></script>
    </body>
  </html>

  bundle.js是我们利用Webpack打包之后的文件名字

配置Babel

Babel是一个编译器。主要的作用是：它能让你编写的新版本 JavaScript 代码，在旧版浏览器中依然能够工作

为当前项目安装Babel

在项目根目录下执行

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

preset-react是将React的JSX转为能在旧版浏览器中运行的JavaScript代码

—save-dev的意思是作为开发时的依赖，如果不加—save-dev意思是运行时所需要的依赖

npm install官方文档

添加Babel配置文件

根据Babel官方文档配置这一节内容，官方建议Babel的配置文件名字为babel.config.json

vim babel.config.json

内容如下

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

其他更详细的内容参考完整的Babel官方文档

配置Webpack

Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具，后端的同学可以简单理解为它是Maven中打包插件的实现

对Webpack不熟悉的同学，可以进入官网，在这几个tab下进行切换，可以快速找到自己需要的内容

为当前项目安装Webpack

npm install webpack webpack-cli webpack-dev-server style-loader css-loader babel-loader html-webpack-plugin --save-dev

webpack-dev-server 为你提供了一个基本的 web server，并且具有 live reloading(实时重新加载) 功能

添加Webpack配置文件

配置文件的名字webpack.config.js

vim webpack.config.js

内容如下

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    server: 'http',
    port: 3000,
    host: "local-ipv4",
    hot: true,
    open: true,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ]
};

关于配置文件中每个选项的含义以及其使用方法，可以在上面那张图标红的tab那里寻找，例如devServer在tab配置下，plugins在tabPlugin下，style-loader等在tabLoader下。都可以找到对应的用法，这里不做过多解释

书写React代码

安装React

在项目根目录下执行

npm install react react-dom react-hot-loader

在src文件夹下创建index.js

vim index.js

内容如下

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

这几行的代码表示我们的React应用应该挂载在哪个DOM节点下，是挂载在我们刚才创建的index.html的id为root的DOM节点下。

ReactDOM.render 是一个函数，它告诉 React 要渲染什么以及在哪里渲染它——在这种情况下，我们正在渲染一个名为 App 的组件，它在 ID 为root的 DOM 节点处渲染

在src文件夹下创建App.js

vim App.js

内容如下

import React, { Component} from "react";
import { hot } from "react-hot-loader";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App">
        <h1> Hello, World! </h1>
      </div>
    );
  }
}

export default hot(module)(App);

这里使用了react-hot-loader，在修改代码的时候，自动重新编译

在src文件夹下创建App.css

vim App.css

内容如下

.App {
  margin: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}

启动

以上代码书写完毕，我们就完成了一个最基本的应用。现在利用webpack-dev-server来进行启动和部署

在package.json的scripts中添加如下内容

"start": "webpack-dev-server --mode development",

运行

npm run start

启动成功之后浏览器会自动打开

打包

需要在webpack.config.js中配置html-webpack-plugin，在上面我们都已经配置过了。所以这里添加一条命令即可

在package.json的scripts中添加如下内容

"build": "webpack --mode development",

运行

npm run build

会发现项目根目录下多了dist文件夹，文件夹内有index.html和bundle.js

项目结构

项目仓库地址

仓库地址

拓展

如果你有以下疑问想问我：

1. bundle.js和index.html怎么一起工作的，很神奇啊?
2. 为什么webpack打包之后的bundle.js可以运行在浏览器中？
3. package.json 和 package-lock.json的区别？/ package-lock.json的作用是什么?

诸如此类的问题，可以自行Google，因为我也不是专业的前端，我实在不知道怎么解答。我只是会用而言，至于里面的前端原理，我是真的不清楚了

参考资料

• 参考文章
• Webpack官网
• npm CLI Commands