1,React脚手架创建项目

creat-react-app 项目名称;
如果在创建项目时报错
npm ERR! Response timeout while trying to fetch http://registry.npmjs.org/supports-color (over 30000ms)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\xxx\xxxxx\xxxx\npm-cache_logs\2020-12-18T10_25_42_157Z-debug.log
切换至淘宝镜像源再重新创建项目
npm config set registry=http://registry.npm.taobao.org/

2,打开项目

进入该项目目录文件输入npm start

3,快速生成界面

快捷键rce马上可以生成基本界面。
1
2
3
4
5
6
7
8
9
10
11
import React, { Component } from 'react'
export class ceshi extends Component {
render() {
return (
<div>

</div>
)
}
}
export default ceshi
快捷键rfc马上可以生成一个函数界面
1
2
3
4
5
6
7
8
9
import React from 'react'

export default function ceshi() {
return (
<div>

</div>
)
}

4,安装路由及引入

cnpm i react-router-dom
import { BrowserRouter as Router, Route } from ‘react-router-dom’

5,解决React脚手架中不能使用less的问题

React脚手架create-react-app不支持less,所以需要配置webpack的webpack.config.js文件。

(1),下载less less-loader

1
2
3
4
//使用nmp
npm install less less-loader --save-dev
//使用yarn
yarn add less less-loader

(2),配置webpack.config.js文件

1,在使用React脚手架的时候,可能发现是没有webpack.config.js文件的。运行npm run eject,会多出两个目录config和scripts,如下图所示,此时可以在config目录下看到配置文件webpack.config.js.

2,React脚手架是支持sass的,所以我们可以像配置sass一样配置less,在webpack.config.js文件中找到下面几行代码,定义less变量。

1616577228693

3,在module属性下的rules中添加less的loader处理,找到sass的位置,然后对照配置一份。如下图所示

1616580055031

6,基础知识部分内容

(1),React JSX

React使用JSX来代替常规的JavaScript。

使用JSX的优点:

  • JSX执行更快,因为他在编译为JavaScript代码后进行了优化。
  • 他是类型安全的,在编译过程中就能发现错误。
  • 使用JSX编写模板更加简单快速。

简单的使用

1
2
3
4
ReactDOM.render(
<h1>Hello,Word!</h1>,
document.getElementById('example')
);

如果是写入多个标签,则需要使用一个div元素包裹他。

(2),JavaScript表达式

我们可以在JSX中使用JavaScript表达式,表达式写在{}中

1
2
3
4
5
6
ReactDOM.render(
<div>
<h1>{3+4}</h1>
</div>,
document.getElementById('example')
);

在JSX中不能使用if else语句,可以使用三元运算表达式来代替

1
2
3
4
5
6
ReactDOM.render(
<div>
<h1>{i == 1 ? 'true' : 'false'}</h1>
</div>
.document.getElementById('example')
)

(3),样式

React推荐使用内联样式

1
2
3
4
5
6
7
8
var myStyle = {
fontSize: 100;
color: '#ff0000'
};
ReactDOM.render(
<h1 style = {myStyle} >Daisy</h1>,
document.getElementById('example')
)

(4),数组

JSX允许在模板中插入数组,数组会自动展开所有成员

1
2
3
4
5
6
7
8
var arr = [
<h1>往昔不悔</h1>,
<h1>来日可期</h1>
];
ReactDOM.render(
<div>{ arr }<div>,
document.getElementById('example')
)