JavaScript的React框架中的JSX语法学习入门教程

首先，要了解JSX是什么。JSX是JavaScript的一种语法扩展，可以在JavaScript中编写类似HTML的代码。它是React用来描述UI的语法。

学习JSX，需要掌握以下知识点：

1. 语法格式

JSX的语法格式与HTML类似，但它并不是HTML。最外层需要一个容器元素（可以是div等），标签必须闭合，属性名采用驼峰式命名，属性值既可以是字符串也可以是表达式。

1. 渲染JSX

可以用React的render()方法将JSX渲染到页面上。同时，需要用babel将JSX编译成JavaScript。babel提供了一个在线编译工具，可以将JSX转换成ES5的JavaScript，直接在浏览器中查看结果。

示例1：

// 定义一个简单的组件，输出Hello World
class Hello extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

// 渲染组件到页面上
ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

示例2：

// 定义一个带有属性的组件
class Greeting extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

// 渲染组件到页面上
ReactDOM.render(
  <Greeting name="张三" />,
  document.getElementById('root')
);

以上就是JSX学习入门的攻略，掌握了这些知识点，就可以开始编写React组件了。