LearnShare / learn-VRA

Let's learn Vue/React/Angular together.

Vue、React 和 Angular 一起学怎么样？

Why not.

目标

• 同时学习 Vue、React 和 Angular
• 同步学习三者相同/相关的知识
• 融合以往的项目经验
• 尽量涉及更多、更广的内容

成果记录

1. 将学习内容记录到文档中（编写为 Markdown 存放在本项目中）
2. 将练习代码保存下来（存放在 Github 中，按主题独立分支）
3. 将 demo 呈现在 https://codesandbox.io/ 上
4. 按日总结并更新

注意：https://codesandbox.io/ 上 demo 的呈现效果可能与本地不同，强烈建议 clone 到本地运行和测试。

交流讨论

• learnshare.hjq#gmail
• 各项目 issues
• Discord: Learn-VRA

相关代码

• Vue
• React
• Angular

学习主题

主题	子主题	Vue	React	Angular
开发环境
Hello World	CLI、创建和运行项目	Vue CLI	Create React App	Angular CLI
	项目结构和配置	项目结构	项目结构	项目结构
	ESLint + Airbnb	-	ESLint + Airbnb	ESLint + Airbnb
	SCSS + dart-sass	-	SCSS + dart-sass	-
	Hello World	Hello World	Hello World	Hello World
使用 TypeScript		使用 TypeScript	使用 TypeScript	-
应用配置和启动		Vue 应用	React 应用	Angular 应用
		路径别名	-	-
组件		创建、注册和使用组件	创建和使用组件	创建、注册和使用组件
		单文件组件	-	-
模板	HTML 和插值	HTML 和插值	JSX	HTML 和插值
	属性绑定	属性绑定		属性绑定
	显示或隐藏元素	显示或隐藏元素		显示或隐藏元素
	循环	循环		循环
	事件	事件	事件	事件
	表单	表单和双向绑定	表单	表单和双向绑定
样式		样式	样式	样式
数据		数据的响应性	-	-
		data	state	数据
		props	props	@Input
		computed	-	-
逻辑		methods	-	-
		watch	-	-
		生命周期	生命周期	生命周期
ref 和 DOM		模板引用	ref 和 DOM	模板变量
		-	-	TemplateRef
		-	-	@ViewChildren
跨组件数据传递	props/@Input	props	props	@Input
	attrs	attrs	-	attrs
	slot	slot	props.children 和 Render Props	内容投影
	自定义事件	$emit	模拟事件语法	@Output
	局部共享	Provide/Inject	Context	Service
	状态管理	Vuex	Redux	NgRx
路由		Vue Router	React Router	@angular/router

• 开发环境
• hello-world
• 使用 TypeScript 的 Vue/React 项目
• 应用配置和启动
• 组件
• ref 和 DOM
• 跨组件数据传递
• 路由
• 网络请求
• 服务端渲染
• 测试
• 部署