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

资源文件列表(大概)

文件名

大小

frontend-bootcamp-master/

frontend-bootcamp-master/.gitignore

47B

frontend-bootcamp-master/.vscode/

frontend-bootcamp-master/.vscode/extensions.json

256B

frontend-bootcamp-master/.vscode/settings.json

145B

frontend-bootcamp-master/LICENSE

18.21KB

frontend-bootcamp-master/LICENSE-CODE

1.06KB

frontend-bootcamp-master/README.md

6.27KB

frontend-bootcamp-master/assets/

frontend-bootcamp-master/assets/css-syntax.png

37.59KB

frontend-bootcamp-master/assets/fabric.jpg

12.94KB

frontend-bootcamp-master/assets/flux.png

50.3KB

frontend-bootcamp-master/assets/scripts.js

1.24KB

frontend-bootcamp-master/assets/shared.css

2KB

frontend-bootcamp-master/assets/step.css

2.47KB

frontend-bootcamp-master/assets/todo-components.png

54.16KB

frontend-bootcamp-master/assets/todo_screenshot.jpg

38.03KB

frontend-bootcamp-master/azure-pipelines.pr.yml

439B

frontend-bootcamp-master/azure-pipelines.yml

943B

frontend-bootcamp-master/bonus-jest/

frontend-bootcamp-master/bonus-jest/demo/

frontend-bootcamp-master/bonus-jest/demo/README.md

5.17KB

frontend-bootcamp-master/bonus-jest/demo/index.html

390B

frontend-bootcamp-master/bonus-jest/demo/src/

frontend-bootcamp-master/bonus-jest/demo/src/TestMe.spec.tsx

394B

frontend-bootcamp-master/bonus-jest/demo/src/TestMe.tsx

655B

frontend-bootcamp-master/bonus-jest/demo/src/index.spec.tsx

124B

frontend-bootcamp-master/bonus-jest/demo/src/index.ts

277B

frontend-bootcamp-master/bonus-jest/demo/src/multiply.ts

67B

frontend-bootcamp-master/bonus-jest/exercise/

frontend-bootcamp-master/bonus-jest/exercise/README.md

487B

frontend-bootcamp-master/bonus-jest/exercise/index.html

407B

frontend-bootcamp-master/bonus-jest/exercise/src/

frontend-bootcamp-master/bonus-jest/exercise/src/TestMe.spec.tsx

477B

frontend-bootcamp-master/bonus-jest/exercise/src/TestMe.tsx

672B

frontend-bootcamp-master/bonus-jest/exercise/src/index.ts

68B

frontend-bootcamp-master/bonus-jest/exercise/src/stack.spec.ts

670B

frontend-bootcamp-master/bonus-jest/exercise/src/stack.ts

581B

frontend-bootcamp-master/bonus-servicecalls/

frontend-bootcamp-master/bonus-servicecalls/demo/

frontend-bootcamp-master/bonus-servicecalls/demo/README.md

2.21KB

frontend-bootcamp-master/bonus-servicecalls/demo/index.html

282B

frontend-bootcamp-master/bonus-servicecalls/demo/src/

frontend-bootcamp-master/bonus-servicecalls/demo/src/actions/

frontend-bootcamp-master/bonus-servicecalls/demo/src/actions/index.ts

1.5KB

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoApp.tsx

429B

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoFooter.tsx

947B

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoHeader.tsx

2.14KB

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoList.tsx

811B

frontend-bootcamp-master/bonus-servicecalls/demo/src/components/TodoListItem.tsx

2.51KB

frontend-bootcamp-master/bonus-servicecalls/demo/src/index.tsx

857B

frontend-bootcamp-master/bonus-servicecalls/demo/src/reducers/

frontend-bootcamp-master/bonus-servicecalls/demo/src/reducers/index.ts

942B

frontend-bootcamp-master/bonus-servicecalls/demo/src/service/

frontend-bootcamp-master/bonus-servicecalls/demo/src/service/index.ts

1.13KB

frontend-bootcamp-master/bonus-servicecalls/demo/src/store/

frontend-bootcamp-master/bonus-servicecalls/demo/src/store/index.ts

224B

frontend-bootcamp-master/index.html

6.53KB

frontend-bootcamp-master/jest.config.js

161B

frontend-bootcamp-master/jest.setup.js

143B

