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

一、目錄結構

二、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組件

/** * 一、引入React * 二、建立一個類，集成Component * 三、使用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;

 三、屬性數據綁定方式

　　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;