首页下载资源网络技术Frontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

ZIPFrontend Workshop from HTML/CSS/JS to TypeScript/React/Redux

2301_80488214516.86KB需要积分:1

资源文件列表:

frontend-bootcamp-master.zip 大约有389个文件
  1. frontend-bootcamp-master/
  2. frontend-bootcamp-master/.gitignore 47B
  3. frontend-bootcamp-master/.vscode/
  4. frontend-bootcamp-master/.vscode/extensions.json 256B
  5. frontend-bootcamp-master/.vscode/settings.json 145B
  6. frontend-bootcamp-master/LICENSE 18.21KB
  7. frontend-bootcamp-master/LICENSE-CODE 1.06KB
  8. frontend-bootcamp-master/README.md 6.27KB
  9. frontend-bootcamp-master/assets/
  10. frontend-bootcamp-master/assets/css-syntax.png 37.59KB
  11. frontend-bootcamp-master/assets/fabric.jpg 12.94KB
  12. frontend-bootcamp-master/assets/flux.png 50.3KB
  13. frontend-bootcamp-master/assets/scripts.js 1.24KB
  14. frontend-bootcamp-master/assets/shared.css 2KB
  15. frontend-bootcamp-master/assets/step.css 2.47KB
  16. frontend-bootcamp-master/assets/todo-components.png 54.16KB
  17. frontend-bootcamp-master/assets/todo_screenshot.jpg 38.03KB
  18. frontend-bootcamp-master/azure-pipelines.pr.yml 439B
  19. frontend-bootcamp-master/azure-pipelines.yml 943B
  20. frontend-bootcamp-master/bonus-jest/
  21. frontend-bootcamp-master/bonus-jest/demo/
  22. frontend-bootcamp-master/bonus-jest/demo/README.md 5.17KB
  23. frontend-bootcamp-master/bonus-jest/demo/index.html 390B
  24. frontend-bootcamp-master/bonus-jest/demo/src/
  25. frontend-bootcamp-master/bonus-jest/demo/src/TestMe.spec.tsx 394B
  26. frontend-bootcamp-master/bonus-jest/demo/src/TestMe.tsx 655B
  27. frontend-bootcamp-master/bonus-jest/demo/src/index.spec.tsx 124B
  28. frontend-bootcamp-master/bonus-jest/demo/src/index.ts 277B
  29. frontend-bootcamp-master/bonus-jest/demo/src/multiply.ts 67B
  30. frontend-bootcamp-master/bonus-jest/exercise/
  31. frontend-bootcamp-master/bonus-jest/exercise/README.md 487B
  32. frontend-bootcamp-master/bonus-jest/exercise/index.html 407B
  33. frontend-bootcamp-master/bonus-jest/exercise/src/
  34. frontend-bootcamp-master/bonus-jest/exercise/src/TestMe.spec.tsx 477B
  35. frontend-bootcamp-master/bonus-jest/exercise/src/TestMe.tsx 672B
  36. frontend-bootcamp-master/bonus-jest/exercise/src/index.ts 68B
  37. frontend-bootcamp-master/bonus-jest/exercise/src/stack.spec.ts 670B
  38. frontend-bootcamp-master/bonus-jest/exercise/src/stack.ts 581B
  39. frontend-bootcamp-master/bonus-servicecalls/
  40. frontend-bootcamp-master/bonus-servicecalls/demo/
  41. frontend-bootcamp-master/bonus-servicecalls/demo/README.md 2.21KB
  42. frontend-bootcamp-master/bonus-servicecalls/demo/index.html 282B
  43. frontend-bootcamp-master/bonus-servicecalls/demo/src/
  44. frontend-bootcamp-master/bonus-servicecalls/demo/src/actions/
  45. frontend-bootcamp-master/bonus-servicecalls/demo/src/actions/index.ts 1.5KB
  46. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/
  47. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoApp.tsx 429B
  48. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoFooter.tsx 947B
  49. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoHeader.tsx 2.14KB
  50. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoList.tsx 811B
  51. frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoListItem.tsx 2.51KB
  52. frontend-bootcamp-master/bonus-servicecalls/demo/src/index.tsx 857B
  53. frontend-bootcamp-master/bonus-servicecalls/demo/src/reducers/
  54. frontend-bootcamp-master/bonus-servicecalls/demo/src/reducers/index.ts 942B
  55. frontend-bootcamp-master/bonus-servicecalls/demo/src/service/
  56. frontend-bootcamp-master/bonus-servicecalls/demo/src/service/index.ts 1.13KB
  57. frontend-bootcamp-master/bonus-servicecalls/demo/src/store/
  58. frontend-bootcamp-master/bonus-servicecalls/demo/src/store/index.ts 224B
  59. frontend-bootcamp-master/index.html 6.53KB
  60. frontend-bootcamp-master/jest.config.js 161B
  61. frontend-bootcamp-master/jest.setup.js 143B
  62. frontend-bootcamp-master/markdownReadme/
  63. frontend-bootcamp-master/markdownReadme/src/
  64. frontend-bootcamp-master/markdownReadme/src/index.ts 1.78KB
  65. frontend-bootcamp-master/package-lock.json 351.99KB
  66. frontend-bootcamp-master/package.json 2.13KB
  67. frontend-bootcamp-master/playground/
  68. frontend-bootcamp-master/playground/index.html 430B
  69. frontend-bootcamp-master/prettier.config.js 76B
  70. frontend-bootcamp-master/server/
  71. frontend-bootcamp-master/server/index.js 1.23KB
  72. frontend-bootcamp-master/server/now.json 149B
  73. frontend-bootcamp-master/step1-01/
  74. frontend-bootcamp-master/step1-01/demo/
  75. frontend-bootcamp-master/step1-01/demo/index.html 8.92KB
  76. frontend-bootcamp-master/step1-01/demo/style.css 289B
  77. frontend-bootcamp-master/step1-01/exercise/
  78. frontend-bootcamp-master/step1-01/exercise/README.md 222B
  79. frontend-bootcamp-master/step1-01/exercise/answers.html 1.75KB
  80. frontend-bootcamp-master/step1-01/exercise/baked_beans.jpg 57.12KB
  81. frontend-bootcamp-master/step1-01/exercise/index.html 2.35KB
  82. frontend-bootcamp-master/step1-01/lesson/
  83. frontend-bootcamp-master/step1-01/lesson/README.md 3.14KB
  84. frontend-bootcamp-master/step1-01/lesson/index.html 258B
  85. frontend-bootcamp-master/step1-01/lesson/src/
  86. frontend-bootcamp-master/step1-01/lesson/src/index.tsx
  87. frontend-bootcamp-master/step1-02/
  88. frontend-bootcamp-master/step1-02/demo/
  89. frontend-bootcamp-master/step1-02/demo/index.html 2.81KB
  90. frontend-bootcamp-master/step1-02/exercise/
  91. frontend-bootcamp-master/step1-02/exercise/README.md 221B
  92. frontend-bootcamp-master/step1-02/exercise/answers.css 494B
  93. frontend-bootcamp-master/step1-02/exercise/index.html 1.31KB
  94. frontend-bootcamp-master/step1-02/lesson/
  95. frontend-bootcamp-master/step1-02/lesson/README.md 1.9KB
  96. frontend-bootcamp-master/step1-02/lesson/index.html 258B
  97. frontend-bootcamp-master/step1-02/lesson/src/
  98. frontend-bootcamp-master/step1-02/lesson/src/index.tsx
  99. frontend-bootcamp-master/step1-03/
  100. frontend-bootcamp-master/step1-03/demo/
  101. frontend-bootcamp-master/step1-03/demo/index.html 1.25KB
  102. frontend-bootcamp-master/step1-03/exercise/
  103. frontend-bootcamp-master/step1-03/exercise/README.md 228B
  104. frontend-bootcamp-master/step1-03/exercise/answer.js 386B
  105. frontend-bootcamp-master/step1-03/exercise/index.html 2.16KB
  106. frontend-bootcamp-master/step1-03/lesson/
  107. frontend-bootcamp-master/step1-03/lesson/README.md 8.74KB
  108. frontend-bootcamp-master/step1-03/lesson/index.html 258B
  109. frontend-bootcamp-master/step1-03/lesson/src/
  110. frontend-bootcamp-master/step1-03/lesson/src/index.tsx
  111. frontend-bootcamp-master/step1-04/
  112. frontend-bootcamp-master/step1-04/demo/
  113. frontend-bootcamp-master/step1-04/demo/index.html 757B
  114. frontend-bootcamp-master/step1-04/final/
  115. frontend-bootcamp-master/step1-04/final/README.md 181B
  116. frontend-bootcamp-master/step1-04/final/index.html 75B
  117. frontend-bootcamp-master/step1-04/final/src/
  118. frontend-bootcamp-master/step1-04/final/src/App.tsx 211B
  119. frontend-bootcamp-master/step1-04/final/src/components/
  120. frontend-bootcamp-master/step1-04/final/src/components/Button.css 207B
  121. frontend-bootcamp-master/step1-04/final/src/components/Button.tsx 196B
  122. frontend-bootcamp-master/step1-04/final/src/components/Counter.tsx 336B
  123. frontend-bootcamp-master/step1-04/final/src/index.tsx 149B
  124. frontend-bootcamp-master/step1-04/lesson/
  125. frontend-bootcamp-master/step1-04/lesson/README.md 7.44KB
  126. frontend-bootcamp-master/step1-04/lesson/index.html 258B
  127. frontend-bootcamp-master/step1-04/lesson/src/
  128. frontend-bootcamp-master/step1-04/lesson/src/index.tsx
  129. frontend-bootcamp-master/step1-05/
  130. frontend-bootcamp-master/step1-05/TodoApp.html 931B
  131. frontend-bootcamp-master/step1-05/demo/
  132. frontend-bootcamp-master/step1-05/demo/README.md 1.86KB
  133. frontend-bootcamp-master/step1-05/demo/index.html 128B
  134. frontend-bootcamp-master/step1-05/demo/src/
  135. frontend-bootcamp-master/step1-05/demo/src/App.tsx 123B
  136. frontend-bootcamp-master/step1-05/demo/src/index.tsx 156B
  137. frontend-bootcamp-master/step1-05/demo/src/style.css 535B
  138. frontend-bootcamp-master/step1-05/exercise/
  139. frontend-bootcamp-master/step1-05/exercise/README.md 1.29KB
  140. frontend-bootcamp-master/step1-05/exercise/index.html 128B
  141. frontend-bootcamp-master/step1-05/exercise/src/
  142. frontend-bootcamp-master/step1-05/exercise/src/App.tsx 173B
  143. frontend-bootcamp-master/step1-05/exercise/src/components/
  144. frontend-bootcamp-master/step1-05/exercise/src/components/TodoHeader.tsx 474B
  145. frontend-bootcamp-master/step1-05/exercise/src/components/TodoListItem.tsx 188B
  146. frontend-bootcamp-master/step1-05/exercise/src/index.tsx 156B
  147. frontend-bootcamp-master/step1-05/exercise/src/style.css 566B
  148. frontend-bootcamp-master/step1-06/
  149. frontend-bootcamp-master/step1-06/demo/
  150. frontend-bootcamp-master/step1-06/demo/README.md 5.08KB
  151. frontend-bootcamp-master/step1-06/demo/index.html 128B
  152. frontend-bootcamp-master/step1-06/demo/src/
  153. frontend-bootcamp-master/step1-06/demo/src/TodoApp.tsx 317B
  154. frontend-bootcamp-master/step1-06/demo/src/components/
  155. frontend-bootcamp-master/step1-06/demo/src/components/TodoFooter.tsx 305B
  156. frontend-bootcamp-master/step1-06/demo/src/components/TodoHeader.tsx 630B
  157. frontend-bootcamp-master/step1-06/demo/src/components/TodoList.tsx 480B
  158. frontend-bootcamp-master/step1-06/demo/src/components/TodoListItem.tsx 190B
  159. frontend-bootcamp-master/step1-06/demo/src/index.tsx 160B
  160. frontend-bootcamp-master/step1-06/demo/src/style.css 566B
  161. frontend-bootcamp-master/step1-06/exercise/
  162. frontend-bootcamp-master/step1-06/exercise/README.md 950B
  163. frontend-bootcamp-master/step1-06/exercise/index.html 128B
  164. frontend-bootcamp-master/step1-06/exercise/src/
  165. frontend-bootcamp-master/step1-06/exercise/src/TodoApp.tsx 782B
  166. frontend-bootcamp-master/step1-06/exercise/src/components/
  167. frontend-bootcamp-master/step1-06/exercise/src/components/TodoFooter.tsx 286B
  168. frontend-bootcamp-master/step1-06/exercise/src/components/TodoHeader.tsx 804B
  169. frontend-bootcamp-master/step1-06/exercise/src/components/TodoList.tsx 557B
  170. frontend-bootcamp-master/step1-06/exercise/src/components/TodoListItem.tsx 195B
  171. frontend-bootcamp-master/step1-06/exercise/src/index.tsx 160B
  172. frontend-bootcamp-master/step1-06/exercise/src/style.css 566B
  173. frontend-bootcamp-master/step1-06/index.html 518B
  174. frontend-bootcamp-master/step1-07/
  175. frontend-bootcamp-master/step1-07/demo/
  176. frontend-bootcamp-master/step1-07/demo/README.md 7.25KB
  177. frontend-bootcamp-master/step1-07/demo/index.html 128B
  178. frontend-bootcamp-master/step1-07/demo/src/
  179. frontend-bootcamp-master/step1-07/demo/src/TodoApp.tsx 1.8KB
  180. frontend-bootcamp-master/step1-07/demo/src/TodoApp.types.ts 424B
  181. frontend-bootcamp-master/step1-07/demo/src/components/
  182. frontend-bootcamp-master/step1-07/demo/src/components/TodoFooter.tsx 395B
  183. frontend-bootcamp-master/step1-07/demo/src/components/TodoHeader.tsx 1014B
  184. frontend-bootcamp-master/step1-07/demo/src/components/TodoList.tsx 557B
  185. frontend-bootcamp-master/step1-07/demo/src/components/TodoListItem.tsx 268B
  186. frontend-bootcamp-master/step1-07/demo/src/index.tsx 160B
  187. frontend-bootcamp-master/step1-07/demo/src/style.css 566B
  188. frontend-bootcamp-master/step1-07/exercise/
  189. frontend-bootcamp-master/step1-07/exercise/README.md 1.06KB
  190. frontend-bootcamp-master/step1-07/exercise/index.html 128B
  191. frontend-bootcamp-master/step1-07/exercise/src/
  192. frontend-bootcamp-master/step1-07/exercise/src/TodoApp.tsx 1.78KB
  193. frontend-bootcamp-master/step1-07/exercise/src/TodoApp.types.ts 424B
  194. frontend-bootcamp-master/step1-07/exercise/src/components/
  195. frontend-bootcamp-master/step1-07/exercise/src/components/TodoFooter.tsx 395B
  196. frontend-bootcamp-master/step1-07/exercise/src/components/TodoHeader.tsx 1014B
  197. frontend-bootcamp-master/step1-07/exercise/src/components/TodoList.tsx 787B
  198. frontend-bootcamp-master/step1-07/exercise/src/components/TodoListItem.tsx 517B
  199. frontend-bootcamp-master/step1-07/exercise/src/index.tsx 160B
  200. frontend-bootcamp-master/step1-07/exercise/src/style.css 566B
  201. frontend-bootcamp-master/step1-07/final/
  202. frontend-bootcamp-master/step1-07/final/index.html 128B
  203. frontend-bootcamp-master/step1-07/final/src/
  204. frontend-bootcamp-master/step1-07/final/src/TodoApp.tsx 2.01KB
  205. frontend-bootcamp-master/step1-07/final/src/TodoApp.types.ts 474B
  206. frontend-bootcamp-master/step1-07/final/src/components/
  207. frontend-bootcamp-master/step1-07/final/src/components/TodoFooter.tsx 540B
  208. frontend-bootcamp-master/step1-07/final/src/components/TodoHeader.tsx 1.36KB
  209. frontend-bootcamp-master/step1-07/final/src/components/TodoList.tsx 643B
  210. frontend-bootcamp-master/step1-07/final/src/components/TodoListItem.tsx 453B
  211. frontend-bootcamp-master/step1-07/final/src/index.tsx 160B
  212. frontend-bootcamp-master/step1-07/final/src/style.css 566B
  213. frontend-bootcamp-master/step2-01/
  214. frontend-bootcamp-master/step2-01/demo/
  215. frontend-bootcamp-master/step2-01/demo/README.md 5.5KB
  216. frontend-bootcamp-master/step2-01/demo/index.html 427B
  217. frontend-bootcamp-master/step2-01/demo/src/
  218. frontend-bootcamp-master/step2-01/demo/src/async/
  219. frontend-bootcamp-master/step2-01/demo/src/async/index.ts 310B
  220. frontend-bootcamp-master/step2-01/demo/src/generics/
  221. frontend-bootcamp-master/step2-01/demo/src/generics/index.ts 446B
  222. frontend-bootcamp-master/step2-01/demo/src/index.tsx 240B
  223. frontend-bootcamp-master/step2-01/demo/src/interfaces/
  224. frontend-bootcamp-master/step2-01/demo/src/interfaces/index.ts 612B
  225. frontend-bootcamp-master/step2-01/demo/src/modules/
  226. frontend-bootcamp-master/step2-01/demo/src/modules/default.ts 57B
  227. frontend-bootcamp-master/step2-01/demo/src/modules/index.ts 1020B
  228. frontend-bootcamp-master/step2-01/demo/src/modules/named.ts 181B
  229. frontend-bootcamp-master/step2-01/demo/src/spread/
  230. frontend-bootcamp-master/step2-01/demo/src/spread/index.ts 496B
  231. frontend-bootcamp-master/step2-01/demo/src/types/
  232. frontend-bootcamp-master/step2-01/demo/src/types/index.ts 1.22KB
  233. frontend-bootcamp-master/step2-01/exercise/
  234. frontend-bootcamp-master/step2-01/exercise/README.md 2.55KB
  235. frontend-bootcamp-master/step2-01/exercise/index.html 454B
  236. frontend-bootcamp-master/step2-01/exercise/src/
  237. frontend-bootcamp-master/step2-01/exercise/src/fibonacci.ts 188B
  238. frontend-bootcamp-master/step2-01/exercise/src/index.ts 1.3KB
  239. frontend-bootcamp-master/step2-01/exercise/src/stack.ts 125B
  240. frontend-bootcamp-master/step2-01/final/
  241. frontend-bootcamp-master/step2-01/final/README.md 161B
  242. frontend-bootcamp-master/step2-01/final/index.html 454B
  243. frontend-bootcamp-master/step2-01/final/src/
  244. frontend-bootcamp-master/step2-01/final/src/fibonacci.ts 136B
  245. frontend-bootcamp-master/step2-01/final/src/index.ts 1.59KB
  246. frontend-bootcamp-master/step2-01/final/src/stack.ts 199B
  247. frontend-bootcamp-master/step2-02/
  248. frontend-bootcamp-master/step2-02/demo/
  249. frontend-bootcamp-master/step2-02/demo/README.md 3.22KB
  250. frontend-bootcamp-master/step2-02/demo/index.html 282B
  251. frontend-bootcamp-master/step2-02/demo/src/
  252. frontend-bootcamp-master/step2-02/demo/src/components/
  253. frontend-bootcamp-master/step2-02/demo/src/components/TodoApp.tsx 2.01KB
  254. frontend-bootcamp-master/step2-02/demo/src/components/TodoFooter.tsx 614B
  255. frontend-bootcamp-master/step2-02/demo/src/components/TodoHeader.tsx 1.58KB
  256. frontend-bootcamp-master/step2-02/demo/src/components/TodoList.tsx 863B
  257. frontend-bootcamp-master/step2-02/demo/src/components/TodoListItem.tsx 2.11KB
  258. frontend-bootcamp-master/step2-02/demo/src/index.tsx 383B
  259. frontend-bootcamp-master/step2-02/demo/src/store/
  260. frontend-bootcamp-master/step2-02/demo/src/store/index.ts 224B
  261. frontend-bootcamp-master/step2-02/exercise/
  262. frontend-bootcamp-master/step2-02/exercise/README.md 1.23KB
  263. frontend-bootcamp-master/step2-02/exercise/index.html 299B
  264. frontend-bootcamp-master/step2-02/exercise/src/
  265. frontend-bootcamp-master/step2-02/exercise/src/components/
  266. frontend-bootcamp-master/step2-02/exercise/src/components/TodoApp.tsx 2.01KB
  267. frontend-bootcamp-master/step2-02/exercise/src/components/TodoFooter.tsx 768B
  268. frontend-bootcamp-master/step2-02/exercise/src/components/TodoHeader.tsx 1.58KB
  269. frontend-bootcamp-master/step2-02/exercise/src/components/TodoList.tsx 863B
  270. frontend-bootcamp-master/step2-02/exercise/src/components/TodoListItem.tsx 2.11KB
  271. frontend-bootcamp-master/step2-02/exercise/src/index.tsx 383B
  272. frontend-bootcamp-master/step2-02/exercise/src/store/
  273. frontend-bootcamp-master/step2-02/exercise/src/store/index.ts 224B
  274. frontend-bootcamp-master/step2-03/
  275. frontend-bootcamp-master/step2-03/demo/
  276. frontend-bootcamp-master/step2-03/demo/README.md 5.41KB
  277. frontend-bootcamp-master/step2-03/demo/index.html 282B
  278. frontend-bootcamp-master/step2-03/demo/src/
  279. frontend-bootcamp-master/step2-03/demo/src/components/
  280. frontend-bootcamp-master/step2-03/demo/src/components/TodoApp.tsx 2.91KB
  281. frontend-bootcamp-master/step2-03/demo/src/components/TodoFooter.tsx 738B
  282. frontend-bootcamp-master/step2-03/demo/src/components/TodoHeader.tsx 1.85KB
  283. frontend-bootcamp-master/step2-03/demo/src/components/TodoList.tsx 863B
  284. frontend-bootcamp-master/step2-03/demo/src/components/TodoListItem.tsx 2.07KB
  285. frontend-bootcamp-master/step2-03/demo/src/index.tsx 383B
  286. frontend-bootcamp-master/step2-03/demo/src/store/
  287. frontend-bootcamp-master/step2-03/demo/src/store/index.ts 224B
  288. frontend-bootcamp-master/step2-03/exercise/
  289. frontend-bootcamp-master/step2-03/exercise/README.md 1.89KB
  290. frontend-bootcamp-master/step2-03/exercise/index.html 299B
  291. frontend-bootcamp-master/step2-03/exercise/src/
  292. frontend-bootcamp-master/step2-03/exercise/src/components/
  293. frontend-bootcamp-master/step2-03/exercise/src/components/TodoApp.tsx 2.3KB
  294. frontend-bootcamp-master/step2-03/exercise/src/components/TodoFooter.tsx 826B
  295. frontend-bootcamp-master/step2-03/exercise/src/components/TodoHeader.tsx 1.61KB
  296. frontend-bootcamp-master/step2-03/exercise/src/components/TodoList.tsx 863B
  297. frontend-bootcamp-master/step2-03/exercise/src/components/TodoListItem.tsx 2.07KB
  298. frontend-bootcamp-master/step2-03/exercise/src/index.tsx 383B
  299. frontend-bootcamp-master/step2-03/exercise/src/store/
  300. frontend-bootcamp-master/step2-03/exercise/src/store/index.ts 224B
  301. frontend-bootcamp-master/step2-04/
  302. frontend-bootcamp-master/step2-04/demo/
  303. frontend-bootcamp-master/step2-04/demo/README.md 3.99KB
  304. frontend-bootcamp-master/step2-04/demo/index.html 282B
  305. frontend-bootcamp-master/step2-04/demo/src/
  306. frontend-bootcamp-master/step2-04/demo/src/TodoContext.ts 173B
  307. frontend-bootcamp-master/step2-04/demo/src/components/
  308. frontend-bootcamp-master/step2-04/demo/src/components/TodoApp.tsx 2.04KB
  309. frontend-bootcamp-master/step2-04/demo/src/components/TodoFooter.tsx 615B
  310. frontend-bootcamp-master/step2-04/demo/src/components/TodoHeader.tsx 1.79KB
  311. frontend-bootcamp-master/step2-04/demo/src/components/TodoList.tsx 676B
  312. frontend-bootcamp-master/step2-04/demo/src/components/TodoListItem.tsx 2.05KB
  313. frontend-bootcamp-master/step2-04/demo/src/index.tsx 383B
  314. frontend-bootcamp-master/step2-04/demo/src/store/
  315. frontend-bootcamp-master/step2-04/demo/src/store/index.ts 224B
  316. frontend-bootcamp-master/step2-04/exercise/
  317. frontend-bootcamp-master/step2-04/exercise/README.md 935B
  318. frontend-bootcamp-master/step2-04/exercise/index.html 299B
  319. frontend-bootcamp-master/step2-04/exercise/src/
  320. frontend-bootcamp-master/step2-04/exercise/src/TodoContext.ts 173B
  321. frontend-bootcamp-master/step2-04/exercise/src/components/
  322. frontend-bootcamp-master/step2-04/exercise/src/components/TodoApp.tsx 2.12KB
  323. frontend-bootcamp-master/step2-04/exercise/src/components/TodoFooter.tsx 704B
  324. frontend-bootcamp-master/step2-04/exercise/src/components/TodoHeader.tsx 1.91KB
  325. frontend-bootcamp-master/step2-04/exercise/src/components/TodoList.tsx 676B
  326. frontend-bootcamp-master/step2-04/exercise/src/components/TodoListItem.tsx 2.05KB
  327. frontend-bootcamp-master/step2-04/exercise/src/index.tsx 383B
  328. frontend-bootcamp-master/step2-04/exercise/src/store/
  329. frontend-bootcamp-master/step2-04/exercise/src/store/index.ts 224B
  330. frontend-bootcamp-master/step2-05/
  331. frontend-bootcamp-master/step2-05/demo/
  332. frontend-bootcamp-master/step2-05/demo/README.md 4.76KB
  333. frontend-bootcamp-master/step2-05/demo/index.html 853B
  334. frontend-bootcamp-master/step2-05/demo/src/
  335. frontend-bootcamp-master/step2-05/demo/src/actions/
  336. frontend-bootcamp-master/step2-05/demo/src/actions/index.ts 342B
  337. frontend-bootcamp-master/step2-05/demo/src/index.tsx 423B
  338. frontend-bootcamp-master/step2-05/demo/src/reducers/
  339. frontend-bootcamp-master/step2-05/demo/src/reducers/index.ts 942B
  340. frontend-bootcamp-master/step2-05/demo/src/store/
  341. frontend-bootcamp-master/step2-05/demo/src/store/index.ts 224B
  342. frontend-bootcamp-master/step2-05/exercise/
  343. frontend-bootcamp-master/step2-05/exercise/README.md 1.02KB
  344. frontend-bootcamp-master/step2-05/exercise/index.html 869B
  345. frontend-bootcamp-master/step2-05/exercise/src/
  346. frontend-bootcamp-master/step2-05/exercise/src/actions/
  347. frontend-bootcamp-master/step2-05/exercise/src/actions/index.ts 342B
  348. frontend-bootcamp-master/step2-05/exercise/src/index.tsx 388B
  349. frontend-bootcamp-master/step2-05/exercise/src/reducers/
  350. frontend-bootcamp-master/step2-05/exercise/src/reducers/index.ts 879B
  351. frontend-bootcamp-master/step2-05/exercise/src/store/
  352. frontend-bootcamp-master/step2-05/exercise/src/store/index.ts 224B
  353. frontend-bootcamp-master/step2-06/
  354. frontend-bootcamp-master/step2-06/demo/
  355. frontend-bootcamp-master/step2-06/demo/README.md 3.2KB
  356. frontend-bootcamp-master/step2-06/demo/index.html 282B
  357. frontend-bootcamp-master/step2-06/demo/src/
  358. frontend-bootcamp-master/step2-06/demo/src/actions/
  359. frontend-bootcamp-master/step2-06/demo/src/actions/index.ts 408B
  360. frontend-bootcamp-master/step2-06/demo/src/components/
  361. frontend-bootcamp-master/step2-06/demo/src/components/TodoApp.tsx 429B
  362. frontend-bootcamp-master/step2-06/demo/src/components/TodoFooter.tsx 941B
  363. frontend-bootcamp-master/step2-06/demo/src/components/TodoHeader.tsx 2.15KB
  364. frontend-bootcamp-master/step2-06/demo/src/components/TodoList.tsx 811B
  365. frontend-bootcamp-master/step2-06/demo/src/components/TodoListItem.tsx 2.46KB
  366. frontend-bootcamp-master/step2-06/demo/src/index.tsx 535B
  367. frontend-bootcamp-master/step2-06/demo/src/reducers/
  368. frontend-bootcamp-master/step2-06/demo/src/reducers/index.ts 942B
  369. frontend-bootcamp-master/step2-06/demo/src/store/
  370. frontend-bootcamp-master/step2-06/demo/src/store/index.ts 224B
  371. frontend-bootcamp-master/step2-06/exercise/
  372. frontend-bootcamp-master/step2-06/exercise/README.md 983B
  373. frontend-bootcamp-master/step2-06/exercise/index.html 407B
  374. frontend-bootcamp-master/step2-06/exercise/src/
  375. frontend-bootcamp-master/step2-06/exercise/src/actions/
  376. frontend-bootcamp-master/step2-06/exercise/src/actions/index.ts 408B
  377. frontend-bootcamp-master/step2-06/exercise/src/components/
  378. frontend-bootcamp-master/step2-06/exercise/src/components/TodoApp.tsx 429B
  379. frontend-bootcamp-master/step2-06/exercise/src/components/TodoFooter.tsx 1.36KB
  380. frontend-bootcamp-master/step2-06/exercise/src/components/TodoHeader.tsx 2.55KB
  381. frontend-bootcamp-master/step2-06/exercise/src/components/TodoList.tsx 811B
  382. frontend-bootcamp-master/step2-06/exercise/src/components/TodoListItem.tsx 2.46KB
  383. frontend-bootcamp-master/step2-06/exercise/src/index.tsx 575B
  384. frontend-bootcamp-master/step2-06/exercise/src/reducers/
  385. frontend-bootcamp-master/step2-06/exercise/src/reducers/index.ts 942B
  386. frontend-bootcamp-master/step2-06/exercise/src/store/
  387. frontend-bootcamp-master/step2-06/exercise/src/store/index.ts 224B
  388. frontend-bootcamp-master/tsconfig.json 358B
  389. frontend-bootcamp-master/webpack.config.js 3.55KB

