react路由
针对多个列表导航公用一个组建，然后 有两种路由方式1.import {HashRouter as Router,Route,Link} from 'react-router-dom'不过这个路由中会有#并且开发时会遇到错误，但是上线就没了。在最外面包裹的此时就是<HashRouter>2.import {BrowserRouter,Route,Link} from 'react-router-dom'这种是最好的...
2024-01-10
react介绍
注：React VR 可以编写全景用 官网地址https://reactjs.org/学习前可以先将Docs部分阅读一遍：https://reactjs.org/docs/getting-started.html...
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 安装
首先，我们需要安装node.js，直接搜索并在官网下载安装包。 node.js官网：https://nodejs.org/en/安装好node开始react的安装流程1.cnpm install -g create-react-app 首先用npm 安装 create-react-app工具，其可以自动地在本地目录中创建react项目。2.create-react-app my-app 然后就可以使用命令创建新的react项目...
2024-01-10
第一个react
个人觉着react和vue是很相似的，之前还转载过一篇介绍两个异同点的文章，那个时候还完全不懂react，现在才慢慢开始接触，所以只能总结一些个人的心得，首先自然是react的优点了，个人觉着主要有以下几点吧。React 可以开发单页面应用 spa（单页面应用）react 组件化模块化 开发模式React通过对DOM的...
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入门案例
现在最热门的前端框架，毫无疑问是 React。上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都...
2024-01-10
react学习日志3
四、state与生命周期1、什么是statestate 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改。组件的属性和状态改变都会更新视图。2、react组件的生命周期每个组件都包含“生命周期方法”，你可以...
2024-01-10
react 15来了
有段时间没做react的项目了，前两天才发现react搞了一个不太小的动作，不是遵循原来的小版本号迭代，从0.14.x继续更新，而是直接跳到了15.0.X。虽然业界一直有这个观点，0.x的版本视为非稳定版本即测试版本，但是react一直以来就是特立独行的始终不上1开头的版本而是继续在0.n的道路上一发而不...
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项目
1、运行环境要在node下。2、全局安装create-react-app npm install -g create-react-app3、create-react-app myapp /* 使用命令创建应用，myapp为项目名称 */4、npm start /*启动项目*/5、会看到浏览器打开：http://localhost:3000/提示！：1、create-react-app 是React官方提供的一个用于快速搭建项目的脚手架2、但...
2024-01-10
react 初学第一课
（我是用的是mac ，Windows需要自行配置node.js）在学习react之前了解了相关的几个插件能提高编写速度（sublime 3）。（本人手里有教学视频，有需要的请留下联系方式）安装方式打开编译器，找到View > Show Console复制：import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'...
2024-01-10
react 学习笔记4
用react-native的安装初始化AwesomeProject1.react-native init AwesomeProject cd AwesomeProject npm install 2 adb devices确定android虚拟机 adb devicesList of devices attachedemulator-5554 device3.react-native run-android 'enulator-5554'info Running jetifier to migrat...
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中常规删除功能
// 删除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中key的作用
背景：如果为父节点添加多个相同的子节点时，不添加key属性，会报错但同时也会渲染出dom，渲染出dom其实是证明能从差异对象中渲染出真实dom，但报错的原因是因为这种写法会影响渲染的性能，不利于生层dom节点。作用：当我们生成两个不同的数组时，我们可以使用相同的 key 值：key的作用主要是...
2024-01-10
react应用多入口配置
https://www.cnblogs.com/veromcae/p/10012937.html注意/* new ManifestPlugin({ fileName: 'asset-manifest.json', publicPath: paths.publicUrlOrPath, generate: (seed, files, entrypoints) => { const manifestFiles = files.reduce((manife...
2024-01-10
react 项目中的优化
react v16.6之后 的按需加载（2019.07.04更新）React这个版本新加了lazy和Suspense这两个功能。对于上面的按需加载，可以修改代码为：import React, { Suspense } from 'react';import Loading from './my-loading-component';const LoadableComponent = React.lazy(() => import('./my-component'));export default class...
2024-01-10
react的路由权限控制
在使用路由的时候，有的时候我们的界面只能够在登录之后才可以看的到，这个时候就需要使用路由权限控制了找了资料发现一个就是我使用的方法，一个是高阶组件。 原谅菜鸟看不太懂不会使用高阶组件…………首先在路由中做一个私有权限的限制，限制里面的path就是你的私有界面 router.js <Switc...
2024-01-10
对react 合成的理解
这是react事件机制系列文章的第二篇-对于合成的理解，今天咱们就来说说合成这个名词。刚听说合成这个词时候，感觉是特别高大上，很有深度，不是很好理解。当我大概的了解过react事件机制后，略微了解一些皮毛，我觉得合成不单单是事件的合成和处理，从广义上来说还包括： 首先就是对原生...
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
课程回顾开发环境和生产环境开发环境和生产环境有很多通用的代码，可以将通用的代码提取出来，例如loaders，output等，所以可以形成三个文件，webpack.prod.config.js、webpack.dev.config.js、webpack.common.config.js,分离出来如何将他们分别合并，这时候就需要使用到webpack-merge，进行配置合并课程内容1.课程回...
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