frontend-bootcamp-master/markdownReadme/

frontend-bootcamp-master/markdownReadme/src/

frontend-bootcamp-master/markdownReadme/src/index.ts

1.78KB

frontend-bootcamp-master/package-lock.json

351.99KB

frontend-bootcamp-master/package.json

2.13KB

frontend-bootcamp-master/playground/

frontend-bootcamp-master/playground/index.html

430B

frontend-bootcamp-master/prettier.config.js

76B

frontend-bootcamp-master/server/

frontend-bootcamp-master/server/index.js

1.23KB

frontend-bootcamp-master/server/now.json

149B

frontend-bootcamp-master/step1-01/

frontend-bootcamp-master/step1-01/demo/

frontend-bootcamp-master/step1-01/demo/index.html

8.92KB

frontend-bootcamp-master/step1-01/demo/style.css

289B

frontend-bootcamp-master/step1-01/exercise/

frontend-bootcamp-master/step1-01/exercise/README.md

222B

frontend-bootcamp-master/step1-01/exercise/answers.html

1.75KB

frontend-bootcamp-master/step1-01/exercise/baked_beans.jpg

57.12KB

frontend-bootcamp-master/step1-01/exercise/index.html

2.35KB

frontend-bootcamp-master/step1-01/lesson/

frontend-bootcamp-master/step1-01/lesson/README.md

3.14KB

frontend-bootcamp-master/step1-01/lesson/index.html

258B

frontend-bootcamp-master/step1-01/lesson/src/

frontend-bootcamp-master/step1-01/lesson/src/index.tsx

frontend-bootcamp-master/step1-02/

frontend-bootcamp-master/step1-02/demo/

frontend-bootcamp-master/step1-02/demo/index.html

2.81KB

frontend-bootcamp-master/step1-02/exercise/

frontend-bootcamp-master/step1-02/exercise/README.md

221B

frontend-bootcamp-master/step1-02/exercise/answers.css

494B

frontend-bootcamp-master/step1-02/exercise/index.html

1.31KB

frontend-bootcamp-master/step1-02/lesson/

frontend-bootcamp-master/step1-02/lesson/README.md

1.9KB

frontend-bootcamp-master/step1-02/lesson/index.html

258B

frontend-bootcamp-master/step1-02/lesson/src/

frontend-bootcamp-master/step1-02/lesson/src/index.tsx

frontend-bootcamp-master/step1-03/

frontend-bootcamp-master/step1-03/demo/

frontend-bootcamp-master/step1-03/demo/index.html

1.25KB

frontend-bootcamp-master/step1-03/exercise/

frontend-bootcamp-master/step1-03/exercise/README.md

228B

frontend-bootcamp-master/step1-03/exercise/answer.js

386B

frontend-bootcamp-master/step1-03/exercise/index.html

2.16KB

frontend-bootcamp-master/step1-03/lesson/

frontend-bootcamp-master/step1-03/lesson/README.md

8.74KB

frontend-bootcamp-master/step1-03/lesson/index.html

258B

frontend-bootcamp-master/step1-03/lesson/src/

frontend-bootcamp-master/step1-03/lesson/src/index.tsx

frontend-bootcamp-master/step1-04/

frontend-bootcamp-master/step1-04/demo/

frontend-bootcamp-master/step1-04/demo/index.html

757B

frontend-bootcamp-master/step1-04/final/

frontend-bootcamp-master/step1-04/final/README.md

181B

frontend-bootcamp-master/step1-04/final/index.html

75B

frontend-bootcamp-master/step1-04/final/src/

frontend-bootcamp-master/step1-04/final/src/App.tsx

211B

frontend-bootcamp-master/step1-04/final/src/components/

frontend-bootcamp-master/step1-04/final/src/components/Button.css

207B

frontend-bootcamp-master/step1-04/final/src/components/Button.tsx

196B

frontend-bootcamp-master/step1-04/final/src/components/Counter.tsx

336B

frontend-bootcamp-master/step1-04/final/src/index.tsx

149B

frontend-bootcamp-master/step1-04/lesson/

frontend-bootcamp-master/step1-04/lesson/README.md

7.44KB

frontend-bootcamp-master/step1-04/lesson/index.html

258B

frontend-bootcamp-master/step1-04/lesson/src/

frontend-bootcamp-master/step1-04/lesson/src/index.tsx

