react基础知识
一、什么是react？
react是用于构建用户界面的JavaScript库
二、基本知识
1.新建文件夹
2.在文件夹新建index.html文件
3.打开命令行工具（Ctrl+`）
4. npm init -y 初始化package.json
5.npm install react react-dom安装两个依赖包
创建DOM元素：
React.createElement（“要创建的元素”，“标签的类名{className:"类名"}，没有就是null”，“标签的内容”）
渲染DOM元素：
ReactDOM.render（创建的DOM元素，document.getElementById("根元素")）
三、react脚手架
1.新建文件夹
2.打开命令行工具（Ctrl+`）
3.npm i create-react-app -g
4.npx create-react-app 项目名称
5.cd 项目名称
6.启动项目 npm
四、JSX语法
4.1基础介绍
JSX是javascript XMl的简写，它是一种 JavaScript 的语法扩展，react中来描述界面用这种语法更简洁。
JSX 语法的本质：并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。
4.2语法基础
1.JSX 注释：推荐使用 {/* 这是注释 */}；
2.JSX中添加class类名：需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性；
3.在JSX创建DOM的时候，所有节点必须有唯一的根元素进行包裹；
4.在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和；
import React from "react";
import ReactDOM from "react-dom";
const box = (
我是标题我是里面的span元素
);
ReactDOM.render(box, document.getElementById("root"));4.3条件渲染和循环渲染
//导入两个依赖包
import React from 'react';
import ReactDOM from 'react-dom';
//创建元素
let num1 = 10;
let num2 = 20;
let score = 89;
let flag=true;
let fn = function(){
if(score>= 80 && score <= 100){
return "优秀";
}else if(score >= 60 && score < 80){
return "良";
}else{
return "不及格"
}
};
let arr = [111,222,333];
let students = [
{id:1,name:"tom",age:18},
{id:2,name:"jim",age:19},
{id:3,name:"jack",age:20},
];
let box = (
{num1}
{num1+num2}
{flag == true ? "是":"否"}
{fn()}
{arr}
{students.map(item=>(
{item.id}
{item.name}
{item.age}
))}
- 111
- 111
- 111
- 111
);
ReactDOM.render(box,document.getElementById("root"));4.4样式操作
行内样式
const box = 111
;添加类名样式
1.src下新建index.css文件
2.在文件中写入样式
3.在index.js中
const box =111
;
五、组件
5.1函数组件
- 函数组件的名称首字母必须大写
- 函数组件必须有返回值
- 箭头函数写法可以省略return
声明函数式写法
function Test() {
return 我是第一个测试组件;
}
ReactDOM.render(箭头函数写法
const Test = () => 我是第一个函数测试组件;
ReactDOM.render(5.2类组件
- 类测试组件类名也是首字母大写
- 类组件中得有render函数
- render函数中得有return返回值
- extends继承React中的Componnet类，可以使用父类的一些属性和方法
class Test extends React.Component {
render() {
return 我是第一个类测试组件;
}
}
ReactDOM.render(5.3组件抽离
1.新建js文件
2.导出新建的js文件，在新建的js文件最后写 export default 文件名
3.在index.js中导入新建的js文件 import 文件名 from "文件路径"
4.渲染文件
ReactDOM.render(<文件名 />, document.getElementById("root"));
5.4组件中的事件处理
绑定事件：on+事件名=事件处理程序（驼峰命名）
函数创建组件
函数组件又成无状态组件,纯显示数据建议用函数组件
function App() {
// 事件处理函数
function handleClick() {
console.log("被点击了");
}
return ;
}
ReactDOM.render(类创建组件
类组件又称为有状态组件,页面数据不仅显示还会更新建议有类组件
class App extends React.Component {
// 事件处理程序
handleClick() {
console.log("被点击了");
}
render() {
return ;
}
}
ReactDOM.render(六、state使用
state也就是状态，主要是保存组件内部的私有数据.
6.1状态的定义
class Test extends React.Component {
state = {
age: 18
};
render() {
return 张三的年龄是{this.state.age};
}
}
ReactDOM.render(6.2状态的更新
this.setState({xx:xx})
class Test extends React.Component {
state = {
age: 18
};
addAge() {
this.setState({
age: this.state.age + 1
});
}
render() {
return (
张三的年龄是{this.state.age}
);
}
}
ReactDOM.render(七、表单的处理
7.1文本框处理
表单元素绑定值用value属性，更改值用onChange事件
class Test extends React.Component {
state = {
name: ""
};
setName = e => {
this.setState({
name: e.target.value
});
};
render() {
return (
{this.state.name}
);
}
}
ReactDOM.render(7.2文本域处理
class Test extends React.Component {
state = {
content: ""
};
setContent = e => {
this.setState({
content: e.target.value
});
};
render() {
return (
{this.state.content}
);
}
}
ReactDOM.render(7.3下拉菜单处理
class Test extends React.Component {
state = {
hobby: "敲代码"
};
chooseHobby = e => {
this.setState({
hobby: e.target.value
});
};
render() {
return (
);
}
}
ReactDOM.render(7.4单选框和复选框
单选框和复选框是用checked属性不是value属性进行绑定
class Test extends React.Component {
state = {
isCheck: false
}
handleCheck = e => {
console.log(e.target.checked);
this.setState({
isCheck: e.target.checked
})
}
render() {
return (
);
}
}
ReactDOM.render(八、组件传值
8.1props接受数据
- props可以传递数字、字符串、数组、函数等很多数据类型
- props是只读属性，不能更改对象
8.2父传子
父组件通过给子组件添加属性进行数据传递，子组件通过props进行数据接收
lass Son extends React.Component {
render() {
return (
我是子组件{this.props.money}
);
}
}
class Parent extends React.Component {
render() {
return (
我是父组件
8.3子传父
子组件通过回调函数传递给父组件
class Son extends React.Component {
state = {
count: 10
};
handleClick = () => {
this.props.sendMsg(this.state.count);
};
render() {
return (
我是子组件
);
}
}
class Parent extends React.Component {
state = {
}
getContent(data) {
console.log(data);
}
render() {
return (
我是父组件
8.4兄弟传值
父组件统一管理多个子组件的状态
class Parent extends React.Component {
state = {
count: 10
};
addCount = () => {
this.setState({
count: this.state.count + 1
});
};
render() {
return (
九、组件的生命周期函数
1.组件初始化阶段
constructor()函数，创建组件的时候会自动执行，一般是在这里进行状态的初始化或者更改this的指向。
2.组件挂载阶段
render函数，每次渲染组件的时候都会调用这个函数，它主要是负责渲染页面结构的，主要不要在这个函数中调用this.setState()
componentDidMount函数，是组件挂载后执行，一般是在这个函数中执行对于DOM的操作和处理网络请求等。
3.更新阶段
- render函数 是渲染组件的时候触发
- componentDidUpdate函数 是更新state中的数据的时候触发
4.卸载阶段
componentWillUnmount是组件从页面卸载的时候触发
十、路由
1.安装指定包 npm install react-router-dom@5 --save
2.导入核心组件 import { BrowserRouter as Router,Route,Link} from "react-router-dom"
3.使用Router组件包裹整个应用
4.Link作为导航入口
5.配置路由出口
import './App.css';
//导入路由的依赖包
import { BrowserRouter as Router,Route,Link} from "react-router-dom"
//导入Home和News
import Home from './pages/Home';
import News from './pages/News';
//导入Home和News组件
function App() {
return (
首页
新闻
);
}
export default App;