在React的脚手架中初次遨游

环境已经搭建好了，那还等什么呢，赶紧动手尝试吧
一定要掌握好组件化的开发思想，原来的js文件可能一写就是成千上万行的代码，找个bug出来费老半天劲了，组件化虽然使我们现在写的js文件多了，但是结构也清晰了，看着也让人舒畅，找东西的思路也更加清晰了，真的是太丶丶好用了

首先清理一下文件，src文件夹 只保留 index.js和App.js 对其他的文件我们毫不客气的全部删除，不要手下留情哦！！！
然后将index.js和App.js整理如下
简要说明： 组件分为类组件和函数式组件两种，避免不了我们以后工作会遇上维护低版本React的工作，所以先从类组件入手去学习如何创建一个新的组件以及数据的操作。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';//将我们写好的App.js通过模块化的方式引入到页面

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

App.js

import React, { Component } from 'react';

class App extends Component{
  render(){
    return <h1>hello React --My First App</h1>
  }
}
export default App;

小提示 我们不用去手动更新页面，react脚手架自动的给我们配置了一个热更新服务器，修改完代码便可以看到视图的渲染，很大程度的方便了我们观察
看一下浏览器返回给我们的视图呈现
可能有的童鞋看的不是那么的透彻，到底是怎么实现的呢？
第一点 就是渲染出来的 h1 标签是存放在App.js中的，我们在index.js中通过模块化的方式将其引入到页面中。
然后在 index.js 中通过 React 提供的内置渲染视图的方法，也就是 **ReactDOM.render()**将视图渲染出来。这篇文章中有讲这些 React的初体验 我们了解即可，能看明白就好，因为这些在脚手架中都会自动为我们创建出来
第二点 就是渲染的规则，我们将引入的 App 作为标签放到我们对应放置渲染视图的地方，切记这样的标签一定是闭合标签，这样才能正确的解析出来（单标签闭合以及双标签的闭合都是可以的)

<App /> || <App></App> //这两种形式都可以 根据你的需要即可

第三点 我们来说一说 App.js 文件中的内容
无论将来我们构建多少个js文件，每个js文件都一定要引入React这个文件，毕竟现在是基于React开发

import React from 'react';//类组件的一个规定，开头字母要大写，不做太多强调，尊重每一项规定

既然是类组件，就不得不使用 class 了，利用 class来创建组件 我们继承的是 React 给我们提供的Component 然后 执行 render() 函数，然后将我们的内容 return 出来。需要注意的一点我们曾经提到过，那就是有且仅能有一个最大的容器来包裹这些渲染的视图

class App extends Component{//同样 命名的  App 开头字母是大写
  render(){
    return <h1>hello React --My First App</h1>
  }
}
export default App;//将我们创建的App导出，以便于其他组件调用

那么接下来说一说在App中，如何创建一些变量并且使用这些变量 先往下看一小段代码和视图

我们在App.js中书写如下代码

import React, { Component } from 'react';

class App extends Component{
  state = {
     age:9,
     name:"开课吧"
  }
  render(){
    let {age,name} = this.state
    return <div>
              <h1>{age}</h1> 
              <h2>{name}</h2>
           </div>
  }
}
export default App;

再来看一下 Browser 给我们的反馈
第一张图是呈现在bom当中的内容

第二张图是呈现在element当中的内容

页面上完完整整的将我们写在return中的两个hx标签返回了，
估计一些心急的同学这时候在想，光呈现视图，难道不能修改吗？
我们继续向下看，是如何书写js代码的

import React, { Component } from 'react';

class App extends Component{
  state = {
     age:9,
     name:"开课吧"
  }
  addAge=()=>{
   let {age} = this.state
   this.setState({
     age:++age
   })
 }
  render(){
    let {age,name} = this.state
    return <div>
              <h1>{age}</h1> 
              <h2>{name}</h2>
              <button onClick={()=>{//这是第一种方式，行内书写，事件名称驼峰命名
              						//将点击触发的函数通过 {} 插值表达式插进来
              						//函数内调用setState（）方法，将改变的值前后对应
              						//我们修改age，并不会改变name的值
              						//类组件使用setState()会帮助我们自动合并state
                                this.setState({
                                  age:++age
                               })
              }}>点我age增加</button>
               <button onClick={this.addAge}>点我age也增加</button>
           </div>
  }
}
export default App;

看看效果吧，小伙伴们赶快去试一试吧