从零开始学习React-目录结构，创建组件页面（二）
一：了解目录结构
1：打开编辑器，导入上一节的创建的项目,开始查看目录结构,manifest.json指定了开始页面index.html，一切的开始都从这里开始。
目录解释：
node_modules： 这里面包含了react项目中会用到的一些组件 。
src：里面包含了一些我们自己使用的js文件，css文件，img文件等等
manifest.json：清单配置文件，声明了项目的名称图标以及入口
package.json: 包的清单文件，这里面声明的包会通过npm下载到node_modules中2：先看一下app.js内容
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
祈澈菇凉
</p>
<a
className="App-link"
href="https://www.jianshu.com/u/05f416aefbe1"
target="_blank"
rel="noopener noreferrer"
>
<h2>欢迎来到王小婷的第一个项目教程</h2>
</a>
</header>
</div>
);
}
export default App;
可以看到，修改一下App.js中的文字，会发现浏览器会立即作出响应
3：关于目录整合
由于初始化里面src的资源目录比较乱，我不太喜欢，所以按照自己的编程习惯，新建两个文件，用于存放组件components和静态资源asset，便于管理，更加清晰。
改动之后也需要再修改一下app.js里面的相应的引入路径，以免报错。
import React from 'react';
import logo from './asset/images/logo.svg';
import './asset/css/App.css';
二：新建一个组件
先看一下app.js根组件里面的内容,使用的是render模板，即jsx语法。写项目的时候，所有的子组件都挂在在根组件上，我们要做的页面和项目代码最好全部都写在子组件里面，根组件最好少些，越简单越好。
1：首先在我们的components文件夹里面新建一个Home.js组件，注意：组件名称首字母记得大写。
2：开始写组件代码Home.js
首先要引入react以及react下面的Compoent，引进以后要开始创建组件，使用class Home extends Component{}，完成以后,写个render(){}模板 ，里面代码即为jsx语法写的页面具体html内容了。代码写好哦之后,要通过export default Home，把写好的组件暴露出来，因为暴露出来之后就可以在其他组件里面引入我们已经写好的Home组件啦。
Home.js
import React, { Component } from 'react';
class Home extends Component {
render() {
return <div> 你好,react的第一个组件页面</div>
}
}
export default Home;3:在根组件app.js里面引入Home
打开app.js文件，首先引入import Home from './components/Home'，引入之后，需要把组件挂在根里面，写成单标签<Home/>或者双标签<Home></Home>，表示挂载在上面。
app.js
import React from 'react';
import logo from './asset/images/logo.svg';
import './asset/css/App.css';
//引入home组件
import Home from './components/Home'
function App() {
return(
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
<Home/>
</div>
);
}
export default App;看一下效果，新建组件内容以及可以展示了。
三：关于JSX语法
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，,语法注意：有多行代码的时候，React组件里面的所有节点都需要被根节点包含起来。
1：语法优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。2：定义和绑定react数据
在构造函数里面定义数据
构造函数里面必须写一句代码，super();表示继承Component，写完之后开始在构造函数里面定义数据，定义的数据放在this.state里面。
扩展：关于es6中super关键字的理解： super不仅仅是一个关键字，还可以作为函数和对象。Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。 子类必须在constructor方法中调用super方法，否则新建实例会报错，这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。
绑定数据
数据定义完成之后需要在底下的模板里面使用，该怎么使用数据？比如说在模板的<p>标签里面绑定数据，用this.state.name来获取数据，以此类推。
<p>{this.state.name}</p>Home.js
import React, { Component } from 'react';
class Home extends Component {
constructor(){
super();
//react定义数据
this.state={
name:"我是王小婷啊",
age:'23',
joy:{
web:"前端开发"
}
}
}
render() {
return (
<div>
<p>{this.state.name}</p>
<p>{this.state.age}</p>
<p>{this.state.joy.web}</p>
</div>
)
}
}
export default Home;
ok，学会了React-目录结构，创建组件页面以及JSX的基本语法了。