一、HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
1、要渲染 HTML 标签,只需在 JSX 里使用小写字母的标签名。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

2、要渲染 React 组件,只需创建一个大写字母开头的本地变量。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

3、React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
二、
1、在标签内部的注释需要花括号
2、在标签外的的注释不能使用花括号
例:

ReactDOM.render(
/*注释 */
<h1>detanx {/*注释*/}</h1>,
document.getElementById('example')
);

三、JSX中不能使用if else,可以使用三元运算符代替
例:

<h1 style={mystyle}>{1 > 2? 'true':'false'}</h1>

四、react组件
例:

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello World!</h1>;
}
});
ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

需要向组件传递参数,可以使用 this.props 对象
例:

var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
/*方法二
function HelloMessage(props){
  return <h1>Hello,{props.name}</h1>;
}*/
ReactDOM.render(  <HelloMessage name="Runoob" />, document.getElementById('example') );

通过 getDefaultProps() 方法为 props 设置默认值

var HelloMessage = React.createClass({
getDefaultProps: function() {
return {
name: 'Runoob'
};
},
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
}); ReactDOM.render(
<HelloMessage />,
document.getElementById('example')
);

name 属性通过 this.props.name 来获取。
注意:在添加属性时, class 属性需要写成 className ,for 属性需要写成 htmlFor ,
这是因为 class 和 for 是 JavaScript 的保留字。
五、复合组件
例:

var WebSite = React.createClass({
  render: function() {
  return (
    <div>
      <Name name={this.props.name} />
      <Link site={this.props.site} />
    </div>
  );
 }
}); var Name = React.createClass({
  render: function() {
  return (
    <h1>{this.props.name}</h1>
    );
  }
}); var Link = React.createClass({
  render: function() {
   return (
    <a href={this.props.site}>
      {this.props.site}
    </a>
   );
  }
}); ReactDOM.render(
  <WebSite name="detanx" site=" http://www.baidu.com" />,
  document.getElementById('example')
);

注意:ReactDOM.render(<组建名 />);组件名是用单标签< />即带斜杠"/"的尖括号包围的

react基础&JSX基础的更多相关文章

  1. React中最基础的jsx语法

    import React, { Component } from 'react'; class App extends Component { render() { return ( <div ...

  2. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  3. react的新手基础知识笔记

    <!DOCTYPE html> <html> <head> <script src="../build/react.js">< ...

  4. 前端笔记之React(一)初识React&组件&JSX语法

    一.React项目起步配置 官网:https://reactjs.org/ 文档:https://reactjs.org/docs/hello-world.html 中文:http://react.c ...

  5. React中JSX的理解

    React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...

  6. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  7. [.net 面向对象编程基础] (3) 基础中的基础——数据类型

    [.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...

  8. [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换

    [.net面向对象编程基础] (4)基础中的基础——数据类型转换 1.为什么要进行数据转换? 首先,为什么要进行数据转换,拿值类型例子说明一下, 比如:我们要把23角零钱,换成2.30元,就需要把整形 ...

  9. [.net 面向对象编程基础] (5) 基础中的基础——变量和常量

    [.net面向对象编程基础]  (5) 基础中的基础——变量和常量 1.常量:在编译时其值能够确定,并且程序运行过程中值不发生变化的量. 通俗来说,就是定义一个不能改变值的量.既然不能变动值,那就必须 ...

随机推荐

  1. Chap8:加密货币TOP100[《区块链中文词典》维京&甲子]

    根据2018年1月15日CoinMarketCap的加密货币市值排名编写,这里介绍TOP10,具体请参考<区块链中文词典>维京&甲子 01.比特币/Bitcoin/BTC 一种点对 ...

  2. >>>>>>>> [ovs][libvirt] virt-xml ovs-vsctl

    查看可用的参数: [root@vrouter1 tong]# virt-xml --add-device --network=? |grep source source source_mode sou ...

  3. odoo中Python实现小写金额转换为大写金额

    自动将小写的金额数值转换为大写,方便记录 class project_parm(models.Model): def IIf(self, b, s1, s2): if b: return s1 els ...

  4. day5_函数_判断小数

    def check_float(s): ''' #这个函数的作用就是判断传入的字符串是否是合法的消失 :param s: 传入一个字符串 :return: True/False ''' s = str ...

  5. 配置ASM以及创建恢复目录

    本次配置ASM沿用了搭建RAC的环境配置,系统选用CENTOS6.8 首先本地配置YUM,安装GRID集群件所需要的RPM包 [root@rac01 Packages]# cd /etc/yum.re ...

  6. 《linux 进程管理》- ps/top/kill/nice

    一:进程简述 二:ps 查看进程 语法 ps * -A 列出所有进程,和 -e 同等效果 * -a 列出不和本终端有关系的所有进程 * -w 显示加宽,可以显示较多信息 * -u 显示有效使用者相关的 ...

  7. redis的基本介绍

    redis是什么? redis是一种菲关系型数据库,存储key-value类型的数据. redis支持的数据类型 这里所说的数据类型其实就是value对应的数据类型.一共有五种: String 1.S ...

  8. 海思QT4.8.0开发总结

    1.QT4.8.0移植 2.QT4.8.0界面的透明度设置 发现设置空间透明度时候,QT显示的绿色的背景,没有透明!设置如下: 在程序起始的地方设置: hisi_init(); QWSServer:: ...

  9. python练习题-day6

    1.老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, ⼩于10分. pingwei=["a" ...

  10. SQL优化之踩过的坑【一】

    正看资料看的过瘾,突然收到报警,说服务器负载太高,好吧,登录服务器看看,我擦嘞,还能不能愉快的玩耍了?下面是当时的负载情况 看见mysql使用cpu已经到了2000,io没有等待.说明应该没有大的临时 ...