前言
上一次我们安装了React前端开发环境，迈出了我们从入门到放弃的第一步。接下来我们先不着急的写代码，先看看React项目的结构，也方便我们后续更加深入的了解项目。

React项目结构

JSX

在React中有一个很重要的东西：JSX。那么就会有朋友问了，马老师马老师，发生甚么事了？简单来说，就是JavaScript，用JS写html代码。
我们举个栗子，就拿App.js来瞅瞅

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo"  />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
      </header>
    </div>
  );
}

export default App;

这个就很明了的看出了什么是JSX，在一个函数里面写了一段html的片段。

组件

申明

function HelleReact() {
  return <h1>Hello React</h1>;
}

或

class HelloReact extends React.Component {
  render() {
    return <h1>Hello React</h1>;
  }
}

实例

<HelloReact />

State

组件内部的状态，用户通过交互修改状态重新渲染UI。

class HelloReact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "长腿柯基"
    };
  }
  render() {
    return <h1>Hello React, { this.state.name }</h1>;
  }
}

props

一种父组件像子组件传参的一种方式。

// 父组件
import { HelloReact } from './components';
class App extends React.Component {
  render() {
    return (
      <div>
        <HelloReact :name="长腿柯基" />
      </div>
    )
  }
}
export default App;

// 子组件
class HelloReact extends React.Component {
  constructor(props){
    super(props)
  }
  render() {
    return (
      <div>Hello React, { this.props.name }</div>
    )
  }
}

暂时就先看到这么多，还需要理解理解，李姐万岁！