记录react学习的摘要

记录react学习的摘要

启动react项目

到项目文件内，用 npm start

ES6其他内容

bind()
箭头函数
解构 和 展开

Components

components 是js类

jsx文件的return 多个标签用

或将其括起来。

            

                
{this.stl}>
                    {this.state.x}
                
                
{this.syl}>
                    {this.toString()}
                
                
{this.changeStyle()}>
                    {this.reString()}
                
                

                    
{this.state.r2()}
                
                left
                right

                {
                    this.state.color.map(col => (
                        
{col}>{col}
                    ))
                }
            

jsx文件内使用js 用{}嵌入表达式。

// 快捷键 imrc
import React, { Component } from 'react';

// 快捷键 cc
class ClassName extends Component {
    state = { 
        // 
        x: 3
     } 
    render() { 
        return (
            
                
{this.state.x}
            
        );
    }
    toString() {
        console.log("Hello React!");
    }
}
 
export default ClassName;

• class -> className
• CSS属性：background-color -> backgroundColor，其它属性类似

css的style属性

		// 在类内定义一个css的style对象
      stl = {
        width: "50px",
        height: "50px",
        backgroundColor: "red"
      }
      syl = {
        color:"blue"
      }


    render() { 
        return (
            
					// 用style={def_style} 用{}插入js成员
                
{this.stl}>
                    {this.state.x}
                
                
{this.syl}>
                    {this.toString()}
                

引入外部包

npm i package-name

map和key的关联