【WEB 前端抱团学习群】0403 期技术分享:React

前言

2018 年伊始,我们准备实现一个小目标:

打造一个技术交流氛围浓郁的微信群。
让大家在这个群里轻松交流技术、没有扯淡,
拒绝吐槽,只关注技术学习本身。

因此,【WEB 前端抱团学习群】 就此诞生。

我们为这个群倾注极大精心与资源,期待给这个群提供诸多福利,例如:

1、聊天扯淡挺热闹,提个技术问题瞬间死寂?

——放心,在这个群里,拒绝扯淡,只谈学习。技术提问,必有回应~

2、独自一人无目的学习、没有学习目标?

——管理员会根据每人的基础做合理的学习计划、定期监督提醒~

3、自己学得怎么样?知识掌握的好不好?稀里糊涂的?

——群内提供阶段性技能水平测试,个人水平一目了然~

4、群里有没有技术大牛可以讨论的?

——每周邀请嘉宾(技术牛人、或妙味全职讲师)进行技术主题分享

5、做了练习无人点评、也不知道哪里可以优化或改进?

——专属的练习提交地址,会有资深讲师进行专业点评

6、都说进群抢红包,这群里会经常发红包么?

——围绕学习的奖励红包层出不穷,甚至会有奖学金提供唷~

7、还有更多可能的探索,我们会动态调整、不断尝试……

——也欢迎群友为我们提供各种建议,我们会认真倾听、努力改进~


VIP 进群:

“爱学习的人总是少数,但是大多数学习者都在这里!”
  • 扫码关注公众号,发送”VIP进群”关键字,入群共同学习,审核通过后入群


以下,是微信抱团群内举行的一次文字技术分享,全程内容如下:


下午 15:48 妙味-小妖 发布群通知

今天下午的群技术分享通知来啦!
这应该是节前最后一次微信群技术分享喽~

经过前两次 React 前置基础知识,
今天讲师将为大家带来以下内容:

  • ES6 模块化语法
  • CommonJS 模块化语法
  • 准备 react 项目环境
  • 运行一个 hello world

时间:16:00
嘉宾:妙味讲师翟宏杰
方式:微信群内-文字直播

不知道这会有多少人在呢?
在的写个 1 看看?

一时之间,许多小伙伴都打了 1 表示在线
有些甚至说:不用红包了,我们都在哈

但是我们觉得还是来一个吧,
毕竟这是一个重要的环节。
仪式感很重要。

发完红包,瞬间秒光
大家手速一次比一次快了

好的,既然这么多同学都在,
我替讲师先做个调查,
关于今天分享的内容:

“ES6 的模块化”不知道大家有没有了解过?
了解过:1
不了解:0

“commonJS 的模块化”不知道大家有没有了解过?
了解过:1
不了解:0

好的,谢谢大家反馈
最后一个小调查:大家真正写过 react 代码没有?
写过:1
没有:0

这结果对大家来说,
一个比一个难度要大啊~

好了,
上面回复的同学,有的说了解过,
那就看看讲师讲完以后和你的理解是否一致?

回复不了解的朋友?
请一定注意,接下来要认真听课咯~

闲话少讲,
请出我们今天的技术分享嘉宾:翟宏杰讲师
为大家带来精彩的分享~

在分享的过程中,请大家不要随意打断哟
有请我们的讲师:翟宏杰 出场哈


讲师 翟宏杰 上场:

OK
按照计划, 首先我们讲的是 ES6 的模块化基础

模块化, 也就是文件直接的相互依赖. 一个模块就是一个 js 文件.
一个模块会暴露一些东西, 一个模块也可能会从别的模块引入一些东西.

先看 export 导出

一个模块可以通过 export 语法来导出一些东西.

一个模块可以有多个 export 命令

比如有一个 a.js 文件.

注意 export 的关键语法

我们看看如何引入

现在同一文件夹下有个b.js 的文件, 它从 a.js 里面引入东西:

import {a, name1, name2, appJS } from ‘./b.js’

from 后面的字符串是 b.js 的路径

import 后面使用一个花括号来取得另一个模块的 export 语法的导出

可以看到, 使用这些引入的东西就很容易了

在接收另一个模块使用 export 语法导出的东西的时候, 引入时, 在 import 命令后面写一个花括号 {}, 然后在花括号里面写 export 时的变量名就可以了.

除了使用 export 导出东西, 还可以使用 export default 导出东西.

export default 一个模块只能出现一次.

我们继续以上面的代码举例:

在 a.js 里使用 export default 导出:

注意看下面的 export default 的用法

接着, 我们在 b.js 里面引入:

import logHello, {a, name1, name2, appJS } from ‘./b.js’

接收 export default 的导出的时候, 不需要写在 花括号内,

并且可以写任意指定的名字

使用起来就是一样的, 该怎么用, 就怎么用

引入 export default 的导出的时候, 不需要写在花括号内, 并且变量名自己定.

