React 基本语法

一、声明组件
1.创建组件文件（两种写法）
在components文件夹中新建一个Home.js文件：

import React,{Component} from 'react';

//声明组件的类
class Home extends Component{
    render() {
        return(
            <div>我是Home组件</div>
        )
    }
}
export default Home;

在components文件夹中新建一个Cart.js文件：

import React from 'react';
class Cart extends React.Component {
    render() {
        return (
            <div>我是Cart组件</div>
        );
    }
}
export default Cart;

2.组件的挂载
在App.js根组件中引入Home、Cart组件：

//引入react对象  import后面的声明 React是整个react对象；{}里面是当前对象里面的属性
import React, { Component } from 'react';
//引入当前组件使用的css脚本
import '../assets/css/App.css';

//引入组件
import Home from './Home';
import Cart from './Cart';

//es6里面的类语法
//声明App这个类  extends继承Component
class App extends Component {
  //render方法指渲染模板页面；方法里有返回值，返回对象，对象里面写模板（元素）；里面的元素只能有一个根节点
  render() {
    return (
      <div className="App">
        <span>我是App组件</span>
        <Home></Home>
        <Cart/>
      </div>
    );
  }
}
//将App组件进行暴露
export default App;

注：在vsCode种写代码没智能提示 ：添加typings扩展组件

二、在组件里声明数据及绑定数据

import React,{Component} from 'react';

//声明组件的类
class Home extends Component{
    //声明类的构造函数
    constructor(){
        //super 完全继承，将Component里的完全继承过来;从父元素继承this指针下来
        //不写super 子类没有自己的this指针 必须来自于继承的父类
        super();
        //给当前类声明属性(对象集合)
        this.state={
            msg:"我是Home组件",
            arr:[1,2,3,4,5,6],
            ele:[
                {
                    e:<span>1</span>
                },
                {
                    e:<span>2</span>
                },
                {
                    e:<span>3</span>
                }
            ]
        }
    }
    render() {
        return(
            <div>
                <span>数据的绑定</span>
                <br/>
                {/* 普通数据绑定 */}
                {this.state.msg}
                <br/>
                {/* 数组绑定 */}
                <ul>
                {
                    this.state.arr.map(function(value,index){
                        return (
                            <li key={index}>{value}</li>
                        )
                    })
                }
                <br/>
                {/* 数组+元素集合绑定 */}
                <ul>
                    {
                        this.state.ele.map(function(value,index){
                            return(
                                <li key={index}>{value.e}</li>
                            )
                        })
                    }
                </ul>
            </ul>
            </div>
        )
    }
}
export default Home;

知识点：
constructor()------构造方法
这是es6对类的默认方法，通过new命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加到空的constructor()方法。

super()------继承
在class方法中，继承是使用extends关键字来实现的。子类必须在constructor()调用super()方法，否则新建实例时会报错。
报错的原因：子类没有自己的this对象，它只能继承自父类的this对象，然后对其进行加工，而super()就是将父类中的this对象继承给子类。没有super，子类就得不到this对象。

三、在组件里属性的绑定

import React,{Component} from 'react';

class Home extends Component{
    constructor(){
        super();
        this.state={
            title:"我是div",
            isadd:"addColor",
            bg:{
                color:'red'
            }
        }
    }
    render() {
        return(
            <div>
                <span>绑定元素的属性</span>
                <br/>
                {/* 普通属性的绑定 */}
                <div title={this.state.title}>绑定title属性</div>
                <br/>
                {/* 绑定特殊属性 和 js里面冲突的一些属性 */}
                {/* class属性和上面类的关键字冲突 必须换为className */}
                <div className="bg">绑定class属性</div>
                {/* 动态绑定className */}
                <div className={true?this.state.isadd:""}>动态绑定class</div>
                <br/>
                {/* for属性 和 js里面的for循环一样 */}
                <label htmlFor="name">绑定for</label>
                {/* 绑定style属性 */}
                <div style={{width:'3rem',height:'3rem'}}></div>
                <div style={this.state.bg}></div>
            </div>
        )
    }
}
export default Home;

四、图片的src引入问题

import React from 'react';
//进行图片的引入
import imgs from '../assets/image/11.jpg'
class Cart extends React.Component {
    constructor(){
        super();
        this.state={
            imgsrc:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1840587501,62677872&fm=27&gp=0.jpg"
        }
    }
    render() {
        return (
            <div>
                我是Cart组件
                <hr/>
                {/* 引入远程图片的src */}
                <img src={this.state.imgsrc} alt=""/>
                {/* 引入本地图片路径  require是去服务端找图片路径，把它请求下来，拿来使用*/}
                <img src={require("../assets/image/11.jpg")} alt=""/>
                {/* 在上面进行图片的引入 */}
                <img src={imgs} alt=""/>
            </div>
        );
    }
}
export default Cart;

五、数组遍历和元素的绑定问题

import React from 'react';
class Cart extends React.Component {
    constructor(){
        super();
        this.state={
            arr:[1,2,3,4],
            ele:[<div>1</div>,<div>2</div>],
            list:[
                {txtvalue:"你好"},
                {txtvalue:"你好"},
                {txtvalue:"你好"}
            ]
        }
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        // foreach不行，因为其没有返回值；map为元素的映射，有返回值
                        this.state.arr.map((value,index)=>{
                            return(
                                <li key={index}>{value}</li>
                            )
                        })
                    }
                </ul>
                <ul>
                    {
                        this.state.ele.map((value,index)=>{
                            return(
                                <span key={index}>{value}</span>
                            )
                        })
                    }
                </ul>
                <ul>
                    {
                        this.state.list.map((value,index)=>{
                            return(
                                <li key={index}>{value.txtvalue}</li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}
export default Cart;