react知识点
http://www.cocoachina.com/webapp/20150721/12692.html
http://blog.csdn.net/slandove/article/details/50748473
http://www.oschina.net/news/76862/react-component-life-circle
注意:
下面我们在script标签里面编写代码,来输出Hello,world,代码如下:

这里需要注意的是,react并不依赖jQuery,当然我们可以使用jQuery,但是render里面第二个参数必须使用JavaScript原生的getElementByID方法,不能使用jQuery来选取DOM节点。
下面,我们来编写第一个组件Greet,有一个name属性,然后输出hello + name的值,代码如下:

看到这段代码,接触过AngularJS的朋友们是不是有一种熟悉的感觉,不过这里有几点需要注意:
1)获取属性的值用的是this.props.属性名
2)创建的组件名称首字母必须大写。
3)为元素添加css的class时,要用className。
4)组件的style属性的设置方式也值得注意,要写成style={{width: this.state.witdh}}。
react知识点的更多相关文章
- React知识点总结1
最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...
- react知识点汇总
①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...
- react 知识点2
从 render 函数可以看出来,组件内部是通过 this.props 的方式获取到组件的参数的,如果 this.props 里面有需要的属性我们就采用相应的属性,没有的话就用默认的属性. 那么怎么把 ...
- react 知识点
1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...
- react知识点总结(持续更新。。。)
一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...
- React知识点整理
面试题:三大框架中数据绑定实现上有何绑定? 一.概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大. React:MVVM框架 React-Router:路由 Re ...
- 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>
Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...
- React实战一
目录 1. 搭建环境 2. React知识点 1. 组件 1.1 定义一个组件 1.2 组合与拆分组件 1.3 组件传值 1.4 state 1.5 生命周期函数 1.6 无状态组件 1.7 List ...
- React 解析/ 第二节 使用 Reac
官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...
随机推荐
- LG4341/BZOJ2251 「BJWC2010」外星联络 Trie
问题描述 LG4341 BZOJ2251 BZOJ需要权限号 题解 字符串的性质:一个字符串\(s\)所有的字串,等于\(s\)所有后缀的前缀. 枚举这个字符串的每一个后缀,将其插入一个\(\math ...
- Redis系列1——概述
1. 简介 Redis,key-value内存存储的数据库,全称“”Remote Dictionary Service(Sever)“”,默认端口号:6379 Redis是一个开源的使用ANSI C语 ...
- 在Ubuntu18.04.2LTS上安装电子书软件
在Ubuntu18.04.2LTS上安装电子书软件 一.前言 很多时候我们想在Ubuntu上阅读电子书,但是Ubuntu上的软件对于这种阅读的界面支持并不好,因此我们需要自己加入喜欢的阅读器 ...
- Tomcat配置https访问
1.利用JDK自带的keytools生成一个p12类型的证书 keytool -genkey -storetype PKCS12 -alias tomcat -keyalg RSA -keysize ...
- Vue全选和全不选
HTML代码: <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ...
- 关于 BenchmarkDotNet
using BenchmarkDotNet.Attributes; using BenchmarkDotNet.Order; using System.Reflection; namespace Be ...
- S-T-E-A-M Science Technology Engineering Art Mathematics 五种思维模式
S-T-E-A-M五个英文字母分别代表 Science 科学,Technology 技术,Engineering 工程,Art 艺术以及 Mathematics 数学.它们并不是简单地整合原来的分科体 ...
- python基础之Matplotlib库的使用一(平面图)
在我们过去的几篇博客中,说到了Numpy的使用,我们可以生成一些数据了,下面我们来看看怎么让这些数据呈现在图画上,让我们更加直观的来分析数据. 安装过程我就不再说了,不会安装的,回去补补python最 ...
- qt 界面去掉系统边框2.0版
之前的一版存在bug.如果将鼠标放移动到界面内某个可点击的widget上(如:QPushButton)上,按住鼠标左键不放,界面可能会出现界面非预期移动的问题. 那是因为当鼠标移动到可点击的widge ...
- NIO你真正了解多少?
解释一下java.io.Serializable接口 类通过实现 Java.io.Serializable 接口以启用其序列化功能.未实现此接口的类将无法使其任何状态序列化或反序列化. IO操作最佳实 ...