妹子UI里面有React的相关组件与用法:http://amazeui.org/react/components

React官方网站:https://facebook.github.io/react/docs/getting-started.html

React中文网站:http://www.css88.com/react/docs/getting-started.html

1、react两种注释:
这个是在react里面的。
{/* 要注释的内容 */}
在代码行里面用
/* */

2、html中的class在react中用className,html中的for在react中用htmlFor,行内样式书写规范style={{color:'red'}}

3、添加自定义属性之前添加data-前缀:<div data-custom-attribute="foo" />

4、react中的表达式的用法:

  在className中直接可以判断什么状态用什么样式:className={2 > 1 ? 'class-a' : 'class-b'}

  在模块中直接根据条件来判断具体用哪一个组件:{window.isLoggedIn ? <Nav /> : <Login />}

5、html转义:后台传过来的数据带页面标签的是不能直接转义的,具体转义的写法如下:

var content='<strong>content</strong>';    

React.render(
<div dangerouslySetInnerHTML={{__html: content}}></div>,
document.body
);

6、传播属性和延伸属性:

如果提前知道属性的话直接写就好了,用传播属性即可:var component = <Component foo={x} bar={y} />;

如果属性是后来动态添加的话上面的那种形式就不太适合了,需要用延伸属性:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
//或者
var props = { foo: x, bar: y };
var component = <Component { ...props } />;

7、在React中大多以JSX方式书写。JSX是一个语法糖,最终都会被解析为纯JavaScript代码。React虽然也可以直接使用javascript书写,但是官网推荐支持的是JSX方式。要把带有JSX语法的代码转化为纯Javascript代码,在script标签中要加上type="text/jsx",并引入JSXTransformer.js文件即可。这种方式不适用于生产环境,生产环境需要提前编译转换好。用npm全局安装react-tools即可:npm install -g react-tools

8、组件开发:开发组件的时候可以将相关的组件关联在一起。如父组件里面有多个子组件的情况,可以如下方式操作:  

var Form = MyFormComponent;

var App = (
<Form>
<Form.Row>
<Form.Label />
<Form.Input />
</Form.Row>
</Form>
); //这样你只需将子组件的ReactClass作为其父组件的属性:
var MyFormComponent = React.createClass({ ... }); MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

  

react基本知识点合集的更多相关文章

  1. REACT相关资料合集

    ===实例=== https://github.com/jesseskinner/react-webpack-demo ===UI组件库=== https://github.com/amazeui/a ...

  2. javascript 易错知识点合集

    为什么 typeof null === 'object' 原理是这样的,不同的对象在底层都表示为二进制,在JavaScript中二进制前三位都为0的话会被判断为 object 类型, null 的二进 ...

  3. 【python系统学习08】for循环知识点合集

    for循环 for简介 [循环]:就是依照某些我们编写的特定规则,重复的做一件事. 当你需要重复的"搬砖"的时候,可以用for循环进行遍历,让机器循环的帮你去"搬砖&qu ...

  4. 【视频合集】极客时间 react实战进阶45讲 【更新中】

    https://up2.v.sharedaka.com/video/ochvq0AVfpa71A24bmugS5EewhFM1553702519936.mp4 01 React出现的历史背景及特性介绍 ...

  5. es6常用基础合集

    es6常用基础合集 在实际开发中,ES6已经非常普及了.掌握ES6的知识变成了一种必须.尽管我们在使用时仍然需要经过babel编译. ES6彻底改变了前端的编码风格,可以说对于前端的影响非常巨大.值得 ...

  6. 掘金 Android 文章精选合集

    掘金 Android 文章精选合集 掘金官方 关注 2017.07.10 16:42* 字数 175276 阅读 50053评论 13喜欢 669 用两张图告诉你,为什么你的 App 会卡顿? - A ...

  7. react-native 入门资源合集

    # 了解react-native React Native enables you to build world-class application experiences on native pla ...

  8. HCNP学习笔记之史上最全华为路由器交换机配置命令大合集

    先来一张思科和华为命令的对照表: 史上最全华为路由器交换机配置命令大合集,熟练掌握下面的华为路由器交换机配置知识点,你只需花几分钟的时间就能明白华为路由器交换机配置.交换机的配置命令等等. 华为路由器 ...

  9. SAP成都研究院2018年总共87篇技术文章合集

    2018年很快就要结束了.Jerry在2017年年底准备开始写这个公众号时,给自己定的目标是:2018年至少保证每周发布一篇高质量的文章.如今2018年就快过去了,高质量与否需要大家来反馈,至少从量上 ...

随机推荐

  1. CRUD全栈式编程概述

    业务场景 CRUD,从数据驱动的角度几乎所有的的业务都是在做这样的事情.  几乎所有的操作都是在做对表的增删改查.  假设我们将数据库数据规个类:  分为基础/配置数据和业务/增长数据,或者说静态数据 ...

  2. 优先队列(priority_queue)的cmp,POJ(2051)

    sort()函数的cmp为函数,priority_queue的cmp为类,具体写法是: struct Node { int i,j; } node[]; struct cmp { bool opera ...

  3. 2018.8.6 学习 log4j.properties 配置文件

    配置文件的话第一步当然是解决乱码问题 Eclipse中properties文件中文乱码解决方式 打开eclipse的properties文件时你会发现,其中部分中文注释乱码了,下面将写出如何设置pro ...

  4. 2017.10.3 JDBC访问数据库的建立过程

    1·JDBC访问数据库,其访问流程: (1)注册驱动 (2)建立连接(Connection) (3)创建数据库操作对象用于执行SQL语句 (4)执行语句 (5)处理执行结果 (6)释放资源 2·注册驱 ...

  5. sql查询字段值长度判断是否18位

    SELECT * FROM 表名 WHERE LENGTH(字段)= OR 字段为null IS NULL OR 字段为空='' SELECT * FROM 表名 WHERE LENGTH(字段)&g ...

  6. Vue路由讲解

    1>router-link和router-view组件 2>路由配置 a.动态路由 import Home from "@/views/Home.vue"; expor ...

  7. 整合ssm集成框架

    第一步:配置pom.xml 该代码放在<dependencies>里面 <!--spring 所需要的jar包 web.aop.jdbc.webmvc--> <!--1. ...

  8. 多重网格方法(Multigridmethod)

    原文链接 多重网格方法是解微分方程的方法.这个方法的好处是在利用迭代法收敛结果的时候速度特别快.并且,不管是否对称,是否线性都无所谓.它的值要思想是在粗糙结果和精细结果之间插值. 前面介绍了Gauss ...

  9. 第47章 QR-Decoder-OV5640二维码识别—零死角玩转STM32-F429系列

    第47章     QR-Decoder-OV5640二维码识别 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.y ...

  10. 第一个AngularJS指令

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...