React
前端白了又白兔
一个前端小白菜选手,用博客记录自己点滴的成长脚步。博客中的知识点来源于日常工作、学习总结或转载,如有错误之处,还请多多指正!
展开
-
React起步与JSX(一)
react开发环境准备 一.安装node 官网安装 (网址) 二.安装官方脚手架 create-react-app 1. npm install -g create-react-app 2. 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 · 5496 阅读 · 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 和 DefaultProps 1.PropTypes 和 DefaultProps 通过PropTypes对组件中的数据进行强检验 通过defaultProps对组件中数据进行设置默认值 TodoItem.propTypes = { test: PropTypes.string.isRequired, content: PropTypes.arrayOf(PropTy...原创 2019-02-19 20:04:35 · 130 阅读 · 0 评论 -
React之生命周期(五)
概念 生命周期是指在某一个时刻,组件会自动调用执行的函数。 生命周期流程图 具体生命周期过程 1.Initialization constructor() //组件初始化时自动执行 2.Mounting componentWillMount()//在组件即将被挂载到页面的时刻自动执行。先被执行 render() //渲染 componentDidMount() //挂载之后会被执行 3.Upd...原创 2019-02-19 20:05:08 · 114 阅读 · 0 评论 -
React之CSS(六)
一.animation @keyframes定义的动画在执行结束后,最后一帧结束不会保存最后一帧的效果,可以通过在设置animation: all 1s ease-in forwards;保存最后一帧效果 二.react-transition-group 1.安装 npm i react-transition-group -D 2.使用 CSSTransition 2.1 先导入 import ...原创 2019-02-19 20:06:36 · 163 阅读 · 0 评论 -
React之Redux(七)
工作流程 好理解的办法 React Components: 借书人 Action Creators: 借书 Store: 图书馆管理员 Reducers: 记录本 Ant Design 1. 安装 npm i antd --save 2. 使用 import ‘antd/dist/antd.css’; 使用Store 1. store/index.js 是一个store import { cr...原创 2019-02-19 20:08:54 · 139 阅读 · 0 评论