文档章节

React.js入门必须知道的那些事

LuckyWinty
 LuckyWinty
发布于 2016/03/21 14:58
字数 1378
阅读 1803
收藏 3

首先,react的官网:https://facebook.github.io/react/

react中文网更新速度比较慢,建议还是看英文官网来学。起步还是比较容易的,语法也比较好理解。但是,这里面也有一些地方需要特别注意的。

一、本地文件直接引入,会报跨域请求错误

其实,react官网也有说明的:

官网上解释说Chrome等浏览器直接引入本地文件是需要在服务器上运行的。

这样的话,解决方法有两个:

①用webstorm编辑器打开,因为webstorm本来打开html文件就是在服务器环境上运行的。

②安装Tomcat。然后把项目放在Tomcat中的webapps目录下,然后再bin目录下找到startup.bat,启动Tomcat。启动成功之后,通过http://localhost:8080/+项目名称/+具体目录下的具体文件,即可访问。

二、用react.js进行项目开发

1、最简单的就是不用配置任何环境,直接引入相关的js文件,然后就可以参照官网的例子去写。这里就不说了。

2、用gulp+browserify,在node的环境下,用require的语法进行模块化的方式开发。这里重点说一下具体的流程。

简单了解gulp:gulp是一个nodejs的streaming构建工具,所谓的streaming大致意思就是把构建流程想成一个个链接的管道(pipe),是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩、图片压缩、JS合并、SASS同步编译并压缩CSS、服务器控制客户端同步刷新。

简单了解browserify:

browserify 命令运行时以一个 JavaScript 文件作为输入,通过分析文件中对于 require 方法的调用来递归查找所依赖的其他模块。把输入文件所依赖的所有模块文件打包成单个文件并输出。如“browserify greet.js > bundle.js”把 greet.js 及其所依赖的模块文件打包成单个 bundle.js 文件。

具体步骤:

①新建一个项目

②以管理员身份打开命令行,进入到项目目录中。或者直接在项目目录中打开git bash

③开始安装环境:输入npm init

④安装gulp    输入 npm install --save-dev gulp

备注:

如果输入npm安装插件比较慢的话,可以用cnpm,cnpm是一个淘宝镜像。

直接安装cnpm clie

npm install -g cnpm

或者完全不需要安装也行

alias cnpm="npm --registry=http://registry.cnpmjs.org --cache=$HOME/.npm/.cache/cnpm"

# Or alias it in .bashrc or .zshrcecho '\n#alias for cnpm\nalias cnpm="npm --registry=http://registry.cnpmjs.org \
  --cache=$HOME/.npm/.cache/cnpm"'
 >> ~/.zshrc && source ~/.zshrc

具体可以参考网址:http://blog.fens.me/nodejs-cnpm-npm/

⑤定义gulpfile文件

var gulp = require('gulp');

gulp.task('default',function(){

//将你的默认任务代码放在这里

});

⑥测试gulp是否安装成功,输入gulp(注意,必须要定义好gulpfile文件)

结果:

⑦以上成功了之后,继续安装browserify相关工具

输入:npm install browserify --save

输入:npm install reactify --save   //用于转换的插件

输入:npm install vinyl-source-stream --save

这个插件的作用就是把browserify生成的代码打包成gulp能理解的代码。因为browserify的一些输出不能直接用在gulp上面,通过这个插件就可以把browserify的输出作为gulp的输入,通过pipe连接起来。

⑧安装react相关模块

npm install react --save

npm install react-dom --save

npm install react-addons --save

至此,需要安装的东西都装完了。下面看看一个具体的例子:

完整目录截图:

备注项目中的commentBox就是打包后的js文件,这个文件是一个包含了react.js框架代码的文件,所以只需要引入一个文件就可以。但是在实际开发中,这样也存在一些问题:

1、暂时用不到的代码也会被打包,这样就导致体积大,首次加载的速度慢

2、只要一个文件模块更新,整个文件缓存失败

Broserify的解决方案:entry point,入口点技术。就是说每个入口点打包一个文件,两个入口点的相同移来模块单独打包为common.js,但同时增加了依赖维护成本

这个后续再继续深入了解。

