第三章：react 应用( 基于 react ）

3.1. 使用 create-react-app 创建 react 应用

3.1.1. react 脚手架

xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目

a. 包含了所有需要的配置

b. 指定好了所有的依赖

c. 可以直接安装/编译/运行一个简单效果

react 提供了一个用于创建 react 项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

3.1.2. 创建项目并启动

npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

3.1.3. react 脚手架项目结构

ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html----------------- 主页面
|--scripts
|-- build.js-------------------build 打包引用配置
|-- start.js-------------------start 运行引用配置
|--src------------源码文件夹
|--components-----------------react 组件
|--index.js------------------- 应用入口 js
|--.gitignore------git 版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的 readme 文件

3.2. demo: 评论管理

3.2.1. 效果

3.2.2. 拆分组件

应用组件: App

state: comments/array
添加评论组件: CommentAdd
state: username/string, content/string
props: add/func
评论列表组件: CommentList
props: comment/object, delete/func, index/number
评论项组件: CommentItem
props: comments/array, delete/func

3.2.3. 实现静态组件

3.2.4. 实现动态组件

动态展示初始化数据

初始化状态数据
传递属性数据响应用户操作, 更新组件界面
绑定事件监听, 并处理
. 实现动态组件

动态展示初始化数据

初始化状态数据
传递属性数据响应用户操作, 更新组件界面
绑定事件监听, 并处理
更新 state

第三章：react 应用( 基于 react )相关推荐

基于React+Koa实现一个h5页面可视化编辑器－Dooring
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价值. 本篇文章并非和数据可视化 ...
支持动图、一键生成，基于 React 的开源像素绘画应用 —— Pixel Art to CSS
目录编辑前言简介--何为React? 基于React的 Pixel Art to CSS 绘画编辑器示例效果演示生成代码具体操作其他功能下载地址前言简介--何为React? 基于R ...
The Road to learn React书籍学习笔记(第三章)
代码详情声明周期方法通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() constructor() 构造函数只有在组件实例化并插入到 DOM ...
基于 React 搭建的安卓，Ios，Web 三端架构（附上 IceE 三端框架）
前言本节介绍基于该架构的一个 CMS 项目,如果你没有兴趣了解,可以直接跳到下一节本栏目的文章基于 IceEmblem 架构设计 Github:https://github.com/IceEmbl ...
前段react技术架构图_基于 React 的可视化编辑平台实践
前言前段时间发在朋友圈的一句话:各种自主搭建的平台,想起好多年各种DIY博客,行业门户网站,本质不变,变的是实现的手段了. 正文从这开始-- 本文主要介绍了基于 React 构建可视化编辑平台的实践 ...
Mdebug：基于React开发的移动web调试工具
作者:thinkchen,腾讯 PCG 高级前端开发工程师 mdebug是腾讯新闻 TNTWEB 团队推出的基于React开发的新的web调试工具, 沉淀自腾讯新闻微信手 q 双插件多年的移动 web ...
开发html5单页用什么框架,GitHub - mmcai/single-page-react-h5: 基于React框架的单页活动框架，可以基于此代码上进行相关的H5活动等相关内容的开发...
single-page-react-h5 基于React的H5活动页面脚手架,助力你在1小时就可以完成一个H5活动页面,这里已经帮您做了如下几个基本事情页面缩放,基于宽度为750px的视觉稿,当然您 ...
基于React开发范式的思考：写在Lesx发布之际
例子:lesx-example webpack loader: lesx-loader 一些背景现在前端框架已经呈现出React.Angular.Vue三足鼎立的局势,对于三者的对比以及技术选型的思 ...
基于React的表单开发的分析(上)
本文主要讲解后台系统与表单相关的页面开发,并分析如何才能更好地.高效地开发. 技术栈 React Antd 背景 Antd 以下我都将Ant Design 简称为 Antd Ant Design是个服 ...

第三章：react 应用( 基于 react )

第三章：react 应用( 基于 react ）

3.1. 使用 create-react-app 创建 react 应用

3.1.1. react 脚手架

3.1.2. 创建项目并启动

3.1.3. react 脚手架项目结构

3.2. demo: 评论管理

3.2.1. 效果

3.2.2. 拆分组件

3.2.3. 实现静态组件

3.2.4. 实现动态组件

第三章：react 应用( 基于 react )相关推荐

最新文章

热门文章