说说React的事（三）JSX

React最大的特色就是使用JSX语法，这是一门很有特色的语法，将JS和Html有机的结合起来，所以你可以看到在某些JS片段中一不小心就会插了HTML。但是使用JSX并非是必须的，但是使用它有以下的几个优势：

它更快，因为它在将代码编译为JavaScript时执行优化。
它也是类型安全的，大多数错误可以在编译期间被捕获。
如果你熟悉HTML的话，那会更轻松，更快速地编写模板。

下面我们来看一段经典的React代码

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

以下代码执行后得到的效果是

虽然和Html很相似，但是还是有些点是需要注意的

元素嵌套

如果需要返回多个元素，那必须要有个根元素来包含这些子元素，就像Html中div一样，内部可以包含许多p，h1，h2标签等。

如以下的示例：

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}

export default App;

以上代码片段执行后得到的效果如下：

标签属性

除了常规的HTML属性外，我们还可以使用我们自己的自定义属性。如果我们要添加自定义属性的话，那我们需要在前面加上前缀data-，如以下栗子🌰，我们在p标签上添加了一个自定义属性data-myhello

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myhello = "hello">Hello world!!!</p>
         </div>
      );
   }
}

export default App;

以上代码片段执行后得到的效果如下：

可以看到我们加了个data-myhello属性，假如我们把前缀data-删掉的话，那会报未知属性提示。

JS表达式

JavaScript表达式可以在JSX内部使用。我们只需要用大括号{}包装它。比如以下示例，我们将在结果页面中看到2。

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}

export default App;

我们不能在JSX中使用if else语句，而是可以使用三元表达式。在下面的示例中，变量i等于1，我们将在效果页面中看到True!，如果我们将其更改为某个其他值，则它将呈现为False。

import React from 'react';

class App extends React.Component {
   render() {

      var i = 1;

      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}

export default App;

样式

React建议使用内联样式。当我们要设置内联样式时，我们需要使用camelCase语法。 React也会在特定元素的数字值之后自动追加px。以下示例显示如何将myStyle内联添加到h1元素。

import React from 'react';

class App extends React.Component {
   render() {

      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }

      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}

export default App;

我们将看到如下效果：

注释

在JSX内容也是可以写注释的，但是需要使用大括号包裹起来，例如如下的代码片段：

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}

export default App;

HTML标签始终使用小写标签名称，而React组件以大写开头。

注意 - 您应该使用className和htmlFor作为XML属性名称而不是class和for。

React的官方是这么说的：

由于JSX是JavaScript，因此不要将类和类的标识符（class和for）作为XML属性名称。相反，React DOM组件希望DOM属性名称是这样，如className和htmlFor。