妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17716|回复: 31

妙味远程公开课:react 实践分享

  [复制链接]
leo 发表于 2016-4-5 16:25:09 | 显示全部楼层 |阅读模式
8173412602700564.JPG

react 是现在很火的一个词,大家对它的关注度持续升温、研究热情如火如荼!
许多朋友可能开始跃跃欲试,但有更多朋友对此感觉既新鲜又迷惑:

react 究竟是什么高大尚的东东?MVC 架构与它有何瓜葛?
为什么项目开发和招聘信息中 react 被屡屡提及?
这个 Facebook 用来构建用户界面的 JS 库究竟要解决什么问题?

如果你想迅速了解它是什么、而不愿翻墙去学习满是英文的资料、或研读枯燥的中文手册……
来听一次妙味公开课吧,在这之后,react 即将被纳入 妙味新的JS课程 中,
而今天,看到本次公开课通知的诸位,你们有福了,赶紧记下公开课日期,先睹为快!!


2122313L4-0.png


公开课时间:2016年4月8日 周五晚上 19:30-21:30(已结束)

公开课时间:2016年4月20日 周三晚上 19:30-21:30
公开课形式:YY远程方式,房间号:
47628163 >>下载YY软件
公开课费用:免费!!!当天我们会在VIP群里通知大家几遍,不在VIP群里的亲们,请准时上YY进房间、静静等待上课即可~~

针对人群:对JS非常熟练、有一定JS开发经验
妙味VIP服务:如妙味VIP会员临时有事未能参加本次公开课,妙味官方会把现场视频整理好、发送至VIP群邮箱中,供大家下载!^_^



第一次公开课内容:(已结束)
  1. <font color="#c0c0c0">react简介

  2.     来构建用户界面的库,不是框架
  3.     关注于view层
  4.     虚拟DOM 单向数据流 JSX这些概念

  5. 如何使用react
  6.     下载文件
  7.         react
  8.         react-dom
  9.         browser.min.js

  10.     也可以使用nodejs,需要用到的模块
  11.         webpack
  12.         babel
  13.         react
  14.         react-dom

  15. JSX介绍

  16.     JSX是React编写组件的一种语法规范,可以看为是js的扩展,它支持将HTML和JS混写在一起,
  17.     最后使用babel编译为常规的js,方便浏览器解析

  18. 编写第一个例子
  19.     使用 ReactDOM.render()

  20. 编写组件
  21.     React.createClass()

  22. 给组件传递数据
  23.     props
  24.     props的值是不可变的
  25.     语法糖{...this.props}

  26. 组件间的嵌套
  27.     使用 props传递数据
  28.     可是数组存组件结构
  29.     map方法的使用

  30. 事件event处理
  31.     在元素上添加事件处理
  32.         onCLick    onMouseOver  onMouseOut
  33.     class => className
  34.     style的设置

  35. 改变组件的状态
  36.     state
  37.     setState后组件状态发生改变,DOM会重新渲染
  38.   
  39. 组件间的通信
  40.     父子级可使用props传递函数的形式通信
  41.     不是父子级或多级嵌套通信 使用Pub/Sub模式通信

  42. 案例:
  43.     react实现的留言板,提交留言可显示在页面的留言列表中

  44.     知识点:
  45.         react的基本知识点
  46.                 React.createClass 创建组件函数
  47.                 ReactDOM.render   渲染组件
  48.                 props             获取传递的数据(不可变)
  49.                 state             组件状态(可变,立马渲染DOM)
  50.                 onClick           事件
  51.                 组件间的通信
  52.                 Pub/Sub模式        发布/订阅模式
  53.                 componentDidMount 组件渲染后触发的函数

  54.     webpack + babel + react 做到改变组件不刷新页面就可以显示结果
  55.     主要模块的用法,如:
  56.         webpack  webpack-dev-server  css-loader style-loader html-webpack-plugin插件的使用
  57.         babel babel-preset-es2015 babel-preset-react
  58.         react react-dom react-hot-loader</font>
复制代码