这就是我们 需要掌握的 ES6 模块化语法

现在我们再看看 commonJS 的模块化语法

commonJS 的模块化语法相比 ES6, 语法更加简单. nodeJS 就是使用的这一套模块化规范.

直接看引入语法: require

一个文件的导出, 只要把要导出的值赋给 module.exports 就行了.

一个文件只需要一个 module.exports.

导出就是这么简单. 就是把一个变量, 或一个值赋给 module.exports 就行.

刚刚是导出语法
现在才说引入的语法

直接看引入语法:

require(‘./a’) 在 require 函数里面传一个参数: 模块路径, 它会返回一个值, 这个值就是另一个模块 module.exports 的值.

以上这些说的 ES6 和 commonJS 的模块化语法, 大家在使用的过程中严格遵守这些语法的规则

就可以保大家平安啦

那以上就是我们需要知道的 ES6 的模块化语法和 commonJS 的模块化语法


现在抢答一个问题, 前三名答对红包奖励

答案是 B

讲师分析答案:

注意, export default 后面导出的 {} 是一个对象
export 后面的 {} 可不是对象, 里面是你要导出的变量

—-

问:那如果想用 a,题目要改成什么样。吧 default 去掉吗
答:是的,export default 是 ES6 的模块化导出语法

问:export default 后 webapck treeShaking 还会工作吗?还是说只有 export treeShaking 才会工作?
答:module.exports 是 commonJS 的,treeShaking 是看引用关系来工作

问:module.exports 一个文件内可以多个吧?
答:保证里面只有一个

问:写多个,也只会以 最后写的那个为准吧?
答:是的, 即便不报错也要只写一个,因为它导出的内容 就是赋给 module.exports 的东西

问:老师,c 是因为他回去找那个 moudul 文件夹,是吧,所以错了。node_modules
答:正常情况下, 是的, 所以题目加了一句, 没有其他的配置。

问:老师 export导出的文件 import的时候后面必须要加 {} 吗?
答:export 导出的东西 import 时要用 {} 来取

补发一下刚刚抢答成功的前三位学员:


技术分享继续进行中……

接下来我们就正式看看 react, 运行一个 Hello World

React 主要是帮助你把你写的页面结构渲染到页面.
你需要告诉 react 这个页面有什么结构, 然后 react 会通过 JavaScript 帮助你生成 DOM, 插入到页面.

一个很经典的公式:UI = fn( data )

把数据交给 react, react 就给你 页面
在 react 里面, 提供了一种帮助你描述页面结构的方法, 它叫 JSX ;

你只要描述出结构就可以了
但是你需要事先配置一些环境来转换你写的 JSX.
你可以使用 脚手架 来快速帮你生成一个项目,

它帮助你做好了相应的配置, 新建了一些事先的文件, 让你可以直接开始写代码而不需要担心环境配置的问题. 这是一个不错的开始.

你需要先安装 node, 接着你就可以在命令行安装 create-react-app:

npm i -g create-react-app

接着, 你就可以创建一个你的项目了:

create-react-app hello-react

hello-react 是你项目的名字

接下来, 用你的编辑器打开项目, 你会发现里面就已经有一些文件了, 并且它已经做好了配置:

在命令行, 使用 cd hello-react 就可以进入到项目的文件夹里面

再运行 npm start, 你就会发现浏览器打开了一个新的页面, 项目也会运行起来.

打开 src 文件夹, 找到 App.js 这个文件, 你会看到类似如下代码:

很像 html

你可以修改一下里面的文字, 界面自动刷新了

那今天我们就正式建立了一个 react 的初始项目. 下次, 我们会在这个项目基础上, 学更多和 react 相关的东西.

下面是提问环节~


问:npm start 和 npm dev 有什么区别啊 老师
答:start 和 dev 都是你自定义的,你的 package.json 声明了什么命令, 这个命令干什么事情, 是你自己规定的

问:只有start命令 可以 直接npm 是吧
答:对的,自定义的都需要加 run

—-

好,今天的技术分享到此为止,
感谢大家的支持,
我们下次见!


精彩课程推荐:

足不出户,享受优质远程课程!

妙味 2018 年最新版 “从零基础到全栈” 全套 WEB 前端开发课程,现已开启远程班招生~

  • 资深讲师带领大家,只学精华内容、拒绝无用知识,配备走心远程服务:“直播+视频回放、全天超过 14 小时在线答疑、作业批改与练习讲解、丰富奖学金、全程面试远程指导服务…”
  • 凡你所要,必得满足!
  • 现在咨询,可享受更多课程优惠~

远程《零基础前端开发 “PC 端+移动端+响应式开发” 课程》
https://miaov.com/index.php/news/newsDetail/nid/322

远程《JS 前端资深工程师就业精英班》
https://miaov.com/index.php/news/newsDetail/nid/316

报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690
• 微信:miaov-class

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部