编写 TodoList 功能 react 入口 js #src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList' ReactDOM.render(<TodoList />, document.getElementById('root')); #src/TodoList.js // Fragment 为占位符 import React, {…

1. 安装 redux 监听工具 ( 需要翻墙 ) 打开 谷歌商店 搜索 redux devtool 安装第一个即可 2. 安装 redux yarn add redux 3. 创建 一个 store 文件夹( 与 项目 index.js 文件 同级 ) 并在 store 内 创建一个 reducer.js 文件 用于 区分各组件状态 # store/reducer.js // 初始化 各组件的状态 const defaultState = { inputValue : '', // 初始化 …

3-1 使用React编写TodoList功能 import { Fragment} from ‘react’ Fragment是占位符 用于替代最外层div元素, 防止生成的元素会有两层div嵌套这种情况出现 (图片中这里rootdiv 下面就没有多余的那一层div了) 3-2 react中的事件绑定 this.func.bind(this) 3-3 实现TodoList新增删除功能 immutable: reacnt 要求 state 不允许我们做任何改变 如果要改,就拷贝出一份副本,然后再…

1. redux 简述 当 store 内的 数据进行变更的时候  多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store  代表数据存储 (例如: 图书馆管理员) React Components 代表 react 组件 (例如: 借阅的人) Action Creators    代表 react 组件所触发的时间 ( 例如: 借阅的人像图书馆借的什么书 ) Reducers 代表 react 各个组件的状态 (例如:图书馆管理员记录借了什么书) 3.…

1. 安装 react-redux yarn add react-redux 2. react-redux 编写 TodoList 使所有子组件 都能使用 store #index.js import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList'; import { Provider } from 'react-redux'; import store from '.…

React Native移动框架功能研究 此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框架. 二.React Native的愿景 1.提供一直的跨平台开发原生APP的一直体验. 2.使用JS和React提高跨平台开发效率. 三.React Native提供的特性 1.提供了丰富的原生组件,可以是APP获得平台一致的视觉效果和体验,同时获得最佳的性能和流畅性. // iOS & Andr…

HTML&CSS基础-html注释功能 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  一.什么是HTML(Hypertext Markup Language) 超文本标记语言,标准通用标记语言下的一个应用,具有规则的一门语言,可以被浏览器识别,HTML具体以下功能: 它负责网页的三个要素之中的结构; HTML使用标签的形式来表示网页中的不同组成部分; 所谓超文本指的时超链接,使用超链接可以让我们从一个页面跳转到另一个页面. 元素: 我们还将一个完整的标签成为元素.这里我们可…

1.将 todoList 进行拆分 创建 编写TodoList.js import React, {Component, Fragment} from 'react';import TodoItem from './TodoItem';class TodoList extends Component { constructor(props) { super(props); this.state = {inputValue: '', list: []} this.inputChange = thi…

在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我这里会贴出来现成的东西供大家使用. 关于es6的内容,在写案例的时候会有涉及,我会贴出来相应的教程,没有了解过es6的小伙伴可以去看一下. 创建项目 1. 创建一个项目文件夹(我是在D盘创建了一个react文件) 2. 进入react文件夹,新建两个文件package.json和webpack.co…

本文将一步步介绍如何使用React或anu创建 一个弹出层. React时代,代码都是要经过编译的,我们很多时间都耗在babel与webpack上.因此本文也介绍如何玩webpack与babel. 我们创建一个ui目录,里面添加一个package.json.内容如下,里面已经是尽量减少babel插件的使用了. { "name": "ui", "version": "1.0.0", "description"…