【React】React学习笔记(二)JSX元素渲染

Welcome to Ganace's Blog

欢迎您来到Ganace 的个人博客。

在茫茫互联网的海洋里能够遇见您，实在是一份不小的幸运。

诚挚地向您问候一声:您好，朋友！

这里是属于Ganace个人的隐秘小空间，记录了工作学习中遇到的知识点与灵感，以及生活中的碎碎念与吐槽、突如其来的中二病、尬尬的文艺时间、锻炼腹肌的时刻、惊喜的小发现等等。

想要在自己的平淡无奇的人生长河中留下些什么，

或者只是为了拯救老人家岌岌可危的记忆力，

仅此而已。

来到此地，分享与你。

也期待与您的再次相遇！

Share with Me

有任何的分享或者建议与吐槽，都可以Email我：ganace@foxmail.com

欢迎您的来信！

又到了记笔记的时候了，这次是React.js的复习巩固笔记，温故知新。有空就一点点加内容。 React学习笔记:JSX元素渲染

React JSX

JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。[^1]

React.js 元素渲染用ReactDOM.render()。React 元素是不可变对象。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

使用 JSX

1、多个标签需要使用一个`div`来包裹

用 className 来添加类名，直接使用 class 在 React.js 的元素上添加类名这种方式是不合法的
React.js 元素渲染用ReactDOM.render()。React 元素是不可变对象。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

ReactDOM.render(
    <div>
    <h1 id="title">React</h1>
    <h2>React二级标题</h2>
    <p className="text">这是react练习测试，来吧！</p>
    </div>
    ,
    document.getElementById('testDiv')
);

2、使用JavaScript 表达式

表达式用{}包裹

ReactDOM.render(
    <div>
    <p>{2 * 3}</p>
    </div>
    ,
    document.getElementById('testDiv')
);

3、使用内联样式 style

var mystyle = {
  fontSize: '32px',
  color: 'blue',
  backgroundColor: 'pink'
}
ReactDOM.render(
    <div>
    <p style = {mystyle}>这是react练习测试，来吧！</p>
    </div>
    ,
    document.getElementById('testDiv')
);

4、使用花括号注释

ReactDOM.render(
    <div>
      {/*这里是注释*/}
    <p>这是react练习测试，来吧！</p>
    </div>
    ,
    document.getElementById('testDiv')
);

5、在模板中插入数组

var arr = {
  <h1 id="title">React</h1>,
  <h2>React二级标题</h2>,
  <p class="text">这是react练习测试，来吧！</p>
}
ReactDOM.render(
    <div>{arr}</div>
    ,
    document.getElementById('testDiv')
);

欢迎页