第二次公开课内容:
  1. webpack + babel + react 配置及使用

  2. node安装及npm包管理器的使用

  3. npm init 创建package.json文件
  4. npm install <module-name> -g/--save-dev/--save  安装模块
  5. npm update <module-name >  更新模块
  6. npm uninstall <module-name > 卸载模块

  7. webpack一款模块加载器兼打包工具

  8. 特点:
  9.      查找依赖,打包成一个文件
  10.      支持CommonJs和AMD模块
  11.      把各种资源都看成模块,用对应的加载器处理
  12.      丰富的和可扩展的插件

  13. 官网http://webpack.github.io/
  14. 安装
  15.       npm install webpack -g
  16.      安装后使用webpack命令

  17. webpack.config.js文件配置项:
  18.      entry:配置入口文件
  19.      output:配置输出文件路径及文件名
  20.      module:模块配置
  21.           loaders:加载器配置
  22.      devServer:配置服务
  23.      plugins:配置插件     

  24. loader加载器:
  25.      css-loader、style-loader : 处理css文件和样式
  26.      babel-loader:转换es6语法为es5语法
  27. 插件:
  28.       html-webpack-plugin:生成html文件

  29. 使用webpack-dev-server服务

  30. babel介绍及使用
  31.     使用babel作用:转换es6语法为es5语法

  32. 官网:http://babeljs.io/  
  33. 安装:
  34.      npm install  babel-cli -g
  35.       安装后使用babel命令

  36. Es6语法使用:
  37.      let const申明变量
  38.      箭头函数Arrow Functions
  39.      class import from extends

  40. react介绍及使用
  41.      react用于构建用户界面的javascript库
  42. 安装:
  43.      npm install react react-dom --save
  44. 用bebel编译jsx语法,使用模块:
  45.      npm install --save-dev babel-preset-react

  46. 使用react热加载模块,做到文件改动页面自动刷新
  47.      安装:
  48.           npm install --save-dev react-hot-loader

  49. 综合实例:todoList例子

  50.         分析todolist整体实现思路
  51.         利用MVC的思路整合代码

  52.         主要功能:
  53.                
  54.                 回车添加内容
  55.                 可以对内容进行toggle选中操作
  56.                 删除选项
  57.                 用LocalStorage对数据进行存储(刷新记录)
复制代码


本次远程课案例:todoList实例


11.png




啥?还不是妙味VIP会员?
你就说你还等啥?还…等…啥??还……等……啥???
赶紧抓紧时间加入啊,戳这儿:
>>加入妙味VIP会员,享受正版妙味VIP用户超值回报!



当然,如果你报名 妙味全日制JS课程 了,那以上VIP会员所有视频资料、远程课资料、以及全体妙味讲师全天候各种超级服务,统统向你热情涌来……挡都挡不住喔~我跟你讲!!

妙味最新4月底JS班 招生名额有限,详询妙味客服妹纸:(禁止以咨询课程为由、调戏课程顾问的妹纸们,否则学费上涨250%哦~别怪我事先没提醒你 ^_^ )

课程咨询QQ:3049266712、3023710192
VIP会员咨询:3349734318、2379848569
咨询电话:010-57269690











回复

使用道具 举报

ainyqing 发表于 2016-4-6 14:52:46 | 显示全部楼层
好棒~o(≧v≦)o~~好棒
回复 支持 反对

使用道具 举报

枫恋 发表于 2016-4-6 15:42:33 | 显示全部楼层
应该加个gulp
回复 支持 反对

使用道具 举报

cangyue 发表于 2016-4-6 16:15:13 | 显示全部楼层
看内容大纲,这次的干货不少!!!
回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2016-4-6 17:20:24 | 显示全部楼层
cangyue 发表于 2016-4-6 16:15
看内容大纲,这次的干货不少!!!

其实以往的公开课,也是满满干货,只是每个人需求点不同,对干货的定义也就有差别啦~~
回复 支持 反对

使用道具 举报

wangm 发表于 2016-4-6 18:13:31 | 显示全部楼层
perfect
哈哈
回复 支持 反对

使用道具 举报

lianhr12 发表于 2016-4-6 20:31:53 | 显示全部楼层
秒味,请给一个我不关注你的理由哈哈,干货一如既往多~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-16 20:16 , Processed in 0.139194 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表