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 安装
首先，我们需要安装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优缺点
目录ReactJS快速回顾优点1、React速度很快2、跨浏览器兼容3、一切都是component：4、单向数据流5、同构、纯粹的javascript6、兼容性好劣势:1.不适合单独做一个完整的框架2、大多数坑没踩出来ReactJS是一套JavaSc...
2024-01-10
react_瞎敲
import {Component} from 'react';import './index.less';import {render} from 'less';export default class MyDiv extends Componet{ constructor(props){ super(props); this.state = { content : props.news }; } nextPage = ()...
2024-01-10
react搭建路由
一、路由—概念：实现spa(单页面应用)应用：整个项目只有一个完整的页面，页面切换不会刷新整个页面（不会感觉到页面闪烁，更加贴近原生应用的体验）二、路由—分类：1、React-Router：提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。 2、React-Router-DOM...
2024-01-10
创建react项目
npm搭建React项目React官网提供最简便的方法是使用create-react-app npx create-react-app my-appcd my-appnpm start也可以自己从0开始搭建一个react项目：使用webpack npm安装依赖包安装一个要打包到生产环境的安装包时，使用 npm install --save安装用于开发环境的安装包（例如，linter，测试库等），使用 npm install --...
2024-01-10
react书籍推荐
React全栈.pdf链接：https://pan.baidu.com/s/10Qzn8uTTKPVCfJ7R4FKYLQ提取码：pcfj深入React技术栈.pdf链接：https://pan.baidu.com/s/1c5kQbrQNMxAkyIurjGcxbw提取码：rm6mreact快速上手开发完整版.pdf链接：https://pan.baidu.com/s/1NtDQsM8X5cVCJdkcM7G81g提取码：a2x8...
2024-01-10
react简单组件
效果如图代码如下//App是父组件 调用Add组件和List组件，所以将Add组件和List组件写在App的render()进行渲染//App中的todos数组将会被Add组件和List组件公用，Add组件向todos数组添加数据和List组件将todos数组中的数据展示 class App extends React.Component{ constructor(props){ super(prop...
2024-01-10
react入门案例
现在最热门的前端框架，毫无疑问是 React。上周，基于 React 的React Native发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都...
2024-01-10
react 的理解
调用 setState 之后发生了什么？ 在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（reconciliation）；经过调和过程，react 会以相对高效的方式根据新的状态构建 react 元素树并且进行重新渲染整个 ui 界面；在react 得到元素树之后，react 会自动...
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
react 项目学习
1-2 前置准备开发环境： Node.js(v8.2+) NPM(v5.2+) Visual Studio Code(VS Code)VS Code常用插件： Prettier-Code formatter 格式化代码 Reactjs code snippets 快速生成 react 常用模块化代码 Auto Rename Tag 对相关标签重命名时，对应标签相应改变主要依赖库版本(需高于以下版本)： React: ^...
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开发环境准备
如何创建一个react文件首先需要下载node.js，打开cmd输入node-v如果输出以下则表示正确安装！在cmd中输入 npm install-g create-react-app，即可安装reactcreate-react-app todolist，即可创建一个todolist的文件夹cd todolist，进入todolist的文件夹最后执行yarn start，即可打开页面，如果这时候你看到页面，表示你已经建好...
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-自定义事件
没有嵌套关系的组件（如兄弟组件）之间的通信，只能通过自定义事件的方式来进行。var EventEmitter = require('events').EventEmitter;import React,{Component} from 'react';import ReactDOM from 'react-dom';let emitter = new EventEmitter();class ListItem extends Component{ static defaultProps = { ...
2024-01-10
react列表数据显示
react的列表数据一般是用map循环显示的。使用map注意：map的回调函数为箭头函数时，后面如果加大括号（箭头函数常规编写），必须要有return才可以，如果箭头函数后面没有大括号（箭头函数简写），可以不用加return。这是因为：箭头函数简写时只需要一个表达式和一个返回值。常规编写时必须有一...
2024-01-10
react之JSX本质
Jsx是语法糖，实质是js函数，需要babel来解析，核心函数是React.createElement(tag,{attrbuties},children)，参数tag是标签名可以是html标签和组件名，attrbuties参数是标签的属性，children参数是tag的子元素。用来创建一个vnode，最后渲染到页面上。可以参考babel中文网试一试测试：babel测试地址...
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表单事件和取值
常见的表单包括输入框，单选框，复选框，下拉框和多文本框，本次主要总结它们在react中如何取值。输入框在之前有说过输入框，可以先给input框的value绑定一个值，然后通过input框的改变事件来获取用户输入的值，并将这个值赋值给value绑定的值，就可以实现数据的双向绑定了。单选框单选框，首...
2024-01-10