资源介绍:

Installing and opening the project Open VS Code and then press ctrl + ` (backtick, in top left corner of keyboard) to open the built-in terminal Use the cd (change directory) command to find an appropriate place for your code Type git clone https://github.com/Microsoft/frontend-bootcamp.git into the terminal to pull down a copy of the workshop code Type cd frontend-bootcamp to change your current directory to the bootcamp folder Type npm install to install all of the project dependencies Type
# Step 1.3 - Introduction to JavaScript (Demo) It's entirely possible to create a website with nothing but HTML and CSS, but as soon as you want user interaction other than links and forms, you'll need to reach for JavaScript, the scripting language of the web. Fortunately, JavaScript has grown up quite a bit since it was introduced in the '90s, and now runs just about everything: web applications, mobile applications, native applications, servers, robots and rocket ships. In this demo we are going to cover a few core basics of the language that will help us when we start writing our todo app. At the end of this demo we will be able to count and display the number of the letter "a"s in our email input. Here's the markup we're working with: ```html
``` By the end of the demo we'll have covered the following: - Variables - Events - Functions - Conditionals - Loops - Interacting with the DOM (Document Object Model) ## Introduction to variables We can create a new variable with the keywords `var`, `let`, `const` and use them within our application. These variables can contain one of the following types of values: - **boolean**: `true`, `false` - **number**: `1`, `3.14` - **string**: `'single quotes'`, `"double quotes"`, or `` `backticks` `` - **array**: `[ 1, 2, 3, 'hello', 'world']` - **object**: `{ foo: 3, bar: 'hello' }` - **function**: `function(foo) { return foo + 1 }` or `(foo) => { return foo + 1}` - **null** - **undefined** > [When to use `var`/`let`/`const`?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) Use `const` for variables you never expect to change, and `let` for anything else. `var` is mostly no longer used. See the link for more details about how each works. ### Variable examples ```js const myBoolean = true; const myNumber = 5; const myString = `Using backticks I can reuse other variables ${myNumber}`; const myArray = [1, 'cat', false, myString]; const myObject = { key1: 'value1', anotherKey: myArray, lastKey: aFunction }; const myFunction = (myNumberParam) => { console.log(myNumber + myNumberParam); }; ``` > JavaScript is a dynamically typed language, so if you initially store a number in a variable (`let myVar = 0`), you can change it to contain a string by simply writing `myVar = 'hello'` without any trouble. ### Adding variables Let's start off our demo by adding a variable to our [script tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). This variable will be global and constant. ```js const match = 'a'; ``` ## Functions Functions are reusable pieces of functionality. Functions can take inputs (parameters) and return values (or neither). Functions can be called from within your program, from within other functions, or invoked from within the DOM itself. In our example we'll create a function called `displayMatches` (camelCase is typical for functions) and we'll invoke this function every time that our submit button is clicked. For now we'll simply have our function call `console.log("Clicked")`, which is a function that displays an alert message box in your browser. ```js function displayMatches() { console.log('Clicked'); } ``` ## Events Functions on their own don't have any effect on the page. When I declare `function displayMatches()` I have only defined the function; I haven't actually executed it. To execute a function we need to attach it to an event. There are a number of possible events: keyboard strokes, mouse clicks, document loading, and more. ### Add event listeners To attach a function to an event, we use an [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) like this: ```js window.addEventListener('load', function () { console.log('loaded'); }); window.addEventListener('click', function () { console.log('click'); }); ``` > [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window) is a reference to the entire window containing the HTML document. ### Global event handlers If you think this feels a little verbose, you're not alone. Many of the [most common event types](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers) are available as element properties. This way we can set properties like `onload` or `onclick` like this: ```js window.onload = function () { console.log('loaded!'); }; window.onclick = function () { console.log('clicked!'); }; ``` > Note that only a single function can be assigned to `onload`, but many event listeners can be added for `load`. In our example, we want to trigger a function when a button is clicked. To do this, we first need to get a reference to the button. We can use the [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) method of the browser-provided [`document`](https://developer.mozilla.org/en-US/docs/Web/API/Document) global variable to get that reference. Then we can set our `displayMatches` function to be the button's `onclick` handler. ```js const button = document.querySelector('.submit'); button.onclick = displayMatches; ``` You can also combine the two statements together like this: ```js document.querySelector('.submit').onclick = displayMatches; ``` Reload the page and click the button to see your function in action! ## Iteration Next we'll update our function to iterate through a string of letters. We loop over each letter using the [`for of`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) syntax. We'll use real input later, but for now this verifies that our function is working. ```js function displayMatches() { const text = 'abcda'; for (let letter of text) { console.log(letter); } } ``` ## Conditionals Next we want to compare each `letter` with our global `match` value, and if they are the same, we will increment a `matches` variable. Remember that `letter = match` would set the `letter` variable to the value in `match`, so to do comparisons, we use the equality operator `==` or the strict equality operator `===`. ```js function displayMatches() { const text = 'abcda'; let matches = 0; for (let letter of text) { if (letter === match) { matches++; } } console.log(matches); } ``` > In JavaScript, it's safest to use strict `===` for comparisons, because `==` will try to convert the operands to the same type. For example, `"1" == 1` converts `"1"` to a number and returns true. This result makes decent sense, but the behavior in certain other cases is [not what you'd expect](https://www.youtube.com/watch?v=et8xNAc2ic8). (See [this video](https://www.destroyallsoftware.com/talks/wat) for more strange JavaScript behavior.) ## Interacting with the DOM Now that we have a function performing all of our logic, it's time to connect this to our DOM by using some of the browser's built-in functions. First we need to get a reference to the email field in our app's DOM. To do this, I've added an `id` to the input, and we'll find the element using [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) from the `document` global variable. This function will return a reference to that input, and we can store it in the `email` variable. ```js function displayMatches() { const email = document.getElementById('email'); console.log(email); // ... } ``` Since what we're actually after is the value of the input field, we can set our `text` variable to the string contained in the email input's `value` key. To see this in action, in Chrome you can right click on the console message created by the code above, choose "save as variable" and then type `variableName.value`. ```js function displayMatches() { const email = document.getElementById('email'); const text = email.val
100+评论
captcha