frontend-bootcamp-master/step1-05/

frontend-bootcamp-master/step1-05/TodoApp.html

931B

frontend-bootcamp-master/step1-05/demo/

frontend-bootcamp-master/step1-05/demo/README.md

1.86KB

frontend-bootcamp-master/step1-05/demo/index.html

128B

frontend-bootcamp-master/step1-05/demo/src/

frontend-bootcamp-master/step1-05/demo/src/App.tsx

123B

frontend-bootcamp-master/step1-05/demo/src/index.tsx

156B

frontend-bootcamp-master/step1-05/demo/src/style.css

535B

frontend-bootcamp-master/step1-05/exercise/

frontend-bootcamp-master/step1-05/exercise/README.md

1.29KB

frontend-bootcamp-master/step1-05/exercise/index.html

128B

frontend-bootcamp-master/step1-05/exercise/src/

frontend-bootcamp-master/step1-05/exercise/src/App.tsx

173B

frontend-bootcamp-master/step1-05/exercise/src/components/

frontend-bootcamp-master/step1-05/exercise/src/components/TodoHeader.tsx

474B

frontend-bootcamp-master/step1-05/exercise/src/components/TodoListItem.tsx

188B

frontend-bootcamp-master/step1-05/exercise/src/index.tsx

156B

frontend-bootcamp-master/step1-05/exercise/src/style.css

566B

frontend-bootcamp-master/step1-06/

frontend-bootcamp-master/step1-06/demo/

frontend-bootcamp-master/step1-06/demo/README.md

5.08KB

frontend-bootcamp-master/step1-06/demo/index.html

128B

frontend-bootcamp-master/step1-06/demo/src/

frontend-bootcamp-master/step1-06/demo/src/TodoApp.tsx

317B

frontend-bootcamp-master/step1-06/demo/src/components/

frontend-bootcamp-master/step1-06/demo/src/components/TodoFooter.tsx

305B

frontend-bootcamp-master/step1-06/demo/src/components/TodoHeader.tsx

630B

frontend-bootcamp-master/step1-06/demo/src/components/TodoList.tsx

480B

frontend-bootcamp-master/step1-06/demo/src/components/TodoListItem.tsx

190B

frontend-bootcamp-master/step1-06/demo/src/index.tsx

160B

frontend-bootcamp-master/step1-06/demo/src/style.css

566B

frontend-bootcamp-master/step1-06/exercise/

frontend-bootcamp-master/step1-06/exercise/README.md

950B

frontend-bootcamp-master/step1-06/exercise/index.html

128B

frontend-bootcamp-master/step1-06/exercise/src/

frontend-bootcamp-master/step1-06/exercise/src/TodoApp.tsx

782B

frontend-bootcamp-master/step1-06/exercise/src/components/

frontend-bootcamp-master/step1-06/exercise/src/components/TodoFooter.tsx

286B

frontend-bootcamp-master/step1-06/exercise/src/components/TodoHeader.tsx

804B

frontend-bootcamp-master/step1-06/exercise/src/components/TodoList.tsx

557B

frontend-bootcamp-master/step1-06/exercise/src/components/TodoListItem.tsx

195B

frontend-bootcamp-master/step1-06/exercise/src/index.tsx

160B

frontend-bootcamp-master/step1-06/exercise/src/style.css

566B

frontend-bootcamp-master/step1-06/index.html

518B

frontend-bootcamp-master/step1-07/

frontend-bootcamp-master/step1-07/demo/

frontend-bootcamp-master/step1-07/demo/README.md

7.25KB

frontend-bootcamp-master/step1-07/demo/index.html

128B

frontend-bootcamp-master/step1-07/demo/src/

frontend-bootcamp-master/step1-07/demo/src/TodoApp.tsx

1.8KB

frontend-bootcamp-master/step1-07/demo/src/TodoApp.types.ts

424B

frontend-bootcamp-master/step1-07/demo/src/components/

frontend-bootcamp-master/step1-07/demo/src/components/TodoFooter.tsx

395B

frontend-bootcamp-master/step1-07/demo/src/components/TodoHeader.tsx

1014B

frontend-bootcamp-master/step1-07/demo/src/components/TodoList.tsx

557B

frontend-bootcamp-master/step1-07/demo/src/components/TodoListItem.tsx

268B

