筑基-jsx语法

JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

jsx中使用class

还记得我们cp App.js了吧，因为这个js 中已经有好几个语法了。
className
<div className="my_className">这是jsx</div>

jsx 引入图片

import p1 from '../../images/k_pro5.png';

<img className="img1" src={p1} alt="这是图片的引入方式"/>

jsx 嵌入表达式

<h2>你的姓名是：{person.name}，年龄是：{person.age}</h2>

jsx 中使用判断

<div>{ bTrue ? <div>这是t</div> : <div>这是f</div> }<div>

jsx 中引入html 片段

render(){
    let ifHtml = '<div>111<p>直接显示内容</p></div>'
    return(
        <div dangerouslySetInnerHTML={{ __html: ifHtml }}></div>
    )
}

注释

{/*
    这是要注释的代码
*/}

html数组写入

const arr = [
  <h2>React教程</h2>,
  <h3>需要不停的写代码</h3>,
];
const listItems = arr.map((tag,i) =>
  <li key={i}>{tag}</li>
);
<ol>{listItems}</ol>

html中的属性比如for

<label htmlFor="id"></label>

jsx 中style样式

style={{
width:'100px',
border:'1px solid red',
}}

jsx 中a 原来是javascript:;

<a href="true"></a>

等等 会在后期不断学过过程中来熟悉jsx