业余学习react 学习记录
http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习)
1.搭建环境:npm 使用 React
npm install -g cnpm --registry=https://registry.npm.taobao.org $ cnpm install -g create-react-app --全局安装create-react-app模块
$ create-react-app my-app
$ cd my-app/ --"my-app" :项目名
$ npm start -- webpack 命名 运行
2. 命名行:
npm start ; npm run build ; npm test ; npm run eject ;
3.ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点 (eg)
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
4.JSX 语法
var arr = [
<h1>Hello world!</h1>,
<h2>React</h2>,
];
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>{arr}</div>,
<div>{names.map(function (name)
{ return <div>Hello, {name}!</div>} )}
</div>,
document.getElementById('example')
);
5.组件 :组件类的第一个字母必须大写,组件类只能包含一个顶层标签,否则也会报错
var HelloMessage=React.createClass({
/*组件类都必须有自己的render方法,用于输出组件*/
render:function () {
return <h1>{this.props.name}</h1>;
}
}); ReactDOM.render(
/*变量 HelloMessage 就是一个组件类*/
<HelloMessage name='JOIN'/>,
document.getElementById('example1')
)
6.this.props.children (它表示组件的所有子节点)、
7.验证组件MyTitle 属性PropTypes
var MyTitle = React.createClass({
propTypes: {
/*title屬性是字符串且必須的*/
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
8.this.state
业余学习react 学习记录的更多相关文章
- react 学习与使用记录
相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...
- react学习记录(一)
一.React是什么 声明式写法(强调结果,命令式编程强调过程) 组件化 一次学习,随处编写(多种应用场景,web程序,原生手机应用,系统应用,命令行工具) 二.为什么学习react 大公司加持-fa ...
- 从0开始学习react(一)
本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...
- 【JAVASCRIPT】React学习- 杂七杂八
摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...
- React学习(4)——向服务器请求数据并显示
本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...
- React 学习笔记:1-react 入门
接下来的项目里有用到react,最近一段时间主要关注于react 的学习.大部门都是网上的资料,学习整理并记录,加深记忆. React 是Facebook推出的用来构建用户界面的JavaScript库 ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- React 学习,需要注意几点
最近要开始学习 React 框架了,在学习的过程中,个人作为一个新手觉得需要注意的一些问题 小细节有以下几点: 1:在JSX语法当中,如果遇到 HTML 标签(以 < 开头),将用 HTML 规 ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- Cookie与Session的区别与联系及生命周期
Cookie与Session的区别与联系及生命周期 一.Session与Cookie介绍 这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会 ...
- centos7 双网卡设置(先NAT和后桥接)
摘要:VMware中搭建一台虚拟机192.168.161.5(NAT转发) 首先在VM虚拟机设置里面添加一块网卡适配器 设置为桥接模式 完成后等待自动配置 此时出现多了一个ens37 和本地网段一样的 ...
- 2.cocos设置背景图片
在bool HelloWorld::init()中加入如下代码 auto bg = Sprite::create("1.jpg"); if (bg) { bg->setPos ...
- vi命令常用操作
一.vi的操作模式 vi提供两种操作模式:输入模式(insert mode)和指令模式(command mode).在输入模式下,用户可输入文本资料.在指令模式下,可进行删除.修改等各种编辑动作. ...
- JS的解析与执行过程—全局预处理阶段之命名冲突的处理策略
有如下代码: <body> <script> alert(f); function f() { console.log("fff"); } var f = ...
- 二:2.1 字符串与循环中的 while
字符串:字符串是以单引号或双引号括起来的任意文本 创建字符串: str1 = "sunck is a good man!" str3 = "sunckis a nice ...
- Maven学习总结(20)——Maven pom.xml配置再体会
Maven的pom.xml配置文件详解 <!--父项目的坐标.如果项目中没有规定某个元素的值,那么父项目中的对应值即为项目的默认值. 坐标包括group ID,artifact ID和 vers ...
- ESP8266学习笔记4:ESP8266的SmartConfig
今天花了将近一天的时间来研究ESP8266的SmartConfig功能,这个应该算是wifi云产品的标配.这篇文章先把SmartConfig操作一遍,我还写了还有一篇文章梳理了物理层的详细协议,点击这 ...
- 用select标签实现跳转
用select标签实现跳转 一.用select标签实现跳转JavaScript代码 我们经常有遇到需要用select标签跳转到新网页的情况,dw生成的代码太复杂,那么有没有精简的代码得以实现呢?经过仔 ...
- js -- canvas img 封装
鼠标 1.操作canvas 中的 img. 右键放大缩小,左键移动img. 2.拖动input type= range 改变图片的透明度 html 代码 <!DOCTYPE html> ...