React
weiweicn!
这个作者很懒,什么都没留下…
展开
-
[React] 15.React - React中的前端路由
一. url是什么:访问不同url, 展示不同的组件二. 使用步骤:安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install [email protected] --save)两个js文件,分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js;访问localhost:3000/list的时候就显示list.js。代码如下:li原创 2022-04-17 10:57:40 · 917 阅读 · 0 评论 -
[React] 14.React -使用Ant Design组件库
进入Ant Design官网,点开始使用进入菜单栏:Ant Design of React,找到安装命令,在命令行中执行安装npm install antd --save安装完成后,若想使用组件库,需将样式引入:在index.js中,引入代码import 'antd/dist/antd.css';在component中引入要使用的组件:若要引入button:import { Button } from 'antd';之后就可使用Button组件5. 使用button组件:r.原创 2022-04-16 13:19:09 · 661 阅读 · 0 评论 -
[React] 13.React -获取远程数据
安装第三方工具:axios在控制台中进去项目目录,执行npm install axios --save重启项目:npm run dev代码中引入axios包 import axios from "axios";将ajax请求放到componentDidMount()函数中componentDidMount() { const promise = axios.get('接口地址'); promise.then((res)=> { conso.原创 2022-03-22 18:48:43 · 1055 阅读 · 0 评论 -
[React] 12.React -组件生命周期函数
在React中,生命周期函数指的是组件在某一时刻会自动执行的函数初始化阶段(Initialization): 没有生命周期函数,只是在constructor里做数据的设置页面挂载阶段(Mounting): 只有页面在第一次渲染的时候才会执行Mounting过程componentWillMount函数:准备挂载2)render函数:挂载3)componentDidMount函数:挂在完毕更新(Updation): 数据发生变化时执行1).shouldComponentUpdate():原创 2022-03-21 21:30:00 · 2750 阅读 · 0 评论 -
[React] 11.React -ref的使用
要实现的功能:计算出‘增加’按钮距离浏览器顶部的距离,如下图所示给按钮增加一个ref属性,一般来说,让它等于一个函数,该属性用于获取元素的dom,代码如下:<button onClick={this.handleBtnClick} ref={(button)=>{this.buttonElem = button}}>增加</button>点击按钮之后,console出buttonElem,如下2. 可通过buttonElem.clientTop获取button原创 2022-03-19 17:22:33 · 306 阅读 · 0 评论 -
[React] 10.React - Props, State与render函数
要做的功能,点击增加按钮,数字加1新建一个counter.js的文件,代码如下:import React, {Component, Fragment} from "react";class Counter extends Component { render() { return ( <Fragment> <button>增加</button> &原创 2022-03-07 19:46:26 · 240 阅读 · 0 评论 -
[React] 9.React - 组件拆分与组件之间的传值
拆分以上内容,将list中的每一个项目拆成一个组件,将Input拆成一个组件一、将list中的item拆成一个组件新建一个文件:TodoItem.js初始的TodoItem.js代码如下:import React, {Component} from "react";class TodoItem extends Component { render() { return <li>this is an item</li> }}exp.原创 2022-03-02 15:27:07 · 464 阅读 · 0 评论 -
[React] 8.React -给页面添加样式 && for 语法
一、要实现给input框的border加颜色新建一个style.css: 添加样式input.input { border: 4px solid green;}将样式引入html:import './style.css'给Input框添加样式:<input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)} onKeyUp={this.handleKeyUp.bin原创 2022-03-01 17:38:43 · 702 阅读 · 0 评论 -
[React] 7.React - 实现TodoList删除功能
要实现点击列表中的某一项,就把该项删除给li标签添加一个点击事件:handleItemClick <li key= {index} onClick={this.handleItemClick.bind(this, index)}>{value}</li>点击事件函数:// 列表点击事件 handleItemClick(index) { const list = [...this.state.list]; list.splice原创 2022-03-01 11:53:28 · 733 阅读 · 0 评论 -
[React] 6.React - 实现TodoList新增功能
将列表中的数据放到数组中:constructor(props) { super(props); this.state = { inputValue: '', list: ['learn React', 'learn Component'] } }循环数组中的数据,并展示到页面上:render() { return( <Fragment>.原创 2022-02-25 16:42:54 · 341 阅读 · 0 评论 -
[React] 5.React 中数据驱动的设计思想和事件绑定
想要达到的效果是在input中输入数据之后点回车,会添加到下面的列表中:React中是通过数据来操作页面在构造函数中定义数据:把要定义的两项数据(input中的内容和列表)放到this.state中,如下:constructor(props) { super(props); this.state = { inputValue: 'hello world', list: [] } }将in原创 2022-02-24 10:09:46 · 591 阅读 · 0 评论 -
[React] 4.使用React编写TodoList功能 --- UI 布局部分
新建一个TodoList组件(注:组件开头字母必须是大写的)index.js中引入组件若想替换掉TodoList中最外层的div,可以用占位符Fragement包裹和import React, {Component, Fragment} from 'react';class TodoList extends Component { render() { return( <Fragment> &l..原创 2022-02-23 15:12:12 · 269 阅读 · 0 评论 -
[React] 3.什么是JSX语法
JSX中标签的类型:在JS中写html标签1)普通的html标签,如注:开头字母是小写的2)组件标签,如index.js中的注:开头字母必须是大写的原创 2022-02-18 18:36:14 · 343 阅读 · 0 评论 -
[React] 2.React中的组件
React中什么是组件:组件就是页面上的一部分如图中类App继承了React.Component这个基类,那么App就称为React的一个组件import React from 'react';class App extends React.Component() { render() { return ( <div> Hello world </div> ) }}export default App.原创 2022-02-18 11:17:39 · 296 阅读 · 0 评论 -
[React] 1.React开发环境准备&工程目录简介
一、 开发环境的准备确保已经安装过Node,这里具体方法不赘述用脚手架创建App1)进入react的官网:React官网,点击‘Get Started’按钮点击右侧‘Create a New React App’后跳转页面3)依次运行三个命令项目运行后显示如下:二、工程目录.gitignore: 配置不想上传到git上的文件node_modules: 项目依赖的所有第三方类库(npm install / yarn install之后自动生成)public下的fa原创 2022-02-17 18:15:57 · 257 阅读 · 0 评论