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

2018-12-08 admin

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

环境

在构建一个 React 项目时必须要明确知道你的机器安装了 Node.jsNPM,(不过,不要紧现在的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.jsindex.html 文件,在这里我们使用 webpackbabel 来构建我们的 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 项目构建与开发入门

原文链接:https://zhuanlan.zhihu.com/p/51872710

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-47572.html

文章标题:起始:React 项目构建的最小单元

相关文章
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
css布局的各种FC简单介绍:BFC,IFC,GFC,FFC
什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context,块...
2018-05-17
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
React Native v0.13.3 发布,Facebook开源框架
React is a JavaScript library for building user interfaces. Just the UI: Lots of people use React as the V in MVC. Since...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
回到顶部