react

一.React环境搭建

1.安装nodejs
2.在cmd检查版本 node –v 在安装完node之后npm页会自动安装 检查版本 npm –v
3.安装脚手架 cnpm install -g create-react-app 或者 npm install –g create-react-app

4.文件中创建项目create-react-app dem01(创建名称)
5.npm start 或者yarn start 运行
npm run build 或者yarn build 生成项目,会生成一个dist文件，将文件打包即可

二.文件目录

1.了解文件目录

node_modules 依赖包
public 静态资源文件管理
src 开发目录，需要整理
package.json 配置文件
README.md 命令提示文件
yarn.lock 插件工具
2.更改端口号：
在node_modules——react-scripts——scripts——start.js
3.整理src文件夹中的文件
文件名称均以大写字母开头
1.index.js为主目录文件。一般不去做任何更改操作
2.在App.js中加组件，做组件式开发
3.整理完文件后。文件中的路径会改变，需要在js文件中去改变路径代码

shift+alt+f 格式化代码

三.组件

1.组件的声明与挂载
用es6里边的类来创建
在cs文件中输入cccs回车后会出现如下代码
组件代码智能提示：需要安装typings和下图

1. 类声明里边render()函数是给页面渲染元素，函数里边一定要有返回值
2. 在return里面返回元素只有一个父元素
3. 组件里面如果有多个元素，且在return( )里面写标签
4. 最后要用export default将组件暴露出去

1.组件的声明
//引入react对象
import React, {Component} from 'react';
//引入css文件
import './Header.css'
//组件的类声明
class Header extends Component{
    render(){
        return (
        <div className="Header">
            <div>头部</div>
        </div>
        )
    }
}
//组件的暴露
export default Header;


2.组件的挂载
在主页进行挂载
import React from 'react';
import './App.css';
import Header from '../Components/Header'   //引入组件文件

function App() {
  return (
    <div className="App">
      //进行组件挂载
      <Header></Header>
    </div>
  );
}

export default App;

2.在组件里边声明数据

1.在类class里边声明构造函数 会报警告 在构造函数里边添加 super(); 因为类在继承。
2.定义react的数据 this.state={ } 对象上去声明变量，数组，对象，标签都可以声明
绑定的数组和对象用map((val,index)=>{return( ) }) 进行遍历,return里边要写遍历的标签，要往遍历的标签中写key={index}
3.数据声明完成去标签里边进行绑定 使用语法 {数据}

constructor(){
        super();
        this.state={
            title:"标题",
            arr: [1, 2, 3, 4, 5, 6],
             obj:[
                {
                    "name":"张三",
                    "hobby":["篮球","足球"]
                },
                {
                    "name":"李四",
                    "hobby":["篮球"]
                }
            ],
            //数组里边直接生成标签
            ele:[<div>1</div>,<div>2</div>,<div>3</div>]
        }
    }
    render(){
        return (
        <div className="Header">
        	//变量的绑定
            <div>{this.state.title}</div>
            //数组的绑定
            <div>
                {
                    this.state.arr.map((val,index)=>{
                        return <span key={index}>{val}</span>
                    })
                }
             </div>
             //对象的绑定
              <div>
                    {
                        this.state.obj.map((val,index)=>{
                            return (
                            <p key={index}>
                                姓名：<span>{val.name}</span>
                                爱好：{
                                    val.hobby.map((valele,num)=>{
                                        return (
                                            <span key={num}>{valele}</span>
                                        )
                                    })
                                }
                            </p>)
                        })
                    }
                </div>
                //数组里边标签的绑定
                <div>
                	{
                		this.state.ele.map((val,index)=>{
                			return <p key={index}>{val}</p>
                		})
                	}
                </div>
        </div>
        )
    }

3.在组件中加载图片
图片在静态资源public中
① 远程路径写法(服务器的静态资源路径)
② 相对路径
③ 图片img标签里边一定要写alt属性，title属性为鼠标悬停到图片上所出现的图片名称
下边这两个一般要在src目录下再建一个图片文件夹，public文件夹下的图片路径获取不到图片
④ import 名称 from 路径 引入图片，src属性中写名称
⑤ src属性中写require()

import React, { Component } from 'react';
import './Header.css'

//src目录下的图片
import imgstwo from "../img/1.PNG"
class Header extends Component {
    constructor() {
        super();
        this.state = {
        	//远程路径，public文件下的图片文件，可以直接写(不写public)
            imgsrc:"http://localhost:3000/image/1.PNG",
            imgone:"./image/1.PNG",
            title:"图片",
            imgcss:"imgcss",
        }
    }
    render() {
        return (
            <div className="Header">
                <p>图片绑定</p>
                <img src={this.state.imgsrc} alt=""/>
                <img src={this.state.imgone} alt="" title={this.state.title}/>
                <img src={imgtwo} alt=""/>
                <img src={require("../img/1.PNG")} alt=""/>
            </div>
        )
    }
}
export default Header;

4.绑定类名称和样式

1.classname={ },括号里边可以用三目运算符进行判断,括号里边是类名称
className是在css文件中写样式，style是直接在当前页面代码写样式
2.动态样式 style={ }，里边可以写类名称，直接写样式，多个样式之间用逗号隔开
注意有连接字符的样式名称的写法，第二个单词首字母大写

css文件内容
.imgcss{
    border: solid 1px red;
}


js文件内容

class Header extends Component {
    constructor() {
        super();
        this.state = {
        	 imgcss:imgcss,
 			 imgstyle:{
				width:"3rem",
				border:"solid 1px red"
 			}
		}
    }
    render() {
        return (
            <div className="Header">
                <div  className={this.state.imgcss}></div>
                <div style={this.state.imgstyle}></div>
                <div style={'color':'red',"fontSize":"1rem"}>
            </div>
        )
    }
}
export default Header;

5.htmlFor

<label for=“male”>Male</label>
for 属性规定 label 与哪个表单元素绑定。
防止像label标签里边的for一样与那个关键字重合，用htmlFor代替
<label htmlFor=“male”>Male</label>