React目录结构 、创建组件、 JSX语法和绑定数据

src文件：开发写代码的地方

manifest.json 文件简介：
    https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction
    允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中
super关键字：
    参考：http://www.phonegap100.com/thread-4911-1-1.html
    Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
    class Person {
          constructor (name) {
                this.name = name;
          }
    }
    class Student extends Person {
          constructor (name, age) {
                super(); // 用在构造函数中，必须在使用this之前调用
                this.age = age;
          }
    }



为什么官方的列子里面写个super(props)：


只有一个理由需要传递props作为super()的参数，那就是你需要在构造函数内使用this.props

那官方提供学习的例子中都是写成super(props)，所以说写成super(props)是完全没问题的，也建议就直接这样写。

---

创建组件，引入组件，绑定数据demo：

import React, { Component } from 'react';


class Home extends Component{


    constructor(){

        super();


        //react定义数据

        this.state={

            name:"张三",

            age:'30',

            userinfo:{

                username:"loaderman"
            }
        }
    }


    render(){

        return (
            <div>

                <h2>react组件里面的所有节点要被根节点包含</h2>
                <p>姓名:{this.state.name}</p>

                <p>年龄:{this.state.age}</p>

                <p>对象:{this.state.userinfo.username}</p>


            </div>
        )

    }
}



export default Home;

import React from 'react';

class News extends React.Component{

    constructor(props){
        super(props);  /*用于父子组件传值  固定写法*/


        //定义数据


        this.state={


            userinfo:'张三'
        }
    }

    render(){
        return(

            <div>

                <h2>{this.state.userinfo}</h2>
                <ul>

                    <li>这是一个列表</li>
                    <li>这是一个列表</li>
                    <li>这是一个列表</li>
                </ul>

            </div>
        )
    }

}


export default News;

引入组件

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

//引入Home组件

import Home from './components/Home'


import News from './components/News'

class App extends Component {


  //render 模板        jsx
  render() {
    return (
      <div className="App">
         你好react  根组件
        <Home></Home>


      </div>
    );
  }
}

export default App;