frontend-bootcamp-master/step1-07/demo/src/index.tsx

160B

frontend-bootcamp-master/step1-07/demo/src/style.css

566B

frontend-bootcamp-master/step1-07/exercise/

frontend-bootcamp-master/step1-07/exercise/README.md

1.06KB

frontend-bootcamp-master/step1-07/exercise/index.html

128B

frontend-bootcamp-master/step1-07/exercise/src/

frontend-bootcamp-master/step1-07/exercise/src/TodoApp.tsx

1.78KB

frontend-bootcamp-master/step1-07/exercise/src/TodoApp.types.ts

424B

frontend-bootcamp-master/step1-07/exercise/src/components/

frontend-bootcamp-master/step1-07/exercise/src/components/TodoFooter.tsx

395B

frontend-bootcamp-master/step1-07/exercise/src/components/TodoHeader.tsx

1014B

frontend-bootcamp-master/step1-07/exercise/src/components/TodoList.tsx

787B

frontend-bootcamp-master/step1-07/exercise/src/components/TodoListItem.tsx

517B

frontend-bootcamp-master/step1-07/exercise/src/index.tsx

160B

frontend-bootcamp-master/step1-07/exercise/src/style.css

566B

frontend-bootcamp-master/step1-07/final/

frontend-bootcamp-master/step1-07/final/index.html

128B

frontend-bootcamp-master/step1-07/final/src/

frontend-bootcamp-master/step1-07/final/src/TodoApp.tsx

2.01KB

frontend-bootcamp-master/step1-07/final/src/TodoApp.types.ts

474B

frontend-bootcamp-master/step1-07/final/src/components/

frontend-bootcamp-master/step1-07/final/src/components/TodoFooter.tsx

540B

frontend-bootcamp-master/step1-07/final/src/components/TodoHeader.tsx

1.36KB

frontend-bootcamp-master/step1-07/final/src/components/TodoList.tsx

643B

frontend-bootcamp-master/step1-07/final/src/components/TodoListItem.tsx

453B

frontend-bootcamp-master/step1-07/final/src/index.tsx

160B

frontend-bootcamp-master/step1-07/final/src/style.css

566B

frontend-bootcamp-master/step2-01/

frontend-bootcamp-master/step2-01/demo/

frontend-bootcamp-master/step2-01/demo/README.md

5.5KB

frontend-bootcamp-master/step2-01/demo/index.html

427B

frontend-bootcamp-master/step2-01/demo/src/

frontend-bootcamp-master/step2-01/demo/src/async/

frontend-bootcamp-master/step2-01/demo/src/async/index.ts

310B

frontend-bootcamp-master/step2-01/demo/src/generics/

frontend-bootcamp-master/step2-01/demo/src/generics/index.ts

446B

frontend-bootcamp-master/step2-01/demo/src/index.tsx

240B

frontend-bootcamp-master/step2-01/demo/src/interfaces/

frontend-bootcamp-master/step2-01/demo/src/interfaces/index.ts

612B

frontend-bootcamp-master/step2-01/demo/src/modules/

frontend-bootcamp-master/step2-01/demo/src/modules/default.ts

57B

frontend-bootcamp-master/step2-01/demo/src/modules/index.ts

1020B

frontend-bootcamp-master/step2-01/demo/src/modules/named.ts

181B

frontend-bootcamp-master/step2-01/demo/src/spread/

frontend-bootcamp-master/step2-01/demo/src/spread/index.ts

496B

frontend-bootcamp-master/step2-01/demo/src/types/

frontend-bootcamp-master/step2-01/demo/src/types/index.ts

1.22KB

frontend-bootcamp-master/step2-01/exercise/

frontend-bootcamp-master/step2-01/exercise/README.md

2.55KB

frontend-bootcamp-master/step2-01/exercise/index.html

454B

frontend-bootcamp-master/step2-01/exercise/src/

frontend-bootcamp-master/step2-01/exercise/src/fibonacci.ts

188B

frontend-bootcamp-master/step2-01/exercise/src/index.ts

1.3KB

frontend-bootcamp-master/step2-01/exercise/src/stack.ts

125B

frontend-bootcamp-master/step2-01/final/

frontend-bootcamp-master/step2-01/final/README.md

161B

frontend-bootcamp-master/step2-01/final/index.html

454B

frontend-bootcamp-master/step2-01/final/src/

