![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
前端白了又白兔
一个前端小白菜选手,用博客记录自己点滴的成长脚步。博客中的知识点来源于日常工作、学习总结或转载,如有错误之处,还请多多指正!
展开
-
React起步与JSX(一)
react开发环境准备一.安装node官网安装 (网址)二.安装官方脚手架 create-react-app1. npm install -g create-react-app2. create-react-app my-app将会为我们自动生成一个react项目三.脚手架生成的项目结构讲解1.项目结构index.js 入口,引入app,并渲染到页面上App.test.js...原创 2019-02-19 20:00:45 · 161 阅读 · 0 评论 -
React响应式设计及原理
一、 实例演示对input输入框实现双向数据绑定,当输入数据时,同时改变和显示input中的数据class TodoList extends Component {//1.初始化时定义数据constructor(props) {super(props);this.state = {inputValue: '',list: []}}render() {return (&l...原创 2019-02-19 20:01:27 · 5493 阅读 · 0 评论 -
React组件化(三)
React的组件化思想一.组件化伪代码/*子组件 TodoItem.js */import React, { Component } from 'react';class TodoItem extends Component { render() { return ( <div> item </div> ) }}/*父组件 TodoList...原创 2019-02-19 20:03:08 · 241 阅读 · 0 评论 -
React之prop和虚拟Dom(四)
一、PropTypes 和 DefaultProps1.PropTypes 和 DefaultProps通过PropTypes对组件中的数据进行强检验通过defaultProps对组件中数据进行设置默认值TodoItem.propTypes = { test: PropTypes.string.isRequired, content: PropTypes.arrayOf(PropTy...原创 2019-02-19 20:04:35 · 130 阅读 · 0 评论 -
React之生命周期(五)
概念生命周期是指在某一个时刻,组件会自动调用执行的函数。生命周期流程图具体生命周期过程1.Initializationconstructor() //组件初始化时自动执行2.MountingcomponentWillMount()//在组件即将被挂载到页面的时刻自动执行。先被执行render() //渲染componentDidMount() //挂载之后会被执行3.Upd...原创 2019-02-19 20:05:08 · 113 阅读 · 0 评论 -
React之CSS(六)
一.animation@keyframes定义的动画在执行结束后,最后一帧结束不会保存最后一帧的效果,可以通过在设置animation: all 1s ease-in forwards;保存最后一帧效果二.react-transition-group1.安装npm i react-transition-group -D2.使用 CSSTransition2.1 先导入import ...原创 2019-02-19 20:06:36 · 157 阅读 · 0 评论 -
React之Redux(七)
工作流程好理解的办法React Components: 借书人Action Creators: 借书Store: 图书馆管理员Reducers: 记录本Ant Design1. 安装npm i antd --save2. 使用import ‘antd/dist/antd.css’;使用Store1. store/index.js 是一个storeimport { cr...原创 2019-02-19 20:08:54 · 137 阅读 · 0 评论