React JSX基本语法教程与实例在这篇博文中，我们将学习JSX教程的语法和在React应用程序中的使用实例。本教程

在这篇博文中，我们将学习JSX教程的语法和在React应用程序中的使用实例。

本教程涵盖了ReactJS的以下主题

简介
JSX语法
在DOM中显示反应组件
JSX CSS内联样式
属性和道具
Javascript表达式
Javascript事件
评论的使用
JSX实例
jsx编辑器支持
命名代码约定

JSX基本介绍

JSX是JavaScript XML的缩写。JXX是一种具有XML语法的JavaScript代码。这可以在react应用中用于JSX文件的内容模板化。其语法类似于在JavaScript中放置HTML代码。

jsx中的内容包含标签。

每个标签都有一个名称属性和子女。JSX代码需要编译器或转译器来转换为JavaScript。 Babel插件需要配置来编译它。这些文件包含在JavaScript或扩展名为JSX的文件中。

内容可以通过将HTML放在jsx文件的JavaScript代码中或使用React.createElement来创建。

优点是

当你把HTML代码放在javascript里面的时候，代码是可读的，而且很容易写。
类型安全，在编码阶段会出现错误
性能良好，因为编译阶段转换为javascript

在DOM中显示HTML或JSX元素

React提供了ReactDom 类render方法来显示JSX内容到DOM。如果DOM中存在任何内容，将被修改为新的内容。
语法是

ReactDom.render(JSX Content or React Component, DOM element)

注释可以用/*注释*/括在大括号中添加。注释可以是单行注释和多行注释
单行注释

const JSXString={/*This is Single line comments example  
  
*/}

多行注释
下面是添加多行注释的例子

{/*  
This multi line comment example  
Display the header */}

React CSS样式

在普通的HTML标签中，你可以使用class属性来应用样式。在JSX中，我们将使用className而不是class来应用样式className的用法

 render() {  
    return (  
        
      {/*  {this.state.data}  
        Click Me*/}  
        Heading One  
        Heading Two  
        Heading Three  
        
    );  
  }

内联样式的用法
内联样式可以使用样式属性来定义。样式包含CSS样式对象在下面的例子中，定义了我的样式对象。这可以在HTML元素的样式中使用{}语法来引用，比如style={mystyles}）。

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    let mystyles = {  
      color:'green',  
      fontWeight:'bold'  
    };  
    return (This is CSS Inline Styles usage example);  
  }  
}  
  
export default App;

JSX属性和道具声明
在Html中，属性可以定义内置和自定义属性在下面的例子中，定义了HTML属性 data-customattribute 添加了自定义属性 myprop="myproperties"

  
  
import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
    
    Header 1  
    Header 2  
    Header 3   
);  
  }  
}  
  
export default App;

JSX中的Javascript事件用法
在JSX中，所有的HTML属性和事件都是驼峰式的。意味着javascript中的onclick事件在JWX中变成了onClick事件。下面是JWX中事件的例子。事件处理程序是定义的函数。这将被引用并使用{}语法分配给Javascript事件

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {    
  render() {  
    var clickEventFunction = function clickEvent() {  
      console.log('Click Event Fired');  
    };  
    
    return (  
    
    Header 1  
    Header 2  
    Header 3   
);  
  }  
}  
  
export default App;

JSX的hello world例子

JSX可以包含简单标签以及嵌套标签简单的Hello World例子

  
const JSXString=Hello World

多重或嵌套元素 JSX
如果你要添加多个元素，你需要被包围在一个容器或父元素中。如果没有父元素，就会产生编译错误 JSX表达式必须有一个父元素在下面的例子中，我们有两个标题元素，它们的父元素是div 有效的JSX代码

import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
    
    Header 1  
    Header 2  
);  
  }  
}  
export default App;

无效的JSX代码，编译错误 JSX表达式必须有一个父元素

  
import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
    Header 1  
    Header 2  
);  
  }  
}  
export default App;

JSX中Javascript表达式的使用

表达式可以在JSX内容中使用。表达式可以被括在{}语法中

 import React, { Component } from 'react';  
import './App.css';  
  
class App extends Component {  
  render() {  
    return (  
    
    Header 1  
    Header 2  
    Header 3 - {4+5}  
);  
  }  
}  
  
export default App;

React JSX编码的命名规则

这些是按照ESLint惯例的命名惯例

React组件保存为jsx扩展名
文件名遵循Pascal名称，如MyComponent.jsx
始终使用没有子元素的自我关闭标签，如代替
JSX属性必须使用双引号，对于JavaScript，你可以使用单引号，道具名称遵循camelCase规则
每个标签都应该有关闭标签--例如像或自闭标签应该被关闭，在HTML标签中没有关闭标签也能工作，在JSX中应该写成，否则会产生编译错误 JSX元素br没有相应的关闭标签

JSX编辑器或IDE支持

为了加快开发速度，我们需要有许多功能，如自动完成，调试，代码语法和许多必要的功能。JSX支持所有流行的编辑器，如以下内容

Visual Studio代码编辑器 - React开发工具
原子编辑器
Nuclide
Sublime Text编辑器
Webstorm IDE
Eclipse IDE for React

结论

这篇文章讨论了React框架中的JSX基本指南。

希望你喜欢我的文章。