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

 

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

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

如果你想迅速了解它是什么、而不愿翻墙去学习满是英文的资料、或研读枯燥

的中文手册……

来听一次妙味公开课吧,在这之后,react 即将被纳入 妙味新的JS课程 中,
而今天,看到本次公开课通知的诸位,你们有福了,赶紧记下公开课日期,先睹为快!!


 


公开课时间: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. 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
复制代码



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

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

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

  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实例


 
 















啥?还不是妙味VIP会员?


你就说你还等啥?还…等…啥??还……等……啥???


赶紧抓紧时间加入啊,戳这儿:


>>加入妙味VIP会员,享受正版妙味VIP用户超值回报!



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

妙味最新4月底JS班 招生名额有限,详询妙味客服妹纸:


(禁止以咨询课程为由、调戏课程顾问的妹纸们,否则学费上涨250%哦~别怪我事先没提醒你 ^_^ )

课程咨询QQ:3049266712、3023710192


VIP会员咨询:3349734318、2379848569


咨询电话:010-57269690

妙味网友
请登录后留言,请登录注册