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

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

无法专心了。

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

这次记录的是关于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. Javascript系列:总体理解

    js是一个脚本客户端(浏览器)语言.和sql html类似.多练习. 没有排错的经验,弱类型语言,浏览器解释执行,出错也不会报错 预备 <!DOCTYPE html PUBLIC "- ...

  2. 吴裕雄 python神经网络 水果图片识别(2)

    import osimport numpy as npimport matplotlib.pyplot as pltfrom skimage import color,data,transform,i ...

  3. webdriver屏幕截图(python)

    webdriver对当前页面进行截图,截取的是当前页面的全图,不论页面有多长,有两种截图方法 1.get_screenshot_as_file(XXX) 2.save_screenshot(XXX) ...

  4. Mysql操作日志

    任何一种数据库中,都有各种各样的日志.MySQL也不例外,在Mysql中有4种不同的日志.分别错误日志.二进制日志.查询日志和慢查询日志.这些日志记录着Mysql数据库不同方面的踪迹.下文将介绍这4种 ...

  5. Web开发: servlet的session为null?

    servlet的session(会话)显示为null,一般是web.xml中配置不对或者在浏览器输入的url不正确造成的. web.xml配置如下: <servlet> <servl ...

  6. OpenCL、OpenGL、OpenAL

    一:OpenCL (全称Open Computing Language,开放运算语言)是第一个面向异构系统通用目的并行编程的开放式.免费标准,也是一个统一的编程环境,便于软件开发人员为高性能计算服务器 ...

  7. pyhon模块之日志模块

    #Auther Bob#--*--coding:utf-8--*-- import logging #python一共有5个级别的日志,debug.info.warning.error.critica ...

  8. XAMPP下apache部署网站,多个虚拟机(空间)配置

     之 前在 Mac 下一直使用 MAMP 搭建本地 php 环境,因为其强大的组合配置以及方便的 UI 操作.因为公司的电脑是 Windows 的,有时候需要搭建 php 环境来调试一些小东西方便自己 ...

  9. 2-string相关函数

    string真的很好用,希望通过逐步的学习逐渐掌握的string的用法: 1. append() -- 在字符串的末尾添加字符 2. find() -- 在字符串中查找字符串 4. insert() ...

  10. 粘性Service

    粘性Service就是一种服务 把他删去他又会马上创建 原理是在这个服务中去开启线程不断检测此服务是否存在如果不存在,咋就会重新创建 import android.app.Activity; impo ...