frontend-bootcamp-master/step2-01/final/src/fibonacci.ts

136B

frontend-bootcamp-master/step2-01/final/src/index.ts

1.59KB

frontend-bootcamp-master/step2-01/final/src/stack.ts

199B

frontend-bootcamp-master/step2-02/

frontend-bootcamp-master/step2-02/demo/

frontend-bootcamp-master/step2-02/demo/README.md

3.22KB

frontend-bootcamp-master/step2-02/demo/index.html

282B

frontend-bootcamp-master/step2-02/demo/src/

frontend-bootcamp-master/step2-02/demo/src/components/

frontend-bootcamp-master/step2-02/demo/src/components/TodoApp.tsx

2.01KB

frontend-bootcamp-master/step2-02/demo/src/components/TodoFooter.tsx

614B

frontend-bootcamp-master/step2-02/demo/src/components/TodoHeader.tsx

1.58KB

frontend-bootcamp-master/step2-02/demo/src/components/TodoList.tsx

863B

frontend-bootcamp-master/step2-02/demo/src/components/TodoListItem.tsx

2.11KB

frontend-bootcamp-master/step2-02/demo/src/index.tsx

383B

frontend-bootcamp-master/step2-02/demo/src/store/

frontend-bootcamp-master/step2-02/demo/src/store/index.ts

224B

frontend-bootcamp-master/step2-02/exercise/

frontend-bootcamp-master/step2-02/exercise/README.md

1.23KB

frontend-bootcamp-master/step2-02/exercise/index.html

299B

frontend-bootcamp-master/step2-02/exercise/src/

frontend-bootcamp-master/step2-02/exercise/src/components/

frontend-bootcamp-master/step2-02/exercise/src/components/TodoApp.tsx

2.01KB

frontend-bootcamp-master/step2-02/exercise/src/components/TodoFooter.tsx

768B

frontend-bootcamp-master/step2-02/exercise/src/components/TodoHeader.tsx

1.58KB

frontend-bootcamp-master/step2-02/exercise/src/components/TodoList.tsx

863B

frontend-bootcamp-master/step2-02/exercise/src/components/TodoListItem.tsx

2.11KB

frontend-bootcamp-master/step2-02/exercise/src/index.tsx

383B

frontend-bootcamp-master/step2-02/exercise/src/store/

frontend-bootcamp-master/step2-02/exercise/src/store/index.ts

224B

frontend-bootcamp-master/step2-03/

frontend-bootcamp-master/step2-03/demo/

frontend-bootcamp-master/step2-03/demo/README.md

5.41KB

frontend-bootcamp-master/step2-03/demo/index.html

282B

frontend-bootcamp-master/step2-03/demo/src/

frontend-bootcamp-master/step2-03/demo/src/components/

frontend-bootcamp-master/step2-03/demo/src/components/TodoApp.tsx

2.91KB

frontend-bootcamp-master/step2-03/demo/src/components/TodoFooter.tsx

738B

frontend-bootcamp-master/step2-03/demo/src/components/TodoHeader.tsx

1.85KB

frontend-bootcamp-master/step2-03/demo/src/components/TodoList.tsx

863B

frontend-bootcamp-master/step2-03/demo/src/components/TodoListItem.tsx

2.07KB

frontend-bootcamp-master/step2-03/demo/src/index.tsx

383B

frontend-bootcamp-master/step2-03/demo/src/store/

frontend-bootcamp-master/step2-03/demo/src/store/index.ts

224B

frontend-bootcamp-master/step2-03/exercise/

frontend-bootcamp-master/step2-03/exercise/README.md

1.89KB

frontend-bootcamp-master/step2-03/exercise/index.html

299B

frontend-bootcamp-master/step2-03/exercise/src/

frontend-bootcamp-master/step2-03/exercise/src/components/

frontend-bootcamp-master/step2-03/exercise/src/components/TodoApp.tsx

2.3KB

frontend-bootcamp-master/step2-03/exercise/src/components/TodoFooter.tsx

826B

frontend-bootcamp-master/step2-03/exercise/src/components/TodoHeader.tsx

1.61KB

frontend-bootcamp-master/step2-03/exercise/src/components/TodoList.tsx

863B

frontend-bootcamp-master/step2-03/exercise/src/components/TodoListItem.tsx

2.07KB

