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 学习记录的更多相关文章

  1. react 学习与使用记录

    相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. i ...

  2. react学习记录(一)

    一.React是什么 声明式写法(强调结果,命令式编程强调过程) 组件化 一次学习,随处编写(多种应用场景,web程序,原生手机应用,系统应用,命令行工具) 二.为什么学习react 大公司加持-fa ...

  3. 从0开始学习react(一)

    本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...

  4. 【JAVASCRIPT】React学习- 杂七杂八

    摘要 记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...

  5. React学习(4)——向服务器请求数据并显示

    本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...

  6. React 学习笔记:1-react 入门

    接下来的项目里有用到react,最近一段时间主要关注于react 的学习.大部门都是网上的资料,学习整理并记录,加深记忆. React 是Facebook推出的用来构建用户界面的JavaScript库 ...

  7. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  8. React 学习,需要注意几点

    最近要开始学习 React 框架了,在学习的过程中,个人作为一个新手觉得需要注意的一些问题 小细节有以下几点: 1:在JSX语法当中,如果遇到 HTML 标签(以 < 开头),将用 HTML 规 ...

  9. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

随机推荐

  1. vue2.0-transition配合animate.css

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. VGA接口时序约束

    SF-VGA模块板载VGA显示器DA转换驱动芯片AVD7123,FPGA通过OUPLLN连接器驱动ADV7123芯片产生供给VGA显示器的色彩以及同步信号.SF-CY3核心模块与SF-VGA子模块连接 ...

  3. c#(asp.net) 如何计算两个日期之间相隔天数

    1.DateTime t1 = Convert.ToDateTime("2006-1-6"); DateTime t2 = Convert.ToDateTime("200 ...

  4. 传说用户发来的请求是在JIoEndpoint的accept函数中接收的,是tomact与外界交互的分界点

    传说用户发来的请求是在JIoEndpoint的accept函数中接收的, 这是tomact与外界交互的分界点,所以来研究一下, >>>>>>>>> ...

  5. 实战c++中的string系列--string的替换、查找(一些与路径相关的操作)

    今天继续写一些string操作. string给我们提供了非常多的方法,可是每在使用的时候,就要费些周折. 场景1: 得到一个std::string full_path = "D:\prog ...

  6. 集群通信组件tribes之用法

    上面已经对tribes的内部实现机制及原理进行了深入的剖析.在理解它的设计原理后看看怎样使用tribes.整个使用相当简单便捷,仅仅须要四步: ① 定义一个消息对象,因为这个消息对象是要在网络之间传递 ...

  7. vim 基础学习之替换

    替换命令substitute可以用来查找跟替换操作. :[range]s[ubstitute]/{pattern}/{string}/[flags] [count] range-命令作用范围(缺省的情 ...

  8. ASP.Net MVC默认目录结构

    1.Controllers 保存处理URL请求的Controller类 2.Models 保存操纵业务与数据对象的类 3.Views 保存UI模板页面 4.Scripts 保存Javascript库文 ...

  9. 45. Express 框架 静态文件处理

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 提供了内置的中间件 express.static 来设置静态 ...

  10. js---跨域的问题

    一:跨域一般的报错情况  一般来说,如果你在开发中需要进行跨域操作(从一个非同源网站发送请求获取数据),一般而言,你在浏览器控制台看到的结果为: 二:同源策略 说到跨域就不得不提“同源策略”. 那么, ...