![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React.js
zhuhui2000
这个作者很懒,什么都没留下…
展开
-
React.js--1.webpack的基本配置
1.首先确保自己电脑上面已经安装node.js2.配置webpack第一步:以管理员身份打开cmd第二步:进行 全局更新,cnpm install npm -g(使用cnpm, 淘宝镜像会比较快)第三步:查看一下npm版本:npm -v,一切准备就绪之后,准备安装webpack,以及webpack-cli第四步:依次输入命令:npm install webpack -g // 全局...原创 2019-04-16 09:15:42 · 96 阅读 · 0 评论 -
React.js--10class的基本使用
1.在src目录下新建一个文件(我建的是4.class–基本使用.js)2.在index.js中导入刚刚新建的文件import React from 'react'import ReactDOM from 'react-dom'import '@/4.class--基本使用'ReactDOM.render(<div> 123 </div>,docum...原创 2019-04-24 20:56:12 · 537 阅读 · 0 评论 -
React.js--11.class实例方法和静态方法
实例方法:JavaScript语言的传统方法是通过构造函数,定义并生成新对象,使用prototype 属性向对象添加属性和方法。静态方法:不能在对象的实例上调用静态方法,而应该通过对象本身调用1.传统的使用构造函数的方式来使用实例方法和静态方法:function Person(name,age){ this.name = name; this.age = age;}Pe...原创 2019-04-24 21:21:48 · 900 阅读 · 0 评论 -
使用react-transtion-group
1.App.js中的代码import React, { Component, Fragment } from 'react';import { CSSTransition } from 'react-transition-group';import './style.css';class App extends Component{ constructor(props) { ...原创 2019-05-20 16:44:28 · 539 阅读 · 0 评论 -
UI组件和容器组件的拆分
1.首先,以前面的TodoList为例以下是原来的TodoList中的render函数中的内容,我们可以将组件中关于UI渲染页面的封装到一个文件中render() { return ( <div> <div style={{marginTop:'10px',marginLeft:'10px'}}> ...原创 2019-05-25 08:19:10 · 631 阅读 · 0 评论 -
UI组件的优化
因为TodoListUI中只有render一个函数,我们可以进行如下优化,将其写成一个箭头函数的形式,并且传入参数props,并且将之前的this.props替换成propsimport React, { Component } from 'react';import { Input, Button, List } from 'antd';const TodoListUI = (props)...原创 2019-05-25 09:10:44 · 118 阅读 · 0 评论 -
Redux中使用redux-thunk进行ajax请求发送
https://blog.csdn.net/YU_M_K/article/details/81070528转载 2019-05-25 17:41:30 · 279 阅读 · 0 评论 -
redux中的store简单使用
1.在src目录下新建一个store文件夹,并且在store文件夹中新建两个文件index.js和reducer.js2.安装redux,在命令行中输入:yarn add redux3.index.js文件中的代码://引入reduximport { createStore } from 'redux';import reducer from './reducer';//创建s...原创 2019-05-22 15:47:04 · 2621 阅读 · 0 评论 -
redux中的store使用(2)
导图:1.首先使用谷歌浏览器安装插件工具redux DevTools更多工具----扩展程序----打开Chrome网上应用店----Redux DevTools2.安装好之后在store文件夹下的index.js中的createStore中添加window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_E...原创 2019-05-22 21:59:09 · 375 阅读 · 0 评论 -
使用react-redux(1)
在项目中安装react-redux yarn add react-redux因为现在项目中只有一个index.js,所以我们需要在src目录下新建一个TodoList.js文件在index.js中,我们需要引入TodoList.js文件,index.js中代码如下:import React from 'react';import ReactDOM from 'react...原创 2019-05-27 14:47:49 · 134 阅读 · 0 评论 -
actiontypes类型的拆分
1.在store文件夹中新建一个文件actionTypes.js,在该文件中定义一些常量把type的类型赋值给他们并且导出export const CHANGE_INPUT_VALUE = 'change_input_value'export const ADD_TODO_ITEM = 'add_todo_item';export const DELETE_TODO_ITEM = 'dele...原创 2019-05-23 10:29:53 · 1064 阅读 · 0 评论 -
react creact-react-app 构建完项目后,npm start启动失败怎么解决
首先,贴一下我的错误,在使用create-react-app创建一个项目之后,我用vscode打开这个项目,并且在终端输入命令npm start之后,出现报错的情况: jianshu@0.1.0 start C:\Users\23902\Desktop\jianshu> react-scripts startThere might be a problem with the pro...原创 2019-05-27 21:50:09 · 9920 阅读 · 4 评论 -
使用actionCreators统一创建action
1.在store文件夹下面新建一个文件名为actionCreators.js2.在actionCreators.js文件中//导入我们需要的CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM数据import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from "./act...原创 2019-05-23 21:20:41 · 740 阅读 · 0 评论 -
React.js--17使用localIdentName自定义生成格式
使用localIdentName自定义生成格式可选的参数有:path:表示样式表相对于项目根目录所在路径;name:表示样式表文件的名称;local:表示样式的类名定义名称;hash:length:表示32位的hash值。在webpack.config.js文件中modules后面添加进去,代码如下: { test: /\.css$/, use: ['style-loader', ...原创 2019-04-28 21:31:53 · 4283 阅读 · 5 评论 -
React.js--9配置webpack并设置根目录
import Hello from './components/Hello'在这一行代码中,我们可以将./用@来表示,@主要是用来表示根目录中src这一层目录,会方便很多具体方法:在webpack.config.js这一文件中添加代码:alias:{//表示别名 '@':path.join(__dirname,'./src')//这样,@就表示项目根目录中src的这一层的路径 }2.将...原创 2019-04-24 10:29:52 · 1670 阅读 · 0 评论 -
React.js-5安装babel插件
1运行命令:cnpm i babel-core babel-loader babel-plugin-transform-runtime -D2.运行命令;cnpm i babel-preset-env babel-preset-stage-0 -D如果这里有报错,如下:ERROR in ./src/index.jsModule build failed (from ./node_modul...原创 2019-04-21 16:46:37 · 318 阅读 · 0 评论 -
关于安装babel时出现的错误以及解决办法
在开始接触到react之初,安装babel插件是一件必须要做的事情,但是我在安装的时候,出现了一个错误,这个错误刚开始很头疼,在网上找了各种解决的办法,但是一直不行,直到今天,也就是解决安装错误的第三天,临近崩溃的我,安装成功了,首先来看下错误。ERROR in ./src/index.jsModule build failed (from ./node_modules/_babel-load...原创 2019-04-21 16:53:54 · 4056 阅读 · 0 评论 -
React--6.在jsx中书写js代码
1.jsx语法的本质:不是直接把jsx渲染到页面上,而是在其内部先转换成createElement的形式,再进行渲染;2 在jsx中混合写入js表达式:在jsx语法中,需要把代码写到{}中应用举例:渲染数字:渲染字符串渲染布尔值为属性绑定值渲染jsx元素渲染jsx数组将普通字符数组转换为jsx数组并渲染到页面上import React from 'react'import...原创 2019-04-22 20:59:04 · 3405 阅读 · 0 评论 -
React.js--12两种创建组件方式的比较
使用class关键字创建的组件,有自己的私有数据(this.state)和生命周期函数,但是使用function创建的组件,只有props,没有自己的私有数据和生命周期函数用构造函数创建出来的组件叫做“无状态组件”(用的少)用class关键字创建出来的组件叫做“有状态组件”(用的多)什么情况下使用有状态的组件,什么情况下使用无状态的组件?如果一个组件需要有自己私有的数据,使用class关键...原创 2019-04-27 14:15:46 · 122 阅读 · 0 评论 -
React.js--13使用组件做一个评论区的内容
在这里将组件与index.js分离开来。在components文件中新建一个文件CmtItem.jsx,这里面放入评论列表的构建,代码如下:import React from 'react'//使用function构造函数,定义普通的无状态组件export default function CmtItem(props){ return <div > <...原创 2019-04-27 15:11:20 · 298 阅读 · 0 评论 -
React.js--14在组件中使用style行内样式(3种封装)
以下代码都在CmtItem.jsx文件中1.样式的第一层封装,将样式对象和结构分离:const itemStyle ={ border: '1px dashed #ccc', margin: '10px', padding: '10px', boxShadow: '0 0 10px #ccc'}const userStyle ={ fontSiz...原创 2019-04-28 10:46:32 · 6712 阅读 · 0 评论 -
React.js--15使用css样式表美化组件
在src目录下新建一个文件css夹,在css中新建一个css文件为CmtList.css在CmtList.css文件中就可以写需要的css样式。.title{ color: red;}2.在CmtList2.jsx中导入列表组件需要的样式表;import cssobj from '@/css/CmtList.css'这里看一下CmtList2.jsx的完整代码:imp...原创 2019-04-28 14:46:33 · 216 阅读 · 0 评论 -
React.js--7组件的创建(2种方式)
1 .方式一:1.创建组件:function Hello(){ //这里面必须要有return,返回一个合法的JSX虚拟DOM元素 //如果在一个组件中,return null则表示这个组件里面是空的,什么都不会渲染 //return null; return <div>Hello 组件</div>}2 .为组件传递...原创 2019-04-23 20:59:47 · 144 阅读 · 0 评论 -
React.js--8实现组件的分离以及后缀名的省略
详见博客(https://blog.csdn.net/weixin_34223655/article/details/87601662)转载 2019-04-23 22:06:19 · 420 阅读 · 0 评论 -
React.js--16为普通css样式通过modules参数启用模块化
1.在webpack.config.js文件中css-loader之后追加参数,通过?参数'css-loader?modules’这里面的固定参数modules表示为普通的css样式表启用模块化2.分别写两个css文件对应组件,CmtList.css和CmtItem.cssCmtList.css内的代码:.title{ color: red; text-align: ce...原创 2019-04-28 16:01:01 · 679 阅读 · 1 评论 -
React.js--4.使用react渲染虚拟DOM到页面上
1原创 2019-04-19 11:21:19 · 583 阅读 · 0 评论 -
10.使用redux-immutable统一数据格式
1.安装redux-immutable在终端中输入命令:yarn add redux-immutable重启终端:npm start2.在src目录下的store中的reducer(总的数据)中引入redux-immutable3.回到header目录下的index.js,这时候我们获取focused的格式就统一了,这样state也变成了一个immutable对象...原创 2019-06-01 14:08:11 · 505 阅读 · 0 评论