关于React的入门级安装和最浅显解释

Posted 2020-06-13

春节临近，办公室里半片空位，半片浮嚣。

想到将放假，屏幕上的代码也都变成了雀跃的小虫。

无法专心了。

终于还是强迫自己读了半篇文档，写了几坨程序。

这次记录的是关于React，最浅显的内容。

 

———— 我是望眼欲穿的分割线 ————

 

Step 1：npm init

按照向导填写各个字段，最后生成package.json文件。

容易出错的是：name的值不要和包包同名。

比如我们后续需要使用npm安装几个包包：browserify react reactify ...

则name值如果写作“browserify”或“react”，此依赖会安装失败！

提示如下：

npm WARN install Refusing to install react as a dependency of itself

在OS X里一个依赖安装失败会Block其他依赖的安装，

Ubuntu里只会失败当前包的安装，不会Block其他包。

总之，name不要和包名等关键字重名就对了。

 

Step 2：npm install --save-dev blah blah blah

package.json文件完成后，即可安装所需的依赖了：

sudo npm install --save-dev browserify react reactify react-dom uglify-js

这里的安装不要使用全局（-g）安装。只装在当前目录里即可。

多个依赖之间是空格。

安装成功后，需要手动在package.json文件里的scripts属性中做个配置：

（假设package.json文件里的main文件是index.js）

"build": "browserify --debug index.js > myBundle.js",

"build-dist": "NODE_ENV=production browserify index.js | uglifyjs -m > myBundle.min.js",

browserify 是一个JS文件的打包工具，网上很多介绍，此不赘述。

任何包含require语句的javascript文件运行Browserify都会自动打包所有的依赖项。

只不过它只支持.js文件。很专一。

这个Step还没完，在package.json里还要添加一个属性：

"browserify": {
  "transform": [
    "reactify"
  ]
}

好了，这个Step完了。

 

Step 3：npm run build 

这个命令就创建了打包文件myBundle.js。

然后在index.html页面里引用之即可。

接下来，对index.js的每一次修改，都要run一次，页面才会有更新。

补充半句，

webpack也可以完成browserify的任务，

并且它不仅仅支持.js文件，很强大。不解释了。

 

Step 4：现在可以在index.js里美美的写React代码了

先require：

var React = require("react");

var ReactDOM = require(‘react-dom‘);

初次接触React代码对于用惯了jQuery的人来说不适应。

但如果写过AngularJS就容易接受了。

不仅想起了两年前写AngularJS时的痛苦，一身冷汗！

好在经过修炼，再新奇的JS写起来也不再冒冷汗了。

复述有助于自我理解，以下是对原理的通俗解释，可忽略：

jQuery对事件的监听会绑定在DOM元素上，

事件每次发生，都会对DOM有所动作。

而React通过“状态”来监听事件，每当事件发生时，状态改变，

然后在render属性里将最新状态渲染到页面上。

因此，React会通过创建UI组件，

将事件监听、状态修改、DOM结构都集成在一个组件里，

对于需要多个组件的大型WEB应用来说，这种结构更方便维护。

 

Step 5：React.createClass({ ... })创建UI组件

其中一个自带属性 getInitialState 要初始化各个“状态”：

注意这个函数每次创建组件时只运行一次。

getInitialState: function() {

  return {

    text: "",

    closed: false

  }

}

然后我们可以自定义自己的监听函数，比如：

myHandleChange: function(event) {

  this.setState({

    text: event.target.value,

    closed: true

  })

}

每次执行myHandleChange函数时都会在setState里更新状态，

这里是重写了text的值和closed的值。

如何触发myHandleChange函数，就不是React的问题了，

比如将其写在input元素的onChange属性里就可以在输入时触发。

 

Step 6：最后将UI组件render到页面里

ReactDOM.render(<TweetBox />, document.body);

render函数接收的两个参数，一个是带尖尖括号的组件变量名，

另一个是容器，这里是document.body

但似乎官方不建议直接使用body作容器，

最好创建一个body下的容器元素。

 

Step 7：render函数里奇异的return

这个要单独提出来讲一下，是因我个人看它不顺眼。。。

在render函数里的return返回的是一段HTML结构，

但它的写法既不同于JS原生语法，也不遵循HTML语法，

据说这货叫作JSX什么的，Whatever。

总之，这里要注意的是4点：

a：return 后面的内容都放在小括号里

b：这段HTML结构必须包含在一个最外层元素中，不可出现两个并列的最外层元素。

c：结构里的class要写成“className”

d：引用组件内的变量时，不要带引号，例如 onChange={this.myHandleChange}

 

———— 我是赤裸裸的分割线 ————

 

以上是最浅显的内容。

但也足够支持我写一坨小程序了。

准备放假了呢。