React：JSX

新建的react demo项目结构如下：

node_modules： 这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件；
public：里面包含了我们项目中的启动页面，react比较适合单页面项目应用开发，所以暂时只包含一个index.html，并且这也是react工程的入口页面，入口页面怎么理解，就是你启动项目后，打开的首页，第一眼呈现的那个页面；

src：里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到index.js即可，系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

使用JSX的代码：

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

而在此段代码中又有

import App from './App';

那么，我们看看app.js里面都是些什么。

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  };
}

export default App;

由于我先学的微信小程序再学的这个，我的理解就是这块是模块化。最后一段代码将整个方法暴露出去，可以让其他page引用。

对于render，我们可以直接写，也可以单独写一个文件然后引用。

ReactDOM.render(
    <div>
	    <h1>教程</h1>
	    <h2>欢迎学习 React</h2>
	    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById('root')
);

写的标签必须用一个标签将整个内容包裹起来，上面的代码就用div标签包裹起来了。

另外，在引用的时候和我们平常写js有点区别

<script type="text/babel" src="test.js"></script>

此处是text/babel，这里需要注意一下。

引用css则是在index.js里面就可以引用

import './index.css';

也可以

var myStyle = {
    fontSize: '20px',
    color: '#FF0000'
};
ReactDOM.render(<h1 style={myStyle}>hi react</h1>, document.getElementById('root'));

这种方法和平常写css有点区别就是css的value值需要用单引号包裹起来。

插入数组：

var arr =[
	<h1 style={myStyle}>hi react</h1>
];
ReactDOM.render(<div>{arr}</div>, document.getElementById('root'));

添加注释：

ReactDOM.render(
	<h1 style={myStyle} className="hi">
		hi react
		{/*注释...*/}
	</h1>
	/*标签外的注释1*/
	//标签外的注释2
	,
	document.getElementById('root')
);

tip：

在标签外面的注释不需要加{}，标签内的注释要加{}；

渲染class时用的className。