react目錄結構、demo實例詳解、屬性數據綁定方式

1、目錄結構

2、demo實例詳解

　　a)創建Home.js　　

import React, { Component } from 'react';
//創建一個組件必須要集成Component組件,且組件名稱要和文件名稱一直
class Home extends Component{
    /*構造函數用於數據的定義*/
    constructor(props){
        super(props);/*用於父子組件傳值 ，固定寫法*/
        this.state={
            name:"張三",
            age:'30'
        }
    }
    // 寫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;

　　b)在App.js入口組件引入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;

 3、屬性數據綁定方式

　　a)知識點

1、所有的模板要被一個根節點包含起來
2、模板元素不要加引號
3、{}綁定數據       
4、綁定屬性注意：         
      class 要變成 className   
      for 要變成  htmlFor
      style屬性和以前的寫法有些不一樣
           <div style={{'color':'blue'}}>{this.state.title}</div>  //以前寫法
                <div style={{'color':this.state.color}}>{this.state.title}</div>  //react寫法
5、循環數據要加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>
                        })
                }
        
6、組件的構造函數中一定要注意 super
  子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，
  而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象
  constructor(props){
        super(props);  /*用於父子組件傳值  固定寫法*/
        this.state={
            userinfo:'張三'
        }
    }

7、組件名稱首字母大寫、組件類名稱首字母大寫

　　b)操作案例

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:'30',
            msg:"我是一個Home組件",
            title:"我是標題",
            color:'red',
            style:{
                color: 'red',
                fontSize:'40px'
            },
            list:['111','222','333'],
            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="122"> 我的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;