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

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

无法专心了。

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

这次记录的是关于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}

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

以上是最浅显的内容。

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

准备放假了呢。

关于React的入门级安装和最浅显解释的更多相关文章

  1. 谈谈React Native环境安装中我遇到的坑

    谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...

  2. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  3. react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...

    1.安装react 开发工具 1.下载    chrome      react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC  下载好是 ...

  4. React Developer Tools 安装小提示

    1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...

  5. React&Webpack 环境安装

    react的安装依赖nodejs,nodejs安装下载可从http://nodejs.org/en/下载 1.   环境安装 1.1      创建lib目录 cd E:\ReactLib 1.2   ...

  6. windows 下android react native详细安装配置过程

    写在前面: 在网上搜了很多安装配置文档,感觉没有一个真的跟我安装的过程一模一样的,东拼拼西凑凑,总算是装好了,我不会告诉你,断断续续,我花了两天时间...一到黑屏报错就傻眼,幸好在react群里遇到了 ...

  7. React学习、安装及QuickStart

    首先看的是这个页面 http://www.cocoachina.com/webapp/20150721/12692.html 这里有个内容差不多的版本(精华版):http://www.cnblogs. ...

  8. react项目运行安装依赖报错:Error: pngquant failed to build, make sure that libpng-dev is installed

    安装报错之后.但是安装libpng-dev.发现找不到.通过多方查找.准备重新安装pngquant.命令如下: npm install --save-dev pngquant安装成功并运行成功

  9. 【openstack】cloudkitty组件,入门级安装(快速)

    @ 目录 前言 架构 安装 配置 启动 检索并安装 CloudKitty 的仪表板 前言 什么是CloudKitty? CloudKitty是OpenStack等的评级即服务项目.该项目旨在成为云的退 ...

随机推荐

  1. KKT条件的物理意义(转)

    最好的解释:https://www.quora.com/What-is-an-intuitive-explanation-of-the-KKT-conditions# 作者:卢健龙链接:https:/ ...

  2. Linux就业技术指导(五):Linux运维核心管理命令详解

    一,Linux核心进程管理命令 1.1 ps:查看进程 1.1.1 命令解释 功能说明 ps命令用于列出执行ps命令的那个时刻的进程快照,就像用手机给进程照了一张照片.如果想要动态地显示进程,就需要使 ...

  3. __init__和__new__,以及self

    __new__: 每次实例化类的时候会默认先执行__new__,进行实例化类. 如果想改变默认__new__行为,可以对它进行自定义,必须有返回实例.   __init__: 对实例化的类进行初始化, ...

  4. haproxy 参数说明

    说明: 1.haproxy的配置段有"global","defaults","listen","frontend"和&q ...

  5. spine

    spine 英 [spʌɪn] 美 [spaɪn]  n.脊柱;[动,植] 棘,刺(如刺猬和海胆的刺);鱼鳍的刺;植物上的刺

  6. gridview 级联删除、dataset

    gridview编辑列(不使用控件绑定数据源)需要如下代码:<asp:GridView ID="GridView1" runat="server" Aut ...

  7. 零基础学习hadoop到上手工作线路指导(中级篇)

    此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结. 五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解: hadoop分为h ...

  8. IIS 设置404页面 显示系统找不到指定的文件

    1.原因就是IIS的普通用户没有访问404页面的权限,造成了自定义404页面无法显示.只需要将user用户组具有读的权限即可.

  9. mysql contact_ws函数 字符串被截断问题

    contact函数默认有字符串长度限制,解决方法:SET group_concat_max_len = 20000这个参数设置一下就好了

  10. Laravel 加载自定义的 helpers.php 函数

    Laravel 提供了很多 辅助函数,有时候我们也需要创建自己的辅助函数. 必须 把所有的『自定义辅助函数』存放于 bootstrap 文件夹中. 并在 bootstrap/app.php 文件的最顶 ...