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知识点的更多相关文章

  1. React知识点总结1

    最近打算把react知识点总结下: React特点 1.虚拟DOM 在内存中操作DOM,在内存中创建数据结构,只会更新有差异的地方 2.组件化 页面分成若干个组件,每个组件包含逻辑结构和样式 组件仅包 ...

  2. react知识点汇总

    ①uncontrolComponent & controlComponent If your form is incredibly simple in terms of UI feedback ...

  3. react 知识点2

    从 render 函数可以看出来,组件内部是通过 this.props 的方式获取到组件的参数的,如果 this.props 里面有需要的属性我们就采用相应的属性,没有的话就用默认的属性. 那么怎么把 ...

  4. react 知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  5. react知识点总结(持续更新。。。)

    一.webpack 1. 什么是以及为什么要使用webpack 现在的网页功能越来越丰富,所需要的JavaScript和模块也会很多,为开发更加简洁,出现了以下方法,如模块化,scss,typescr ...

  6. React知识点整理

    面试题:三大框架中数据绑定实现上有何绑定? 一.概述:是Facebook维护的一个构建用户界面的JS库,核心很精简,但是生态圈扩展很大. React:MVVM框架 React-Router:路由 Re ...

  7. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  8. React实战一

    目录 1. 搭建环境 2. React知识点 1. 组件 1.1 定义一个组件 1.2 组合与拆分组件 1.3 组件传值 1.4 state 1.5 生命周期函数 1.6 无状态组件 1.7 List ...

  9. React 解析/ 第二节 使用 Reac

    官方脚手架 create-react-app React 提供了一个官方的命令行工具(CLI)—— create-react-app,是专门用于快速搭建单页面应用(SPA)的脚手架,它基于 Webpa ...

随机推荐

  1. Pwn-pwn-100

    题目地址http://www.whalectf.xin/files/2779dd8a2562a1d5653c5c6af9791711/binary_100 32位 ,没有防护 上IDA 很简单的栈溢出 ...

  2. Paper | Blind Quality Assessment Based on Pseudo-Reference Image

    目录 1. 技术细节 1.1 失真识别 1.2 得到对应的PRI并评估质量 块效应 模糊和噪声 1.3 扩展为通用的质量评价指标--BPRI 归一化3种质量评分 判断失真类型 加权求和 2. 总结 这 ...

  3. C++ 基于rapidjson对json字符串的进行序列化与反序列化

    json字符串的解析以封装在我们开发过程中经常见到, 尤其在socket通信上面, 在一次项目中碰到json字符串的进行解析, 而公司有没有封装好的库, 于是就自己基于开源的库进行了一次封装, 接下是 ...

  4. 'GL_EXT_shader_framebuffer_fetch' : extension is not supported

    在使用安卓模拟器加载Flutter应用时, 提示'GL_EXT_shader_framebuffer_fetch' : extension is not supported: D/skia (1404 ...

  5. js通过值获取数组对象对应下标

    var nn = [ { a: 'ss' },{ a: 'aa' },{ a : '11'},{ a: '33' },{ a: '88' } ] 我要怎么获取 a = 33的下标 var index ...

  6. XStream处理XML用法

    参考:https://www.yiibai.com/xstream/xstream_json.html 1.简介: XStream是一个简单的基于Java库,Java对象序列化到XML,反之亦然(即: ...

  7. Navicat Premium 12.0.22 安装与破解

    一.安装 Navicat Premium 12.0.22的下载链接:https://pan.baidu.com/s/1swRY_fwIZfufdxDZj3hDyw 密码:09k8 安装步骤就是一路向下 ...

  8. Quartz的配置与使用

    什么是Quartz Quartz是OpenSymphony开源组织在Job scheduling领域的开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独使用.Quartz可以用来创建简单或为 ...

  9. MySQL出现Waiting for table metadata lock的原因以及解决方法(转)

    MySQL在进行alter table等DDL操作时,有时会出现Waiting for table metadata lock的等待场景.而且,一旦alter table TableA的操作停滞在Wa ...

  10. .net core 3.0中的Json API

    在.net core 3.0中,内置了一套新的json api,主要用于去除asp.net core对json.net的依赖,同时也提供了更好的性能(直接处理 UTF-8,而无需转码到 UTF-16) ...