frontend-bootcamp-master/step2-03/exercise/src/index.tsx

383B

frontend-bootcamp-master/step2-03/exercise/src/store/

frontend-bootcamp-master/step2-03/exercise/src/store/index.ts

224B

frontend-bootcamp-master/step2-04/

frontend-bootcamp-master/step2-04/demo/

frontend-bootcamp-master/step2-04/demo/README.md

3.99KB

frontend-bootcamp-master/step2-04/demo/index.html

282B

frontend-bootcamp-master/step2-04/demo/src/

frontend-bootcamp-master/step2-04/demo/src/TodoContext.ts

173B

frontend-bootcamp-master/step2-04/demo/src/components/

frontend-bootcamp-master/step2-04/demo/src/components/TodoApp.tsx

2.04KB

frontend-bootcamp-master/step2-04/demo/src/components/TodoFooter.tsx

615B

frontend-bootcamp-master/step2-04/demo/src/components/TodoHeader.tsx

1.79KB

frontend-bootcamp-master/step2-04/demo/src/components/TodoList.tsx

676B

frontend-bootcamp-master/step2-04/demo/src/components/TodoListItem.tsx

2.05KB

frontend-bootcamp-master/step2-04/demo/src/index.tsx

383B

frontend-bootcamp-master/step2-04/demo/src/store/

frontend-bootcamp-master/step2-04/demo/src/store/index.ts

224B

frontend-bootcamp-master/step2-04/exercise/

frontend-bootcamp-master/step2-04/exercise/README.md

935B

frontend-bootcamp-master/step2-04/exercise/index.html

299B

frontend-bootcamp-master/step2-04/exercise/src/

frontend-bootcamp-master/step2-04/exercise/src/TodoContext.ts

173B

frontend-bootcamp-master/step2-04/exercise/src/components/

frontend-bootcamp-master/step2-04/exercise/src/components/TodoApp.tsx

2.12KB

frontend-bootcamp-master/step2-04/exercise/src/components/TodoFooter.tsx

704B

frontend-bootcamp-master/step2-04/exercise/src/components/TodoHeader.tsx

1.91KB

frontend-bootcamp-master/step2-04/exercise/src/components/TodoList.tsx

676B

frontend-bootcamp-master/step2-04/exercise/src/components/TodoListItem.tsx

2.05KB

frontend-bootcamp-master/step2-04/exercise/src/index.tsx

383B

frontend-bootcamp-master/step2-04/exercise/src/store/

frontend-bootcamp-master/step2-04/exercise/src/store/index.ts

224B

frontend-bootcamp-master/step2-05/

frontend-bootcamp-master/step2-05/demo/

frontend-bootcamp-master/step2-05/demo/README.md

4.76KB

frontend-bootcamp-master/step2-05/demo/index.html

853B

frontend-bootcamp-master/step2-05/demo/src/

frontend-bootcamp-master/step2-05/demo/src/actions/

frontend-bootcamp-master/step2-05/demo/src/actions/index.ts

342B

frontend-bootcamp-master/step2-05/demo/src/index.tsx

423B

frontend-bootcamp-master/step2-05/demo/src/reducers/

frontend-bootcamp-master/step2-05/demo/src/reducers/index.ts

942B

frontend-bootcamp-master/step2-05/demo/src/store/

frontend-bootcamp-master/step2-05/demo/src/store/index.ts

224B

frontend-bootcamp-master/step2-05/exercise/

frontend-bootcamp-master/step2-05/exercise/README.md

1.02KB

frontend-bootcamp-master/step2-05/exercise/index.html

869B

frontend-bootcamp-master/step2-05/exercise/src/

frontend-bootcamp-master/step2-05/exercise/src/actions/

frontend-bootcamp-master/step2-05/exercise/src/actions/index.ts

342B

frontend-bootcamp-master/step2-05/exercise/src/index.tsx

388B

frontend-bootcamp-master/step2-05/exercise/src/reducers/

frontend-bootcamp-master/step2-05/exercise/src/reducers/index.ts

879B

frontend-bootcamp-master/step2-05/exercise/src/store/

frontend-bootcamp-master/step2-05/exercise/src/store/index.ts

224B

frontend-bootcamp-master/step2-06/

frontend-bootcamp-master/step2-06/demo/

frontend-bootcamp-master/step2-06/demo/README.md

