关于React的入门级安装和最浅显解释
春节临近,办公室里半片空位,半片浮嚣。
想到将放假,屏幕上的代码也都变成了雀跃的小虫。
无法专心了。
终于还是强迫自己读了半篇文档,写了几坨程序。
这次记录的是关于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的入门级安装和最浅显解释的更多相关文章
- 谈谈React Native环境安装中我遇到的坑
谈谈React Native环境安装 这个坑把我困了好久,真的是接近崩溃的边缘...整理出来分享给大家,希望遇到跟我一样问题的小伙伴能尽快找到答案. 首先,这是在初始化App之后,react-nati ...
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react 工程起步 安装chrome 开发调试工具 react developer tools 及初建一个react 项目...
1.安装react 开发工具 1.下载 chrome react developer tools 下载地址:https://pan.baidu.com/s/1eSZsXDC 下载好是 ...
- React Developer Tools 安装小提示
1,在google市场里边,安装React Developer Tools之后,发现是开启的,但是按下F12后,并没有发现react选项 2,后来通过查资料,发现必须是运行react项目的时候,才出现 ...
- React&Webpack 环境安装
react的安装依赖nodejs,nodejs安装下载可从http://nodejs.org/en/下载 1. 环境安装 1.1 创建lib目录 cd E:\ReactLib 1.2 ...
- windows 下android react native详细安装配置过程
写在前面: 在网上搜了很多安装配置文档,感觉没有一个真的跟我安装的过程一模一样的,东拼拼西凑凑,总算是装好了,我不会告诉你,断断续续,我花了两天时间...一到黑屏报错就傻眼,幸好在react群里遇到了 ...
- React学习、安装及QuickStart
首先看的是这个页面 http://www.cocoachina.com/webapp/20150721/12692.html 这里有个内容差不多的版本(精华版):http://www.cnblogs. ...
- react项目运行安装依赖报错:Error: pngquant failed to build, make sure that libpng-dev is installed
安装报错之后.但是安装libpng-dev.发现找不到.通过多方查找.准备重新安装pngquant.命令如下: npm install --save-dev pngquant安装成功并运行成功
- 【openstack】cloudkitty组件,入门级安装(快速)
@ 目录 前言 架构 安装 配置 启动 检索并安装 CloudKitty 的仪表板 前言 什么是CloudKitty? CloudKitty是OpenStack等的评级即服务项目.该项目旨在成为云的退 ...
随机推荐
- KKT条件的物理意义(转)
最好的解释:https://www.quora.com/What-is-an-intuitive-explanation-of-the-KKT-conditions# 作者:卢健龙链接:https:/ ...
- Linux就业技术指导(五):Linux运维核心管理命令详解
一,Linux核心进程管理命令 1.1 ps:查看进程 1.1.1 命令解释 功能说明 ps命令用于列出执行ps命令的那个时刻的进程快照,就像用手机给进程照了一张照片.如果想要动态地显示进程,就需要使 ...
- __init__和__new__,以及self
__new__: 每次实例化类的时候会默认先执行__new__,进行实例化类. 如果想改变默认__new__行为,可以对它进行自定义,必须有返回实例. __init__: 对实例化的类进行初始化, ...
- haproxy 参数说明
说明: 1.haproxy的配置段有"global","defaults","listen","frontend"和&q ...
- spine
spine 英 [spʌɪn] 美 [spaɪn] n.脊柱;[动,植] 棘,刺(如刺猬和海胆的刺);鱼鳍的刺;植物上的刺
- gridview 级联删除、dataset
gridview编辑列(不使用控件绑定数据源)需要如下代码:<asp:GridView ID="GridView1" runat="server" Aut ...
- 零基础学习hadoop到上手工作线路指导(中级篇)
此篇是在零基础学习hadoop到上手工作线路指导(初级篇)的基础,一个继续总结. 五一假期:在写点内容,也算是总结.上面我们会了基本的编程,我们需要对hadoop有一个更深的理解: hadoop分为h ...
- IIS 设置404页面 显示系统找不到指定的文件
1.原因就是IIS的普通用户没有访问404页面的权限,造成了自定义404页面无法显示.只需要将user用户组具有读的权限即可.
- mysql contact_ws函数 字符串被截断问题
contact函数默认有字符串长度限制,解决方法:SET group_concat_max_len = 20000这个参数设置一下就好了
- Laravel 加载自定义的 helpers.php 函数
Laravel 提供了很多 辅助函数,有时候我们也需要创建自己的辅助函数. 必须 把所有的『自定义辅助函数』存放于 bootstrap 文件夹中. 并在 bootstrap/app.php 文件的最顶 ...