react基础笔记
白柴-
汪汪汪~
展开
-
【react基础】3、react散乱语法注意事项
一、差值表达式1、语法:{差值表达式 }2、作用:基本可以写任何东西(1)可以渲染字符串,数组(渲染效果像字符串)。注意不能直接渲染对象,会报错。(2)可以写jsx,写比较,写判断。不能写if和for,但函数调用是可以的。二、react里面的标签不推荐写class,一般写className。因为class是js里面的关键字,所以它换成了className。三、绑定事件,onClick...原创 2019-08-18 16:28:36 · 158 阅读 · 0 评论 -
【react基础】1、简介和起步
一、简述React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 是一个用于构建用户界面的 JAVASCRIPT 库,我们一般用到的它的构建环境分为三个:1、react2、react-dom3、bablebabel最早用作将es6转为es5,后来facebook收购以后扩展了 解析jsx的功能二、最简单起步(无脚...原创 2019-08-18 14:49:05 · 141 阅读 · 0 评论 -
【react基础】14、react异步请求数据方法。
关于react异步请求数据有很多种方案。1、saga (用了er6生成器函数)2、promise3、thunk4、…为什么要用插件啊?是为了改造这个redux的action动作。如果异步的话,我们发动作,actionCreator只有返回对象,而异步这个插件能让你隔一段时间再发这个动作,是为了改造动作用的。本文用thunk,它可能不是最好的,但是是我用得比较习惯的。一、下载npm ...原创 2019-08-22 12:15:45 · 3324 阅读 · 0 评论 -
【react基础】13、redux的简单使用
一、原创 2019-08-21 12:57:06 · 149 阅读 · 0 评论 -
【react基础】12、弹射和代理设置(跨域)
一、弹射弹射的作用通俗来讲,就是把配置文件(node_modules/react-scripts)弹射到根目录下,并安装依赖。注意这个操作没有回头路,不能撤销。如何弹射?1、输入命令:npm run eject我每次这个命令的失败率有点高,可能有点背。如果你输入弹射命令后,项目启动失败,这里有个终极解决方案。2、失败的解决方案(1)把项目的这个node_modules文件全部删掉,...原创 2019-08-19 13:12:40 · 472 阅读 · 0 评论 -
【react基础】11、react的样式方案 classnames和styled-components
从npm官网来看,目前classnames的下载量越三百多万,styled-components下载量约一百多万。使用人数都是很多的,各有个的优缺点,以自己的代码习惯来选择吧。一、classnames使用官网对classnames的解释是:A simple JavaScript utility for conditionally joining classNames together.(将属性...原创 2019-08-19 12:03:16 · 1186 阅读 · 0 评论 -
【react基础】8、使用PropTypes进行类型检查
一、引入PropType(不用安装,脚手架自带)import PropTypes from "prop-types";二、类型检查写法(以规定必须传值,且值是数组为例)1、类组件:在组件里写static propTypes这个静态属性static propTypes ={ // list就是父组件传过来的props里面的值 list:PropTypes.array.isRequ...原创 2019-08-18 20:02:54 · 343 阅读 · 0 评论 -
【react基础】7、react获取文本框的值
React获取文本框的值1、e.target.value2、用ref标记节点,ref="textbox",使用时调用this.refs.textbox.value3、用ref标记节点,ref={(node)=>this.txt=node,node表示当前节点(名称可以修改),把当前节点赋值给txt。使用时调用this.txt.value例子:import React from 'r...原创 2019-08-18 19:39:37 · 3132 阅读 · 0 评论 -
【react基础】6、react的cli脚手环境
一、安装react脚手架1、全局安装npm i create-react-app -g检查是否安装成功:2、创建项目create-react-app 项目名3、启动项目yarn start,启动成功会在浏览器3000端口看到这个页面:...原创 2019-08-18 19:26:00 · 120 阅读 · 0 评论 -
【react基础】5、state的使用和this指向
1、react的组件存放数据有两种方式。(1)、存放外部数据的props,数据是只读,是不能修改的。(2)、存放组件内部数据的state,存放组件自己的数据,其是放到constructor(){}里面。2、关于constructor。(1)constructor是先于render执行的(2)constructor是什么时候调用?new的时候。new的时候做四件事:①新产生一个对象②让th...原创 2019-08-18 19:11:20 · 1427 阅读 · 0 评论 -
【react基础】4、组件components的定义和传值
一、怎么定义一个组件。组件分为无状态组件和类组件。1、无状态组件<div class="box"></div>var App = ()=>{ //组件的首字母大写 return <div>app component</div>}ReactDom.render(<App />,document.getElement...原创 2019-08-18 19:10:38 · 1027 阅读 · 0 评论 -
【react基础】2、初步认识render函数和jsx
一、ReactDom的render结构在控制台输出ReactDom:可以看出render函数有三个参数,第一个参数是指要渲染的元素,第二个参数是这些元素要放在什么容器里面,第三个是回调函数。二、render的第一个参数(jsx语法)1、jsx语法简介。请先阅读以下小例子 <div id="box"></div> <script> React...原创 2019-08-18 15:51:27 · 1844 阅读 · 0 评论