React-Redux技术要点

发布于 Web前端

React动态路由与404

​ 动态路由在Router组件的path属性: {/url/:parameter} 1<Router path='/xxx/:id' component={xxx} /> Switch组件配置404页面:

发布于 Web前端

React路由的基本组件

React路由基础组件: 1.路由组件(router components) <BrowserRouter> (推荐)和<HashRouter>两种路由组件 Eg: 1234567import { BrowserRouter } from "react-router-dom";ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root')) 2.路由匹配组件(router matching components) <Route>和<Switch>路由匹配组件。

发布于 Web前端

React路由的基本使用

前段路由是一套映射规则,在React中,是URL路径与组件的对应关系。就是配置路径和组件(一一对应) 1.React路由安装: 1$ npm i react-router-dom 2.导入路由的三个核心组件:Router / Route / Link 1import { BrowserRouter as Router , Route, LInk } from 'react-router-dom' 3.使用Router组件包裹整个应用(重要!!!)

发布于 Web前端

React脚手架

使用脚手架初始化项目: 1.初始化项目,命令npx create-react-app xxx 2.启动项目,在项目根目录执行命令:npm start 12345678910public/ // 公共资源 index.html // 首页(必须) manifest.jsonsrc / index.js // 项目入口文件(必须) App.js // 项目的根组件 App.test.js // App组件的测试文件 serviceworker.js // 实现pwa(可选) 扩展:

发布于 Web前端

React表单处理

受控组件(双向绑定(v-model)):

发布于 Web前端

类组件中state和setState()

state的基本使用:状态(state)即是数据,是组件内部的私有数据,只能在组件内部使用,且state的值是对象,表示一个组件中可以有多个数据 初始语法: 123456789101112131415class KEL extends React.Component { constructor() { super () { // 初始化state this.state = { count: 0 } } render () { return { <div>有状态组件</div> } } }} 简化语法:

发布于 Web前端

类组件中this指向(注)

只有类组件下有这个问题(函数组件没有this) 利用bind修改this指向组件: 1234567891011121314class HEL extends React.Comonent { num = 0; addNum() { this.num += 1; alert(this.num) } render () { return ( <div> <h1 onClick={this.addNum.bing(this)}>数字加一</h1> </div> ) }} 利用箭头函数方法(推荐):该语法是实验性语法,由于babel的存在可以直接使用

发布于 Web前端

React事件处理

​ 事件绑定:React事件绑定语法与DOM事件语法相似,而语法则是on+事件名称={事件处理程序fn}需要注意的是React事件则采用小驼峰命名法:除第一个单词之外,其他单词首字母大写。 类 组件绑定: 12345678910class KL extends React.Component { headrClick () { ... } render () { return ( <button onClick={this.headrClick}></button> ) } } 函数组件绑定:

发布于 Web前端

React组件

React组件创建:特点:复用 独立 可组合 函数创建:使用JS函数或箭头函数创建的组件 1234567891011import React from 'react';const Dnz = () => { return ( <div> <h2>函数组件</h2> <p onClick={fn}>点击</p> </div> )}ReactDOM.render(<Dnz />, root) 【注意事项: ​ 1.类与函数名称都需以大写字母开头,使用大驼峰命名法。 ​ 2.函数组件必须有返回值,表示该组件的结构,而类组件则需提供render()方法。

发布于 Web前端

JSX基本使用

Babel会把JSX转译成一个名为React.createElement()函数调用 原生创建recat元素: 1const span = React.createElement('span', null, 'span') 用JSX创建react元素: 1const ul = <div><ul><li><span>hello worde!!!</span></li></ul></div> JSX中使用JS表达式: 语法:{JavaScript表达式} 注:语法中是单大括号,不是双大括号

发布于 Web前端

React初体验

引入react react-dom 安装包:npm Install react react-dom react:创建元素 react-dom:渲染元素 创建元素: 1const h1 = React.createElement('h1', {classNmae: 'k', id: 'hh'}, 'hello react') 渲染元素: 1React.render(div, document...

发布于 Web前端

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.