gulpfile文件相关配置及说明:

index.html

最终把组件们集合到一起的commentBox.jsx


浏览器常见报错:

①:Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

解决方法:应该要把你要渲染的那个组件exports出来。

例如:

var React = require('react/addons');

var CommentBox = React.createClass({

  render: function() {

    return (

      <div className="commentBox">

        <h1>Comments</h1>

        <CommentList />

        <CommentForm />

      </div>

    );

  }

});

module.exports = CommentBox;

②Warning: require('react/addons') is deprecated. Access using require('react-addons-{addon}') instead.

解析:这个警告是因为这是旧的写法,新版本已经不建议这样写。

解决方法:

var React = require('react');

var addons = require('react-addons');

使用addons的时候就 var classSet = addons.classSet;

更多详细解释请查看:https://www.npmjs.com/package/react-addons



完整demo已上传至:https://github.com/LuckyWinty/React-demo

PS:本人为react学习新手,本文有说得不对的地方,欢迎留言指正。另外,本人冀望与react大神交流学习,欢迎大家给我提供一些学习的建议。


© 著作权归作者所有

LuckyWinty
粉丝 10
博文 24
码字总数 32476
作品 0
广州
前端工程师
私信 提问
深入理解 React JS 中的 setState

此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用。 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 setState 的表现好像有点怪异,和理...

达摩院法师
2018/01/05
0
0
推荐 10 个 ReactJS 入门资源

React 是发展非常迅速的 JavaScript 库,可以让开发者更快的构建用户界面。自从 React 发布以来,已经快速成为了大多数人寻求的框架类别之一。即使 React 已经非常简单易用,但是还有很多社区...

oschina
2015/06/04
32.6K
22
前端使用puppeteer 爬虫生成《React.js 小书》PDF并合并

1、 是什么? : 官方出品的 库 仓库 官方介绍: 您可以在浏览器中手动执行的大多数操作都可以使用完成! 生成页面的屏幕截图和。 抓取并生成预渲染内容(即“”)。 自动化表单提交,测试,键...

轩辕Rowboat
2018/08/30
0
0
React.js 2016 最佳实践 徬梓阅读 1584收藏 71

译者按:近几个月React相关话题依旧火热,相信越来越多的开发者在尝试这样一项技术,我们团队也在PC和移动端不断总结经验。2016来了,这应该是 React走向成熟的一年,不管你是新手,还是已经...

我家有宝
2016/01/27
86
0
React.js实现原生js拖拽效果及思考

一、起因&思路 不知不觉,已经好几天没写博客了。。。近来除了研究React,还做了公司官网。。。 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨。所以就用react来实现这个拖拽效果...

LuckyWinty
2016/03/29
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

SpringBoot Actuator监控应用

微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现异常如何快速定位便成...

zw965
10分钟前
3
0
高性能最终一致性框架Ray之基本概念原理

一、Actor介绍 Actor是一种并发模型,是共享内存并发模型的替代方案。 共享内存模型的缺点: 共享内存模型使用各种各样的锁来解决状态竞争问题,性能低下且让编码变得复杂和容易出错。 共享内...

程序员修BUG
10分钟前
3
0
如何去掉子集合功能中的按钮?

解决方案: 1、找到子集合字段 2、打开字段详细信息,在辅助配置里面进行配置 加入JEPaaS技术交流群,了解更多

JEPaaS云平台
12分钟前
3
0
创龙TI KeyStone C66x多核定点/浮点DSP TMS320C665x + Xilinx Artix-7 FPGA处理器;

广州创龙结合TI KeyStone系列多核架构TMS320C665x及Xilinx Artix-7系列FPGA设计的TL665xF-EasyEVM开发板是一款DSP+FPGA高速大数据采集处理平台,其底板采用沉金无铅工艺的6层板设计,适用于高...

Tronlong创龙
14分钟前
3
0
hbuilder打包常用android权限配置

常用android权限配置 - 开启相机权限 - 允许程序通过WiFi或移动基站的方式获取用户错略的经纬度信息 - 允许程序通过GPS芯片接收卫星的定位信息 - 允许程序获取模拟定位信息,一般用于帮助开发...

小草先森
14分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部