一、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. 不可访问内存 Java四种引用包括强引用,软引用,弱引用,虚引用

    小结: 1.不可访问内存是指一组没有任何可访问指针指向的由计算机程序进行动态分配的内存块. 2.垃圾收集器能决定是否一个对象还是可访问的:任何被确定不可访问的对象将会被释放. https://zh.w ...

  2. Android+Tomcat通过http获取本机服务器资源

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...

  3. Page12:镇定条件、镇定与极点配置的关系,解耦控制的概念等[Linear System Theory]

    内容包含镇定条件.镇定与极点配置的关系,解耦控制的概念.形式.分类以及各种解耦方法特点,系统能否解耦判断.

  4. [daily] 使用左右对比查看diff 格式的文件

    如题: Given your references to Vim in the question, I'm not sure if this is the answer you want :) but ...

  5. [knowledge][http] http

    关于,底层承载协议的规定. HTTP communication usually takes place over TCP/IP connections. The [], but other port ...

  6. 查找->动态查找表->哈希表

    文字描述 哈希表定义 在前面讨论的各种查找算法中,都是建立在“比较”的基础上.记录的关键字和记录在结构中的相对位置不存在确定的关系,查找的效率依赖于查找过程中所进行的比较次数.而理想的情况是希望不经过 ...

  7. idea 在tomcat启动的时候发现控制台输出的是乱码

    先前觉得是tomcat的问题,后来发现是idea的问题: 打开IntelliJ IDEA本地安装目录中bin文件夹下的idea.exe.vmoptions和idea64.exe.vmoptions这两 ...

  8. 获取文件后缀名(zip,rar等)

    var filename = file.name; var index1 = filename.lastIndexOf("."); var index2 = filename.le ...

  9. Java+selenium 如何操作日历控件

    场景:一般的日期控件都是input标签下弹出来的,如果使用webdriver 去设置日期, 1. 定位到该input 2. 使用sendKeys 方法 但是,有的日期控件是readonly的 ,比如神 ...

  10. 继承数组的slice方法

    <script> var arr=[1,2,3,4,5]; console.log(Array.prototype.slice.call(arr,1)); </script> ...