React课程学习系列笔记：02-05 React中最基础的JSX语法

React 使用 JSX 来替代常规的 JavaScript，JSX 是在 JavaScript 内部实现的。

在常规的 JS 中，如果我们需要 渲染 / 生成 一个页面一个页面，是通过将 HTML 标签转换成字符串进行拼接实现的，如下：

function helloWorld(){
    var htmlContent = "<div>"
                      "<h4>HelloWorld</h4>"
                      "</div>";
    $("#root").append(htmlContent);
}

而在 JSX 中，如下：

import React from 'react';
class App extends React.Component {
  render() {
    return (
        <div>
       		<h4>Hello World!</h4>
        </div>
    );
  }
}
export default App;

JSX 语法中，如果我们要使用自己创建的组件，组件开头必须是大写字母开头，如下 App 组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

一般而言，组件标签基本是大写开头，而像 <div></div> 这种小写标签基本是 HTML 的原生标签。