react入门
react入门laiqun@msn.cn1. react要解决的问题降低页面从服务器和用户输入得到数据，来展示页面的过程的复杂性。2. react中CSS的写法1. css类选择器的写法: 以前是class,现在要改成className，原因是和ES6的javascript语...
2022-05-19
react列表
实例1<div id="example"></div><script type="text/babel">const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((numbers) => <li>{numbers}</li>);ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('example'));</script>实例2function NumberLis...
2022-05-24
react状态
组件的生命周期分成三个状态：Mounting：已插入真实 DOMUpdating：正在被重新渲染Unmounting：已移出真实 DOMReact 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。componentWillMount()componentDidMount()componentWillUpdate(object nextProps...
2022-05-23
react介绍
注：React VR 可以编写全景用 官网地址https://reactjs.org/学习前可以先将Docs部分阅读一遍：https://reactjs.org/docs/getting-started.html...
2022-05-20
react优缺点
目录ReactJS快速回顾优点1、React速度很快2、跨浏览器兼容3、一切都是component：4、单向数据流5、同构、纯粹的javascript6、兼容性好劣势:1.不适合单独做一个完整的框架2、大多数坑没踩出来ReactJS是一套JavaSc...
2022-05-16
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...
2022-05-17
react采坑笔记
1. dva + antd input设置defaultVaule时查看时inpu有值但是页面上不显示解决办法 设置一个key值，当key值改变从新渲染<div key={this.props.value}><input type="text" defaultValue={this.props.value || ''} /> </div> ...
2022-05-22
react 基础篇
react 初学2018/10/27/ 10:18:59react 基础常识jsx 语法及使用规范jsx 是被使用在模板中的，也就是 return( jsx 写在这里 )变量这样写{value}, 执行js基础操作这样写{ 1 + 1 }， 还可传入数组，jsx会自动展开数组 render(){ var arr = [<div>我是div</div>, <p>我是p</p>, <span>我是span</span>] return（ <div>{arr}</div> ） }...
2022-05-17
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: ^...
2022-05-21
react学习(一)
组件和属性（props）函数式组件：function Welcome(props) { return <h1>Hello, {props.name}</h1>;}渲染一个组件：function Welcome(props) { return <h1>Hello, {props.name}</h1>;} //组件const element = <Welcome name="Sara" />;ReactDOM.render( element, document.getElementById('root'...
2022-05-22
react，没事桥着玩
import { Component } from 'react';import { base } from 'nc-lightapp-front';const { NCButton,NCFormControl } =base;export default class MyInput extends Component{ constructor(props){ super(props); this.state={ input:{} } }}...
2022-05-16
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", "...
2022-05-20
react元素的不可变性
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入ReactDOM.render()。考虑一个计时器的例子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
2021-08-06
react 基本配置使用
react入门的一些配置安装和启动npx create-react-app my-appcd my-app npm start 创建 ts的项目： npx create-react-app demo --template typescript react默认是将 webpack配置放置在node_module里面的，需要修改webpack配置，就的反编译出来，其中提供了一个指令npm run eject 执行命令是，可能会报错，是因为，需要先将代...
2022-05-15
react入门学习及总结
前言不知不觉一年又过去了，新的一年又到来，2019应该要好好思考，好好学点有用的东西，规划下自己今后的学习方向，不要再像以前那样感觉很迷茫。react简单介绍官网及中文文档https://reactjs.orghttps://github.com/facebook/reacthttps://react.docschina.org/和vue一样，react是一个用于构建用户界面的 JavaScript 库,...
2022-05-16
react环境搭建(-)
1.安装nodeJS环境2.安装 react 指令:npm install -g create-react-app3.创建项目 create-react-app react-demo4.安装yarn包管理工具 npm install i yarn5.安装react-router yarn add react-router ...
2022-05-23
react表单事件和取值
常见的表单包括输入框，单选框，复选框，下拉框和多文本框，本次主要总结它们在react中如何取值。输入框在之前有说过输入框，可以先给input框的value绑定一个值，然后通过input框的改变事件来获取用户输入的值，并将这个值赋值给value绑定的值，就可以实现数据的双向绑定了。单选框单选框，首...
2022-05-20
react学习之样式的编写
1.html:<div id="root"></div>直接在js中写 --- 样式1:ReactDOM.render( <h1 style={{color:'blue'}}>Hello, world!</h1>, document.getElementById('root'));效果如图：样式2：css:.hi{ color:red}js:ReactDOM.render( <h1 className='hi'>Hello, world!</h1>, document.getElementById...
2022-05-18react项目目录命名方式
大家更喜欢哪种方式，或者有没有哪一种好一些？带文件夹方式componentstab-listindex.tsxindex.scsstab-itemindex.tsxindex.scss不带文件夹方式componentstab-list.tsxtab-list.scsstab-item.tsxtab-item.scss回答带文件夹方式 +1...
2020-09-22
第五课之初步认识react
课程回顾开发环境和生产环境开发环境和生产环境有很多通用的代码，可以将通用的代码提取出来，例如loaders，output等，所以可以形成三个文件，webpack.prod.config.js、webpack.dev.config.js、webpack.common.config.js,分离出来如何将他们分别合并，这时候就需要使用到webpack-merge，进行配置合并课程内容1.课程回...
2022-05-19
react 基本应用（1）
前言 react 比较和核心的几个东西 virtual DOM、函数式编程、JSX、组件化、数据流（state，props）、生命周期。 搞定这些基本上使用不会出现啥问题了。Virtual DOM Virtual DOM 是React 用来操作DOM的方式，React把真是的DOM树转换成JS 对象树，也就是Virtual DOM；React通过操作Virtual DOM完成对真实DOM 树的批量...
2022-05-15初用 react 容易踩的坑
自定义组件忘记大写第一个字母var myComp = React.createClass({ render: function() { return <div>Hello world</div>; }});ReactDOM.render(<myComp />, mountNode);如上代码则不会渲染出组件，因为自定义组件的第一个字母必须要大写在组件上传递 onClick 等特殊属性接着上面的例子，把myComp改成MyComp，此时又容易写出如下代...
2022-04-07浅谈react前后端同构渲染
前后端同构渲染：当客户端请求一个包含React组件页面的时候，服务端首先响应输出这个页面，客户端和服务端有了第一次交互。然后，如果加载组件的过程需要向服务端发出Ajax请求等，客户端和服务端又进行了一次交互，这样，耗时相对较长。前后端同构渲染可以在页面初次加载时把所有地方渲染好...
2022-05-16react实现移动端下拉菜单
前言项目中要实现类似与vant的DropdownMenu:下拉菜单。看了vans 的效果 其实也没什么难度，于是动手鲁了一个这样的组件。项目的技术栈为react全家桶+material UI + ant Design mobile。vans的效果我自己实现的效果思路常规做法获取dom元素，动态修改选中dom的innerHtml。当然这种方式不是react推荐的我的做...
2020-02-28
