![](https://img-blog.csdnimg.cn/20191211143906341.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
星辰大海_enoch
这个作者很懒,什么都没留下…
展开
-
14React Redux入门
官网:https://redux.js.org/安装:npm install redux --savedemo案例:// redux的使用import {createStore} from "redux";// 初始化的时候执行一次 更新数据的时候执行一次// 第二参数action会接受dispath中传来的type值const store = createStore( (sta...原创 2019-12-20 11:38:35 · 95 阅读 · 0 评论 -
13React Router
安装React Routernpm install react-router-dom精准匹配: exact为true即可。赋值要写在大括号里,不然用引号是字符串。404:使用Switch组件解决import React from "react";import ReactDOM from "react-dom";import {BrowserRouter, Route, Switch}...原创 2019-12-20 07:51:11 · 98 阅读 · 0 评论 -
12在React中使用sass
React脚手架中已经把css-loader、style-loader、sass-loader安装好了,只需要安装node-sass就可以了。npm install node-sass --savestyles.scss做入口文件_base.scss放基础样式_setting.scss放提取变量命名规则:BEM — Block Element Modifier.header { ...原创 2019-12-19 11:42:29 · 547 阅读 · 0 评论 -
11在React中使用第三方组件
在jsx模板中传dom节点的两种方法:方法一:使用props自定义属性。import React from "react";import ReactDOM from "react-dom";const Layout = (props) => { return ( <div> <p>上</p> ...原创 2019-12-18 19:22:19 · 877 阅读 · 0 评论 -
10 create-react-app
官网地址:https://create-react-app.dev/临时下载安装create-react-app,没有占用全局。需要npm 5.2以上支持。npx create-react-app myapp下载好了之后启动项目:cd myappnpm run start把里面src下的内容清空,自己写一个index.js文件作为入口文件:写第一个页面import React ...原创 2019-12-18 14:44:35 · 178 阅读 · 0 评论 -
09State详解
需要完善的功能:功能1:删除单个Option功能2:刷新后数据依旧存在原创 2019-12-18 11:29:28 · 96 阅读 · 0 评论 -
08函数组件
React中组件分为类组件和函数组件,在函数组件中没有state属性,所以一些使用不到state属性的类组件可以使用函数组件。定义函数组件:const User = () => { return ( <div> <p>名字:</p> <p>年龄:</p> ...原创 2019-12-17 13:18:13 · 214 阅读 · 0 评论 -
07组件中的state属性
以前没有组件化的时候重新渲染数据要写一个render函数,然后每次渲染都是执行这个函数,渲染新的模板。组件化之后:state属性是一个对象,类似Vue中的data属性一样存值,当state中的数据改变就会重新渲染页面。初始代码:class Count extends React.Component { handleAddOne() { console.log("+1"...原创 2019-12-16 15:03:23 · 221 阅读 · 0 评论 -
06在组件中传值和定义事件
自定义属性传值:除了原有的属性如id className等之外的属性class MyApp extends React.Component { render() { return (<div> <Header title="我的标题1"/> </div>) }}class Hea...原创 2019-12-16 13:19:36 · 80 阅读 · 0 评论 -
05组件化思想
如何创建组件:定义一个类,然它继承React.Component属性。class Header extends React.Component { render () { // return jsx语法 return <p>我是一个组件</p> }}组件如何使用:const jsx = ( <div...原创 2019-12-15 17:37:56 · 85 阅读 · 0 评论 -
04input框和列表渲染
先看一段代码:const obj = { title: "帮你做决定", subtitle: "把你的命运交给电脑吧!", options: ["option1"]}const showOptions = (options) => { if(options && options.length > 0) { retur...原创 2019-12-15 16:08:10 · 569 阅读 · 0 评论 -
03绑定属性和事件
属性绑定在JSX语法的html代码中,标签属性比如id、class等,需要主要class的写法是className,因为在js中有class类这样的关键字,不允许使用。如let count = 0;// javascript XMLconst template = (<div> <h1 id='my-id' className="my-class"&...原创 2019-12-15 10:49:45 · 152 阅读 · 0 评论 -
02了解JSX语法
数据绑定:我们在js中写html代码,在html代码中可以使用大括号{}包括写js表达式,例如:let user = "方华永";let age = 18;// javascript XMLconst template = (<div> <p>我的名字是 {user}</p> <h3>今天有{age + ...原创 2019-12-13 21:26:29 · 107 阅读 · 0 评论 -
01初识React
在html文件中先使用CDN连接引入React:<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom....原创 2019-12-11 16:43:10 · 94 阅读 · 0 评论