import React, { Component } from 'react';

//创建一个组件必须要集成Component组件,且组件名称要和文件名称一直

class Home extends Component{

    /*构造函数用于数据的定义*/

    constructor(props){

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

        this.state={

            name:"张三",

            age:''

        }

    }

    // 写jsx语法，同时绑定数据 ;render(){模板，主要是jsx语法}

    render() {

        return(

            <div> 你好 Home组件

                <p>name:{this.state.name}</p>  //{this.state.name}绑定数据

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

            </div>

        )

    }

}

//将组件暴露，供别的组件使用

export default Home;

/**

 * 1、引入React

 * 2、创建一个类，集成Component

 * 3、使用render()函数的return()方法包含jsx语句

 *      jsx语句：js与html混合语言编程

 */

import React, { Component } from 'react';

import logo from './assets/images/logo.svg';

import './assets/css/App.css';

//引入组建

import  Home from './components/Home';

/**

 * App为一个入口组件

 */

class App extends Component {

  //render() 模板    采用jsx语法

  render() {

    return (

      <div className="App">

        你好react

        挂在Home组件

        <Home/>

        <h2>react组件里面的所有节点要被根节点包含</h2>

      </div>

    );

  }

}

export default App;

、所有的模板要被一个根节点包含起来

、模板元素不要加引号

、{}绑定数据

、绑定属性注意：

      class 要变成 className

      for 要变成  htmlFor

      style属性和以前的写法有些不一样

           <div style={{'color':'blue'}}>{this.state.title}</div>  //以前写法

                <div style={{'color':this.state.color}}>{this.state.title}</div>  //react写法

、循环数据要加key

    方式一：定义变量

         let listResult = this.state.list.map(function (value,key) {

            return <li key={key}>{value}</li>

        })

        绑定方式：{listResult}

    方拾二：直接绑定

        {

                        this.state.list2.map(function (value,key) {

                            return <li>{value.title}</li>

                        })

                }

、组件的构造函数中一定要注意 super

  子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，

  而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

  constructor(props){

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

        this.state={

            userinfo:'张三'

        }

    }

、组件名称首字母大写、组件类名称首字母大写

import React, { Component } from 'react';

import '../assets/css/Home.css';

import logo from  '../assets/images/logo.svg'  //引入本地图片

//创建一个组件必须要集成Component组件,且组件名称要和文件名称一致

class Home extends Component{

    /*构造函数用于数据的定义*/

    constructor(props){

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

        this.state={

            name:"张三",

            age:'',

            msg:"我是一个Home组件",

            title:"我是标题",

            color:'red',

            style:{

                color: 'red',

                fontSize:'40px'

            },

            list:['','',''],

            list2:[

                {title: "新闻111"},

                {title: "新闻222"},

                {title: "新闻333"}

            ]

        }

    }

    // 写jsx语法，同时绑定数据 ;render(){模板，主要是jsx语法}

    render() {

        let listResult = this.state.list.map(function (value,key) {

            return <li key={key}>{value}</li>

        })

        return(

            <div> 你好 Home组件

                <p>name:{this.state.name}</p>

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

                <div title=""> 我的div</div>

                <div title={this.state.title}>绑定属性</div>

                <div className='red'>这个是一个红色的div,要使用className,而不是class</div>

                <div className={this.state.color}>这个是一个红色的div,className绑定数据,使用对象方式获取</div>

                <br/>

                <p>label要使用htmlFor</p>

                <label htmlFor="name">姓名</label>

                <input id = "name"/>

                <br/>

                <div style={{'color':'red'}}>style原始的样式</div>

                <div style={this.state.style}>react style样式绑定数据</div>

                <p>引入本地图片</p>

                <img src={logo}/>

                <img src={require('../assets/images/logo.svg')}/>

                <p>引入远程图片</p>

                <img src="https://img.shields.io/badge/cnpm-0.0.1-red.svg?style=flat-square"/>

                <p>遍历list方式，通过map函数遍历</p>

                <ul>

                    {listResult}

                </ul>

                <p>遍历list方式,通过map函数遍历</p>

                <ur>

                    {

                        this.state.list2.map(function (value,key) {

                            return <li>{value.title}</li>

                        })

                    }

                </ur>

            </div>

        )

    }

}

//将组件暴露，供别的组件使用

export default Home;