起始：React 项目构建的最小单元

icepy
1,093 阅读3分钟

我很喜欢 JSX ，它的灵活性给我带来了足够的想象力，但是从优化的角度来说，它也并没有像 Template 那么好处理，可我依然喜欢它。这是一篇从零开始入门 React 的小书，没有华丽的词藻，只是用心为初学者提供一份可读的参考，如有兴趣的话，不妨听我娓娓道来。

环境

在构建一个 React 项目时必须要明确知道你的机器安装了 Node.js 和 NPM，（不过，不要紧现在的Node.js安装包都自带了NPM），你只要一路 Next 完成安装即可。目前 Facebook 也提供了一个脚手架 github.com/facebook/cr… 来快速启动一个 React工程，但我们至少在学习的阶段中并不会用到它，而是从零开始配置一个最简单的 React 项目，学习这个过程。

在本地创建一个项目：

# 创建一个目录
$ mkdir myapp 

# 进入这个目录
$ cd myapp

# 快速创建一个package.json文件
$ npm init -y

# 安装 react react-dom 到项目依赖
$ npm i react react-dom --save

# 安装 工具 到开发依赖
$ npm i webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

# 创建一个 babel 的配置文件
$ touch .babelrc

在根目录中创建 index.js 和 index.html 文件，在这里我们使用 webpack 和 babel 来构建我们的 React 项目。

index.js: 

// 空

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./dist/bundle.js?v=2"></script>
</body>
</html>

配置

.babelrc 做为 babel 的配置文件，我们需要完成 preset-react ，它是用来转换 JSX 的关键。

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

package.json 属于 Node.js 的一个配置文件，目前基本上前端也使用它来管理各种模块，利用 NPM SCRIPTS 我们可以来完成各式各样的终端运行。

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "",
    "build": "webpack --config ./webpack.config.js --mode=development"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [],
  "author": "icepy",
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0"
  },
  "dependencies": {
    "react": "^16.5.2",
    "react-dom": "^16.6.3",
  }
}

webpack.config.js 做为 Webpack 的配置文件，主要用于打包你的 React 代码，这是目前主流的打包解决方案。

var fs = require('fs')
var path = require('path')
var webpack = require('webpack')
var ROOT = process.cwd();
var PATHROOT = path.resolve(__dirname);

module.exports = {
  entry: "./index.js",
  devtool: 'source-map',
  output: {
    path: PATHROOT + '/dist',
    filename: 'bundle.js',
    sourceMapFilename: 'bundle.map.js'
  },
  module: {
    rules: [
      { test: /\.js[x]?$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        ENV: JSON.stringify(process.env.MODE)
      }
    })
  ]
}

上述基本上做为一个最小的启动单元，我们需要完成这些工作。

构建

现在！我们可以创建一些 Code 来验证我们的想法，如果你也使用 VSCode 的话，可以在根目录 index.js 文件中书写下你的第一行代码：

import * as React from "react";
import * as ReactDOM from "react-dom";

是的，你的第一行 Code 就是导入 React 相关的库 : )。

让我们来看一个 Hello 该如何写：

function Home(){
  return (
    <div>
      Hello
    </div>
  )
}

ReactDOM.render(
  <Home />,
  document.getElementById("app"),
);

然后在终端运行：

$ npm run build
$ python -m SimpleHTTPServer 8089

在浏览器中访问 http://127.0.0.1:8089/ ，如图：

我们需要掌握什么

当你已经从 github.com/welearnmore… 了解到运行一个最小单元 React 项目的构成，那么其实你应该能感受到，最终我们需要掌握些什么，如：

  • Node.js 环境与 NPM（yarn） 包管理
  • Webpack 与 babel（可选）【TypeScript不需要它】构建
  • single page web application
  • 数据驱动
  • 设计方式和编程理念
  • 实用工具

结语

通过 JSX 的设计，在多端共存的情况下，可以设计出来更多的渲染器承载它的运行，这也是为什么 Facebook 能尝试 React Native 这样的跨平台解决方案的原因。我们用一个最小的单元展示了 React 的风采，虽然它很简单，但我希望这对你接下来的学习能激发足够的兴趣。

Simple React: github.com/welearnmore…

Simple React Book: 小书介绍 - React 项目构建与开发入门

avatar
文章
阅读
粉丝