JSX笔记

什么是JSX:

JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言（我就是为了学习react学习的）
要使用JSX语法，得先运行cnpm i babel-preset-react -D,然后再‘.babelrc’文件中添加语法配置，
JSX代码的表现形式，也就是写法
- 常规的html代码都能写，可以通过{props}往html中插入变量或者任意有效的JS表达式，无需加上$
- 还可以插入带参数的函数{func(props)}

//插入带参数的函数
<h1>Hello, {getName(props)}</h1>
//可以在标签中添加属性，属性值若是字符串，则加上引号
const element = <div tabIndex="0"></div>;
//若是对象或表达式，则加上{}. ""与{}不能混用
const element = <img src={user.avatarUrl}></img>;
//若JSX元素没有子元素/节点，可以单闭合
const element = <img src={user.avatarUrl} />;
//可以给html添加类但class需改写成className。for属性要写成htmlFor
var myDivElement = <div className="foo" />;
//若添加自定义的要渲染的属性，最好以data-开头
ReactDOM.render(
    <div>
    <h1>自定义属性</h1>
    <h2>自定义属性在下面</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById('example')
);

小结： JSX将XML语法加入到JavaScript中，在JS中写了JSX将会被预处理成React Element

独立文件，引入，和表达式

你的React JSX代码可以放在一个独立文件上，例如我们创建一个helloworld_react.js,然后再HTML文件中引入该JS文件，我们可以再JSX中使用JavaScript表达式，表达式写在花括号中

//helloworld.js文件
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
//在HTML文件中引入该JS文件
<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>
//js表达式
ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

三元运算符，样式，注释，数组

因为JSX中不能使用if else语句，但是可以用三元表达式。
React推荐使用内联样式，我们可以使用camelCase语法来设置内联样式，React会在指定元素数组后面自动添加px。
注释需要写在花括号中
JSX允许在模板中插入数组，数组会自动展开所有成员

//三元表达式，如果i= 1,就输出true，如果修改i的值，就会输出false
ReactDOM.render(
    <div>
      <h1>{i == 1 ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);
//为h1元素添加myStyle内联样式：
var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>内联样式</h1>,
    document.getElementById('example')
);
//注释需要花括号内
ReactDOM.render(
    <div>
    <h1>注释教程</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);
//数组会自动展开所有成员
var arr = [
  <h1>菜鸟教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

小结：JSX需要注意的地方：代码中嵌套多个html标签时，需要使用一个标签元素包裹他，render里面保持两个参数，通过style添加的内联样式，注意是两个花括号<h1 style = {{fontSize:12}}内联样式</ h1 >,

哪怕我们写了 JSX 这样的标签，也并不是直接把我们的 HTML 标签渲染到页面上，而是先转换成 React.createElement 这样的JS代码，再渲染到页面中

学习react（two day） JSX

JSX笔记

什么是JSX:

独立文件，引入，和表达式

三元运算符，样式，注释，数组