React官网学习实践 - jSX简介

const element = <h1>Hello, world!</h1>;

这种看起来可能有些奇怪的标签语法既不是字符串也不是HTML.
它被称为 JSX, 一种 JavaScript 的语法扩展。
有了这种扩展，正好符合了react的组件的使用，将每个组件封装起来，放在同一个模块中进行渲染。

因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。
例如，class 变成了 className，而 tabindex 则对应着 tabIndex.

以下尝试显示一行"hello world",

• 先时定义了一个方法:传入一个对象，然后将这个对象的第一个字符串和第二个字符串拼接返回。
• 然后定义一个对象，注意此时的对象的赋值方式，对象后用等号，里面的字段用冒号。
• 最后在retun里面进行对这个方法的调用，便成功的将"Hello World"输出在界面上了。

import React, { Component } from 'react';
import './App.css';

const stringHW = {
    firstString: 'Hello',
    secondString: 'World'
}

function showHelloWorld(stringHW) {
    return stringHW.firstString + " " +  stringHW.secondString;
}

class App extends Component {
    render() {
    return (
        <div>
            {showHelloWorld(stringHW)}
        </div>
    );
  }
}

export default App;