react项目
React 简书项目1：create-react-app “jianshu”2:项目准备：备注：是全局的样式，放入reset.css。3：引入第三方模块 styled-components ，yarn add styled-components -S，该模块是把css变成js文件，把index.css换成style.js 4：style.js引入reset.cssimport { createGlobalStyle } from 'styled-components'export const Global...
2024-01-10
react初体验
Microsoft Windows [版本 6.1.7601]版权所有 (c) 2009 Microsoft Corporation。保留所有权利。D:\WebstormProjects\hello-react>create-react-app hello-worldCreating a new R...
2024-01-10
react 基础
react 组成 一、react 组件基础 1、React 虚拟Dom概念，这是react性能高效的核心算法 2、React 组件，理解react组件化 3、React 多组件嵌套 4、jsx 内置表达式 5、生命周期，纵观整个react的生命周期 2、React 属性与事件 1、State 属性，控制着react...
2024-01-10
react 近期
ECMAScript 6 入门：http://es6.ruanyifeng.com/#docs/destructuring#%E6%95%B0%E7%BB%84%E7%9A%84%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BCReact的双向绑定：http://www.cnblogs.com/kuailingmin/p/4609721.html...
2024-01-10
react项目目录
yarn.lock项目文件依赖安装包的版本号package.json每个脚手架工具里面都有一个package.json文件，表示脚手架工具其实是一个node包工具，有一些项目介绍，依赖的包等gitgnore如果用git管理代码的话，有些文件不想传到git仓库的话，可以把这些文件定义到这里。...
2024-01-10
react采坑笔记
1. dva + antd input设置defaultVaule时查看时inpu有值但是页面上不显示解决办法 设置一个key值，当key值改变从新渲染<div key={this.props.value}><input type="text" defaultValue={this.props.value || ''} /> </div> ...
2024-01-10
显示react配置
1、由于react默认隐藏webpack配置需要手动显示。npm run eject//Are you sure you want to eject? This action is permanent. (y/N) y...
2024-01-10
react中使用屏保
1,默认路由路径为屏保组件 1 <HashRouter history={hashHistory}> 2 <Switch> 3 <Route exact path="/" component={ScreenSaver} /> 4 <Route exact path="/brandIntroduce" component={BrandIntroduce} /> 5 ...
2024-01-10
1 react 入门
1 前期准备安装node.js 安装编辑器（sublime text3）2 创建工程（使用create-react-app脚手架创建工程）脚手架使用方法参考 Facebook官方npx create-react-app my-appcd my-appnpm start3 创建多组件在src下面创建一个components的文件夹，在component文件价下面创建Home.js,Header.js组件4 动态数据react组件中动态数据的使用，...
2024-01-10
react项目开发入门
在html头部引入react相关js文件<!-- react核心库--><script src="../static/react/react.production.min.js" charset="UTF-8"></script><!-- react dom相关功能--><script src="../static/react/react-dom.production.min.js" charset="UTF-8"></script><!-- jiangJSX语法转换为JavaScript语法--><scr...
2024-01-10
react项目8点优化
本文篇幅较长，将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让...
2024-01-10
react初入学习笔记
搭建react运行环境 （先装node.js）命令提示符（cmd）1.安装命令react：npm install -g create-react-app2.用cd切换到已创建的文件夹下，（例：g: 回车 cd 001/react 这样）3.创建react项目文件名 create-react-app demo01（这个是文件名，随便取）4.然后再demo01这个项目文件下按住shift+右击 选择“在此处打开命令窗口” 输...
2024-01-10
react中key的作用
背景：如果为父节点添加多个相同的子节点时，不添加key属性，会报错但同时也会渲染出dom，渲染出dom其实是证明能从差异对象中渲染出真实dom，但报错的原因是因为这种写法会影响渲染的性能，不利于生层dom节点。作用：当我们生成两个不同的数组时，我们可以使用相同的 key 值：key的作用主要是...
2024-01-10
react中常规删除功能
// 删除handleDeleteNiche = async () => {// 方法一：// let title = "删除";// let message = ( <div><p > 商机删除后列表将不可见此商机， 请谨慎操作！ </p> </div>);// let ret = await this.confirmModal(title, message);// ret && this.deleteNiche();// };// deleteNiche = async () => {// const ...
2024-01-10
react的路由权限控制
在使用路由的时候，有的时候我们的界面只能够在登录之后才可以看的到，这个时候就需要使用路由权限控制了找了资料发现一个就是我使用的方法，一个是高阶组件。 原谅菜鸟看不太懂不会使用高阶组件…………首先在路由中做一个私有权限的限制，限制里面的path就是你的私有界面 router.js <Switc...
2024-01-10
react 写一个贪吃蛇
示例：全部代码如下：snake.jsximport React, { Component } from 'react';import PropTypes from 'prop-types';import { is, fromJS } from 'immutable';import "./snake.less";const TYP = { normal:1, head:2, body:3, food:4};const DIRCTION = { top:1, bottom:2...
2024-01-10
学习react心得及总结
注意学习这个在D盘：小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字react生命周期及其它注意事件/** react中组件里的render函数可以找到组件的this* 在render方法里调用函数时函数是可以找到this的，react中组件里的方法函...
2024-01-10
react 环境快速搭建
1. yum install nodejs2.npm 淘宝镜像配置 参考 http://blog.csdn.net/wangweiscsdn/article/details/534149653.node -v4.npm -v5. 项目目录搭建[html] viewplain copy//package.json { "name": "chatme", "version": "1.0.0", "description": "", "author": "weiwei", "...
2024-01-10
对react 合成的理解
这是react事件机制系列文章的第二篇-对于合成的理解，今天咱们就来说说合成这个名词。刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。当我大概的了解过react事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括： 首先就是对原生...
2024-01-10
react学习记录（一）
一、React是什么 声明式写法（强调结果，命令式编程强调过程） 组件化 一次学习，随处编写（多种应用场景，web程序，原生手机应用，系统应用，命令行工具）二、为什么学习react 大公司加持-facebook 最流行，使用人数最多，被开发者喜爱 简...
2024-01-10
从零开始搭建react应用
用create-react-app搭建react应用，了解npm run start的工作过程。 第一步：安装脚手架 create-react-app1. 在node里 npm install create-react-app 或 yarn add create-react-app2. 下载依赖 npm install 或 yarn3. 下载好之后，运行npm run start 或 yarn start， 现在脚手架就跑起来啦...
2024-01-10
react hook 练手
代码：App.jsimport React, { useState, useEffect, createContext, useContext, useRef } from 'react';import { Button } from 'antd-mobile';const Text = createContext(); // useContext 要和 createContext 一起使用export default function App() { const inputRef = useRef();...
2024-01-10
react技术栈实践（1）
本文来自网易云社区作者：汪洋背景最近开发一个全新AB测试平台，思考了下正好可以使用react技术开发。实践前技术准备首先遇到一个概念，redux。这货还真不好理解，大体的理解：Store包含所有数据，视图触发一个Action，Store收到Action后，返回一个新的 State，这样视图就发生变化，State计算过程叫...
2024-01-10
6大爱上react 的理由
本文翻译自：https://blog.syncano.io/reactjs-reasons-why-part-1/（⚠️js 中混用html 也一直是外界所诟病的一点，好不容易把前端三驾马车分开，现在又搅合在一起）react 使用一个新的叫做JSX 的语法，它能够让你将html 混入javascript 中一起写。你还是可以编写纯的javascript ，但是还是建议你尝试一下这种新的写...
2024-01-10
react学习笔记--安装
最后一步操作失败，百度后发现应该是使用了国内镜像的原因，把Npm的默认镜像改回回来的弄好之后可以重新设置Npm的默认镜像为淘宝镜像npm configset registry https://registry.npm.taobao.org此时进入生成的目录npm start即可启动项目可以把src目录下的文件删除，建立Index.css,index.js文件编写自己需要的代码在inde...
2024-01-10