3.2KB

frontend-bootcamp-master/step2-06/demo/index.html

282B

frontend-bootcamp-master/step2-06/demo/src/

frontend-bootcamp-master/step2-06/demo/src/actions/

frontend-bootcamp-master/step2-06/demo/src/actions/index.ts

408B

frontend-bootcamp-master/step2-06/demo/src/components/

frontend-bootcamp-master/step2-06/demo/src/components/TodoApp.tsx

429B

frontend-bootcamp-master/step2-06/demo/src/components/TodoFooter.tsx

941B

frontend-bootcamp-master/step2-06/demo/src/components/TodoHeader.tsx

2.15KB

frontend-bootcamp-master/step2-06/demo/src/components/TodoList.tsx

811B

frontend-bootcamp-master/step2-06/demo/src/components/TodoListItem.tsx

2.46KB

frontend-bootcamp-master/step2-06/demo/src/index.tsx

535B

frontend-bootcamp-master/step2-06/demo/src/reducers/

frontend-bootcamp-master/step2-06/demo/src/reducers/index.ts

942B

frontend-bootcamp-master/step2-06/demo/src/store/

frontend-bootcamp-master/step2-06/demo/src/store/index.ts

224B

frontend-bootcamp-master/step2-06/exercise/

frontend-bootcamp-master/step2-06/exercise/README.md

983B

frontend-bootcamp-master/step2-06/exercise/index.html

407B

frontend-bootcamp-master/step2-06/exercise/src/

frontend-bootcamp-master/step2-06/exercise/src/actions/

frontend-bootcamp-master/step2-06/exercise/src/actions/index.ts

408B

frontend-bootcamp-master/step2-06/exercise/src/components/

frontend-bootcamp-master/step2-06/exercise/src/components/TodoApp.tsx

429B

frontend-bootcamp-master/step2-06/exercise/src/components/TodoFooter.tsx

1.36KB

frontend-bootcamp-master/step2-06/exercise/src/components/TodoHeader.tsx

2.55KB

frontend-bootcamp-master/step2-06/exercise/src/components/TodoList.tsx

811B

frontend-bootcamp-master/step2-06/exercise/src/components/TodoListItem.tsx

2.46KB

frontend-bootcamp-master/step2-06/exercise/src/index.tsx

575B

frontend-bootcamp-master/step2-06/exercise/src/reducers/

frontend-bootcamp-master/step2-06/exercise/src/reducers/index.ts

942B

frontend-bootcamp-master/step2-06/exercise/src/store/

frontend-bootcamp-master/step2-06/exercise/src/store/index.ts

224B

frontend-bootcamp-master/tsconfig.json

358B

frontend-bootcamp-master/webpack.config.js

3.55KB

资源内容介绍

Installing and opening the projectOpen VS Code and then press ctrl + ` (backtick, in top left corner of keyboard) to open the built-in terminalUse the cd (change directory) command to find an appropriate place for your codeType git clone https://github.com/Microsoft/frontend-bootcamp.git into the terminal to pull down a copy of the workshop codeType cd frontend-bootcamp to change your current directory to the bootcamp folderType npm install to install all of the project dependenciesType

# 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<div id="contact-form"> <label for="email">Email</label><input id="email" type="email" /> <input class="submit" value="Submit" type="submit" /></div>```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 variablesWe 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```jsconst 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 variablesLet'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.```jsconst match = 'a';```## FunctionsFunctions 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.```jsfunction displayMatches() { console.log('Clicked');}```## EventsFunctions 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 listenersTo attach a function to an event, we use an [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventListener) like this:```jswindow.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 handlersIf 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:```jswindow.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.```jsconst button = document.querySelector('.submit');button.onclick = displayMatches;```You can also combine the two statements together like this:```jsdocument.querySelector('.submit').onclick = displayMatches;```Reload the page and click the button to see your function in action!## IterationNext 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.```jsfunction displayMatches() { const text = 'abcda'; for (let letter of text) { console.log(letter); }}```## ConditionalsNext 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 `===`.```jsfunction 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 DOMNow 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.```jsfunction 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`.```jsfunction displayMatches() { const email = document.getElementById('email'); const text = email.val

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

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

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

Swift 高性能系统编程语言

Python入门网络爬虫之精华版

智能车仿真软件racecar-master

ACM-ICPC 备战指南