初识React03

一、路由参数

1、定义路由，在path上声明参数

<Route path="/detail/:eid" component={Detail}/>

2、使用连接地址的时候传递参数

<a href="#/app/detail/24"></a>

3、在对应的视图组件中使用 this.props 来获取传递过来的参数

有两种获取方式：

1、this.props.routeParms.eid

2、this.props.params.eid

在对应的列表中：

import React, { Component } from 'react'

export default class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            num: 24
        }
    }
    
    render() {
        return (
        	<div>
        		详情页
        		/* 使用下面任意一种方式获取传递过来的参数都可以 */
        		{this.props.params.eid} 
        		{this.props.routeParams.eid}
        	</div>
        )
    }
}

二、安装Node环境

**1、安装 Node.js **

nvm install 指定版本(12.13.1)

2、检查 Node.js 是否安装成功

nvm -v

查看当前计算机的所有 Node.js 版本

nvm ls

3、安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、安装less

npm i -g less

5、查看当前电脑所有安装过的全局包

npm ls -g --depth 0

三、项目库环境--create-react-app脚手架安装

1、安装官方脚手架

npm i -g create-react-app

2、在项目目录创建一个新的项目

create-react-app demo

3、进入项目并运行项目

cd demo && npm start

四、项目集成less

1、解包脚手架

npm run eject / yarn eject

解包之后, 先尝试启动项目, 如果发现类似报错 Cannot find module '@babel/plugin-transform-react-jsx'

出现这种错误可能是当前项目不是 git 管理下的，运行以下代码即可

// 将项目交给git管理
git init
// 添加到暂存区
git add .
// 本次操作的备注信息
git commit -m 'Saving before ejecting'
// 重新解包即可
npm run eject

2、安装less环境

npm i less less-loader -D

3、将less加载器配置到webpack配置文件中

解包完成之后会多出一个config文件夹，将less配置到config文件夹中的webpack.config.js文件中

代码如下：

const lessModuleRegex = /\.less$/;

// less加载器 
{
	test: lessModuleRegex,
	use: getStyleLoaders(
		{
			//暂不配置
		},
		'less-loader'
	),
},

五、测试less

在src/assets/styles/ 目录下新建core.less，别写测试代码：

@charset 'utf-8';

@color: #f00;

body{
    background: @color;
}

如果测试没有问题，就可以正式开始编写页面