├── 00-react ├── 01-previous │ └── readme.md ├── 02-base │ ├── 02-webpack-boiler │ │ ├── src │ │ │ ├── index.tsx │ │ │ ├── styles.css │ │ │ └── index.html │ │ └── .babelrc │ ├── 03-webpack-react │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 05-list-refactor │ │ ├── src │ │ │ ├── model.ts │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ └── 04-list-users │ │ ├── .babelrc │ │ └── src │ │ ├── index.tsx │ │ ├── index.html │ │ └── styles.css ├── 04-basic-app │ ├── 01-routing │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── index.tsx │ │ │ ├── detail.tsx │ │ │ ├── list.tsx │ │ │ ├── index.html │ │ │ └── login.tsx │ │ └── .babelrc │ ├── 02-login │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── index.tsx │ │ │ ├── detail.tsx │ │ │ ├── list.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 00-boiler-plate │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 03-list │ │ ├── .babelrc │ │ └── src │ │ │ ├── index.tsx │ │ │ ├── index.html │ │ │ ├── detail.tsx │ │ │ └── styles.css │ └── 04-detail │ │ ├── .babelrc │ │ └── src │ │ ├── index.tsx │ │ ├── index.html │ │ └── styles.css ├── 06-mui │ ├── 00-login │ │ ├── src │ │ │ ├── common │ │ │ │ └── components │ │ │ │ │ ├── index.ts │ │ │ │ │ └── forms │ │ │ │ │ └── index.ts │ │ │ ├── pods │ │ │ │ ├── list │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── list.vm.ts │ │ │ │ │ └── list.api.ts │ │ │ │ ├── login │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── login.vm.ts │ │ │ │ │ ├── login.styles.css │ │ │ │ │ ├── login.api.ts │ │ │ │ │ └── login.validation.ts │ │ │ │ └── detail │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── detail.api.ts │ │ │ │ │ ├── detail.vm.ts │ │ │ │ │ └── detail.mapper.ts │ │ │ ├── core │ │ │ │ ├── profile │ │ │ │ │ ├── index.ts │ │ │ │ │ └── profile.vm.ts │ │ │ │ └── index.ts │ │ │ ├── declaration.d.ts │ │ │ ├── layouts │ │ │ │ ├── index.ts │ │ │ │ └── center.layout.tsx │ │ │ ├── scenes │ │ │ │ ├── index.ts │ │ │ │ ├── login.tsx │ │ │ │ ├── detail.tsx │ │ │ │ └── list.tsx │ │ │ ├── index.tsx │ │ │ └── app.tsx │ │ └── .babelrc │ └── 01-heading │ │ ├── src │ │ ├── common │ │ │ └── components │ │ │ │ ├── index.ts │ │ │ │ └── forms │ │ │ │ └── index.ts │ │ ├── pods │ │ │ ├── list │ │ │ │ ├── index.ts │ │ │ │ ├── list.vm.ts │ │ │ │ └── list.api.ts │ │ │ ├── detail │ │ │ │ ├── index.ts │ │ │ │ ├── detail.api.ts │ │ │ │ ├── detail.vm.ts │ │ │ │ └── detail.mapper.ts │ │ │ └── login │ │ │ │ ├── index.ts │ │ │ │ ├── login.vm.ts │ │ │ │ ├── login.styles.css │ │ │ │ ├── login.api.ts │ │ │ │ └── login.validation.ts │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── declaration.d.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ ├── index.ts │ │ │ ├── login.tsx │ │ │ ├── list.tsx │ │ │ └── detail.tsx │ │ ├── index.tsx │ │ └── app.tsx │ │ └── .babelrc ├── 03-react-hooks │ ├── 00-boilerplate │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 01-use-state │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ ├── demo.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 07-custom-hook │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 10-use-reducer │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 11-use-context │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── index.tsx │ │ │ ├── app.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 02-use-state-object │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 08-pure-component │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 12-set-state-func │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ ├── index.html │ │ │ └── demo.tsx │ │ └── .babelrc │ ├── 13-async-closure │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 03-component-did-onload │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 04-component_unmount │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 06-ajax-field-change │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 05-component-update-render │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 09-pure-component-callback │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 16-use-debug-value │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── assets │ │ │ │ ├── five.png │ │ │ │ ├── four.png │ │ │ │ ├── one.png │ │ │ │ ├── two.png │ │ │ │ └── three.png │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ ├── .babelrc │ │ └── resources │ │ │ └── 01-dev-tools.png │ ├── 17-why-did-you-update │ │ ├── src │ │ │ ├── styles.css │ │ │ ├── assets │ │ │ │ ├── one.png │ │ │ │ ├── two.png │ │ │ │ ├── five.png │ │ │ │ ├── four.png │ │ │ │ └── three.png │ │ │ ├── app.tsx │ │ │ ├── index.tsx │ │ │ └── index.html │ │ └── .babelrc │ ├── 14-use-ref-dom │ │ ├── .babelrc │ │ └── src │ │ │ ├── app.tsx │ │ │ ├── styles.css │ │ │ ├── index.tsx │ │ │ └── index.html │ ├── 15-memo-predicate │ │ ├── .babelrc │ │ └── src │ │ │ ├── assets │ │ │ ├── five.png │ │ │ ├── four.png │ │ │ ├── one.png │ │ │ ├── three.png │ │ │ └── two.png │ │ │ ├── index.tsx │ │ │ └── index.html │ └── 99-promise-unmounted-R17 │ │ ├── .babelrc │ │ └── src │ │ ├── app.tsx │ │ ├── styles.css │ │ ├── index.tsx │ │ └── index.html └── 05-architecture │ ├── 04-pods │ ├── src │ │ ├── pods │ │ │ ├── list │ │ │ │ ├── index.ts │ │ │ │ └── list.vm.ts │ │ │ ├── detail │ │ │ │ ├── index.ts │ │ │ │ └── detail.vm.ts │ │ │ └── login │ │ │ │ └── index.ts │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ ├── index.ts │ │ │ ├── login.tsx │ │ │ ├── detail.tsx │ │ │ └── list.tsx │ │ ├── index.tsx │ │ ├── index.html │ │ └── app.tsx │ └── .babelrc │ ├── 05-apis │ ├── src │ │ ├── pods │ │ │ ├── list │ │ │ │ ├── index.ts │ │ │ │ ├── list.vm.ts │ │ │ │ └── list.api.ts │ │ │ ├── detail │ │ │ │ ├── index.ts │ │ │ │ ├── detail.api.ts │ │ │ │ ├── detail.vm.ts │ │ │ │ └── detail.mapper.ts │ │ │ └── login │ │ │ │ ├── index.ts │ │ │ │ └── login.api.ts │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ ├── index.ts │ │ │ ├── login.tsx │ │ │ ├── detail.tsx │ │ │ └── list.tsx │ │ ├── index.tsx │ │ ├── index.html │ │ └── app.tsx │ └── .babelrc │ ├── 06-form-validation │ ├── src │ │ ├── common │ │ │ └── components │ │ │ │ ├── index.ts │ │ │ │ └── forms │ │ │ │ └── index.ts │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── pods │ │ │ ├── detail │ │ │ │ ├── index.ts │ │ │ │ ├── detail.api.ts │ │ │ │ ├── detail.vm.ts │ │ │ │ └── detail.mapper.ts │ │ │ ├── list │ │ │ │ ├── index.ts │ │ │ │ ├── list.vm.ts │ │ │ │ └── list.api.ts │ │ │ └── login │ │ │ │ ├── index.ts │ │ │ │ ├── login.vm.ts │ │ │ │ ├── login.api.ts │ │ │ │ └── login.validation.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ ├── index.ts │ │ │ ├── login.tsx │ │ │ ├── detail.tsx │ │ │ └── list.tsx │ │ ├── index.tsx │ │ ├── index.html │ │ └── app.tsx │ └── .babelrc │ ├── 07-css-handling │ ├── src │ │ ├── common │ │ │ └── components │ │ │ │ ├── index.ts │ │ │ │ └── forms │ │ │ │ └── index.ts │ │ ├── pods │ │ │ ├── list │ │ │ │ ├── index.ts │ │ │ │ ├── list.vm.ts │ │ │ │ └── list.api.ts │ │ │ ├── login │ │ │ │ ├── index.ts │ │ │ │ ├── login.vm.ts │ │ │ │ ├── login.styles.css │ │ │ │ ├── login.api.ts │ │ │ │ └── login.validation.ts │ │ │ └── detail │ │ │ │ ├── index.ts │ │ │ │ ├── detail.api.ts │ │ │ │ ├── detail.vm.ts │ │ │ │ └── detail.mapper.ts │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── declaration.d.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ ├── index.ts │ │ │ ├── login.tsx │ │ │ ├── detail.tsx │ │ │ └── list.tsx │ │ ├── index.tsx │ │ ├── index.html │ │ └── app.tsx │ └── .babelrc │ ├── 03-cross-cutting │ ├── src │ │ ├── core │ │ │ ├── profile │ │ │ │ ├── index.ts │ │ │ │ └── profile.vm.ts │ │ │ └── index.ts │ │ ├── layouts │ │ │ ├── index.ts │ │ │ └── center.layout.tsx │ │ ├── scenes │ │ │ └── index.ts │ │ ├── index.tsx │ │ ├── index.html │ │ └── app.tsx │ └── .babelrc │ ├── 02-layout │ ├── src │ │ ├── layouts │ │ │ ├── index.ts │ │ │ ├── center.layout.tsx │ │ │ └── app.layout.tsx │ │ ├── scenes │ │ │ └── index.ts │ │ ├── core │ │ │ └── index.ts │ │ ├── app.tsx │ │ ├── index.tsx │ │ └── index.html │ └── .babelrc │ └── 01-routes │ ├── src │ ├── scenes │ │ └── index.ts │ ├── core │ │ └── index.ts │ ├── app.tsx │ ├── index.tsx │ ├── index.html │ └── styles.css │ └── .babelrc ├── README.md ├── .gitignore └── 01-testing ├── 04-ci ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ ├── prod.js │ │ └── dev.js ├── .prettierrc ├── .babelrc ├── src │ ├── app.tsx │ ├── model.ts │ ├── index.tsx │ ├── api.ts │ └── index.html ├── .gitignore ├── .editorconfig └── .github │ └── workflows │ └── ci.yml ├── 01-base ├── 03-debug │ ├── src │ │ ├── business │ │ │ ├── index.ts │ │ │ └── calculator.business.ts │ │ ├── app.tsx │ │ ├── index.tsx │ │ ├── calculator.ts │ │ └── index.html │ ├── .prettierrc │ ├── config │ │ ├── test │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .babelrc │ ├── .gitignore │ └── .editorconfig ├── 04-tdd │ ├── src │ │ ├── business │ │ │ ├── index.ts │ │ │ └── calculator.business.ts │ │ ├── api-model.ts │ │ ├── view-model.ts │ │ ├── index.tsx │ │ ├── calculator.ts │ │ ├── api.ts │ │ ├── index.html │ │ └── app.tsx │ ├── .prettierrc │ ├── config │ │ ├── test │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .babelrc │ ├── .gitignore │ └── .editorconfig ├── 05-async │ ├── src │ │ ├── business │ │ │ ├── index.ts │ │ │ └── calculator.business.ts │ │ ├── api-model.ts │ │ ├── view-model.ts │ │ ├── index.tsx │ │ ├── calculator.ts │ │ └── index.html │ ├── .prettierrc │ ├── config │ │ ├── test │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .babelrc │ ├── .gitignore │ └── .editorconfig ├── 02-calculator │ ├── src │ │ ├── business │ │ │ ├── index.ts │ │ │ └── calculator.business.ts │ │ ├── app.tsx │ │ ├── index.tsx │ │ ├── calculator.ts │ │ └── index.html │ ├── .prettierrc │ ├── config │ │ ├── test │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .babelrc │ ├── .gitignore │ └── .editorconfig ├── 01-config │ ├── config │ │ ├── test │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .prettierrc │ ├── .babelrc │ ├── src │ │ ├── app.tsx │ │ ├── index.tsx │ │ ├── dummy.spec.ts │ │ └── index.html │ ├── .gitignore │ └── .editorconfig └── 00-boilerplate │ ├── .prettierrc │ ├── .babelrc │ ├── src │ ├── app.tsx │ ├── index.tsx │ └── index.html │ ├── .gitignore │ ├── config │ └── webpack │ │ ├── helpers.js │ │ ├── prod.js │ │ └── dev.js │ └── .editorconfig ├── 03-hooks ├── 02-fetch │ ├── config │ │ ├── test │ │ │ ├── setup-after.ts │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .prettierrc │ ├── .babelrc │ ├── src │ │ ├── app.tsx │ │ ├── model.ts │ │ ├── index.tsx │ │ ├── api.ts │ │ └── index.html │ ├── .gitignore │ └── .editorconfig ├── 00-boilerplate │ ├── config │ │ ├── test │ │ │ ├── setup-after.ts │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ ├── prod.js │ │ │ └── dev.js │ ├── .prettierrc │ ├── .babelrc │ ├── src │ │ ├── app.tsx │ │ ├── index.tsx │ │ └── index.html │ ├── .gitignore │ └── .editorconfig ├── 01-use-state │ ├── config │ │ ├── test │ │ │ ├── setup-after.ts │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ └── prod.js │ ├── src │ │ ├── model.ts │ │ ├── app.tsx │ │ ├── index.tsx │ │ ├── login.hooks.ts │ │ └── index.html │ ├── .prettierrc │ ├── .babelrc │ ├── .gitignore │ └── .editorconfig ├── 04-use-context │ ├── config │ │ ├── test │ │ │ ├── setup-after.ts │ │ │ └── jest.js │ │ └── webpack │ │ │ ├── helpers.js │ │ │ └── prod.js │ ├── .prettierrc │ ├── .babelrc │ ├── src │ │ ├── app.tsx │ │ ├── model.ts │ │ ├── index.tsx │ │ ├── api.ts │ │ └── index.html │ ├── .gitignore │ └── .editorconfig └── 03-component-unmount │ ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ └── prod.js │ ├── .prettierrc │ ├── .babelrc │ ├── src │ ├── app.tsx │ ├── model.ts │ ├── index.tsx │ ├── api.ts │ └── index.html │ ├── .gitignore │ └── .editorconfig └── 02-components ├── 01-hello ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ ├── prod.js │ │ └── dev.js ├── .prettierrc ├── .babelrc ├── src │ ├── app.tsx │ ├── index.tsx │ ├── say-hello.tsx │ └── index.html ├── .gitignore └── .editorconfig ├── 04-fetch ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ ├── prod.js │ │ └── dev.js ├── .prettierrc ├── .babelrc ├── .gitignore ├── src │ ├── index.tsx │ ├── name-api.ts │ ├── display.tsx │ ├── say-hello.tsx │ ├── index.html │ ├── app.tsx │ ├── edit.tsx │ └── name-edit.tsx └── .editorconfig ├── 05-router ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ ├── prod.js │ │ └── dev.js ├── .prettierrc ├── .babelrc ├── .gitignore ├── src │ ├── index.tsx │ ├── name-api.ts │ ├── display.tsx │ ├── app.tsx │ ├── say-hello.tsx │ ├── user-edit.tsx │ ├── index.html │ ├── edit.tsx │ └── name-edit.tsx └── .editorconfig ├── 02-name-edit ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ └── prod.js ├── .prettierrc ├── .babelrc ├── .gitignore ├── src │ ├── index.tsx │ ├── app.tsx │ ├── say-hello.tsx │ ├── name-edit.tsx │ └── index.html └── .editorconfig ├── 03-integration ├── config │ ├── test │ │ ├── setup-after.ts │ │ └── jest.js │ └── webpack │ │ ├── helpers.js │ │ └── prod.js ├── .prettierrc ├── .babelrc ├── .gitignore ├── src │ ├── index.tsx │ ├── display.tsx │ ├── app.tsx │ ├── say-hello.tsx │ ├── index.html │ ├── edit.tsx │ └── name-edit.tsx └── .editorconfig └── 00-boilerplate ├── .prettierrc ├── config ├── test │ └── jest.js └── webpack │ ├── helpers.js │ └── prod.js ├── .babelrc ├── src ├── app.tsx ├── index.tsx └── index.html ├── .gitignore └── .editorconfig /00-react/01-previous/readme.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # demos-react-react-v-2022 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | package-lock.json 4 | .cache 5 | .awcache -------------------------------------------------------------------------------- /00-react/02-base/02-webpack-boiler/src/index.tsx: -------------------------------------------------------------------------------- 1 | console.log("Hello from JS"); 2 | -------------------------------------------------------------------------------- /01-testing/04-ci/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /00-react/02-base/03-webpack-react/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/common/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./forms"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/common/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./forms"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/02-base/02-webpack-boiler/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/00-boilerplate/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/07-custom-hook/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/10-use-reducer/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/11-use-context/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/04-basic-app/00-boiler-plate/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/business/index.ts: -------------------------------------------------------------------------------- 1 | export * from './calculator.business'; 2 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/business/index.ts: -------------------------------------------------------------------------------- 1 | export * from './calculator.business'; 2 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/business/index.ts: -------------------------------------------------------------------------------- 1 | export * from './calculator.business'; 2 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/02-use-state-object/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/08-pure-component/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/13-async-closure/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/business/index.ts: -------------------------------------------------------------------------------- 1 | export * from './calculator.business'; 2 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/03-component-did-onload/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/04-component_unmount/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/06-ajax-field-change/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/common/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./forms"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/common/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./forms"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/declaration.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css"; 2 | declare module "*.scss"; 3 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/05-component-update-render/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/09-pure-component-callback/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/list/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./list.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/login/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./login.container"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/core/profile/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./profile.context"; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/detail/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail.container"; 2 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/declaration.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css"; 2 | declare module "*.scss"; 3 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/config/test/setup-after.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/declaration.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.css"; 2 | declare module "*.scss"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/02-base/02-webpack-boiler/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/common/components/forms/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./input-formik.component"; 2 | -------------------------------------------------------------------------------- /01-testing/04-ci/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/common/components/forms/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./input-formik.component"; 2 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | }; 5 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface Credential { 2 | name: string; 3 | password: string; 4 | } 5 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/layouts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./center.layout"; 2 | export * from "./app.layout"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/api-model.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/view-model.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: string; 3 | login: string; 4 | avatarUrl: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/api-model.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: number; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/view-model.ts: -------------------------------------------------------------------------------- 1 | export interface Member { 2 | id: string; 3 | login: string; 4 | avatarUrl: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "endOfLine": "lf" 5 | } 6 | -------------------------------------------------------------------------------- /00-react/02-base/05-list-refactor/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | avatar_url: string; 3 | id: string; 4 | login: string; 5 | } 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/scenes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./detail"; 2 | export * from "./list"; 3 | export * from "./login"; 4 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/02-base/03-webpack-react/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const App = () => { 4 | return

Hello React !!

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./router/router.component"; 2 | export { routes } from "./router/routes"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/common/components/forms/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./input-formik.component"; 2 | export * from "./textfield-formik.component"; 3 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/00-boilerplate/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const App = () => { 4 | return

Hello React !!

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/04-basic-app/00-boiler-plate/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const App = () => { 4 | return

Hello React !!

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/common/components/forms/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./input-formik.component"; 2 | export * from "./textfield-formik.component"; 3 | -------------------------------------------------------------------------------- /01-testing/04-ci/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/02-base/04-list-users/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/04-basic-app/03-list/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/04-ci/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/02-base/03-webpack-react/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/02-base/05-list-refactor/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/04-basic-app/04-detail/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/list/list.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberEntity { 2 | id: string; 3 | login: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/business/calculator.business.ts: -------------------------------------------------------------------------------- 1 | export const isLowerThanFive = (value) => { 2 | console.log(`The value: ${value} is lower than 5`); 3 | }; 4 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/business/calculator.business.ts: -------------------------------------------------------------------------------- 1 | export const isLowerThanFive = (value) => { 2 | console.log(`The value: ${value} is lower than 5`); 3 | }; 4 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/business/calculator.business.ts: -------------------------------------------------------------------------------- 1 | export const isLowerThanFive = (value) => { 2 | console.log(`The value: ${value} is lower than 5`); 3 | }; 4 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/00-boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/07-custom-hook/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/10-use-reducer/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/11-use-context/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/13-async-closure/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/14-use-ref-dom/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/04-basic-app/00-boiler-plate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/business/calculator.business.ts: -------------------------------------------------------------------------------- 1 | export const isLowerThanFive = (value) => { 2 | console.log(`The value: ${value} is lower than 5`); 3 | }; 4 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/02-use-state-object/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/04-component_unmount/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/06-ajax-field-change/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/08-pure-component/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/assets/five.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/15-memo-predicate/src/assets/five.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/assets/four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/15-memo-predicate/src/assets/four.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/assets/one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/15-memo-predicate/src/assets/one.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/assets/three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/15-memo-predicate/src/assets/three.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/assets/two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/15-memo-predicate/src/assets/two.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/assets/five.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/src/assets/five.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/assets/four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/src/assets/four.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/assets/one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/src/assets/one.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/assets/two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/src/assets/two.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/03-component-did-onload/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/05-component-update-render/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/09-pure-component-callback/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/assets/three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/src/assets/three.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/assets/one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/17-why-did-you-update/src/assets/one.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/assets/two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/17-why-did-you-update/src/assets/two.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/99-promise-unmounted-R17/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-typescript", 5 | "@babel/preset-react" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/07-custom-hook/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/10-use-reducer/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/13-async-closure/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/14-use-ref-dom/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/assets/five.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/17-why-did-you-update/src/assets/five.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/assets/four.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/17-why-did-you-update/src/assets/four.png -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/assets/three.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/17-why-did-you-update/src/assets/three.png -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/02-use-state-object/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/04-component_unmount/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/06-ajax-field-change/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/08-pure-component/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/resources/01-dev-tools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lemoncode/demos-react-v-2022/main/00-react/03-react-hooks/16-use-debug-value/resources/01-dev-tools.png -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | export const App: React.FunctionComponent = () => { 4 | return

05-Testing / 01 React

; 5 | }; 6 | -------------------------------------------------------------------------------- /01-testing/04-ci/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface Credential { 2 | name: string; 3 | password: string; 4 | } 5 | 6 | export interface User { 7 | email: string; 8 | role: string; 9 | } 10 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/03-component-did-onload/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/05-component-update-render/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/09-pure-component-callback/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/14-use-ref-dom/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | 5 | .container { 6 | border: 1px solid steelblue; 7 | margin: 15px; 8 | padding: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/99-promise-unmounted-R17/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | 4 | export const App = () => { 5 | return ; 6 | }; 7 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/04-ci/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/01-base/05-async/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/04-ci/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/99-promise-unmounted-R17/src/styles.css: -------------------------------------------------------------------------------- 1 | .my-text { 2 | color: blue; 3 | } 4 | 5 | .container { 6 | border: 1px solid steelblue; 7 | margin: 15px; 8 | padding: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface Credential { 2 | name: string; 3 | password: string; 4 | } 5 | 6 | export interface User { 7 | email: string; 8 | role: string; 9 | } 10 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface Credential { 2 | name: string; 3 | password: string; 4 | } 5 | 6 | export interface User { 7 | email: string; 8 | role: string; 9 | } 10 | -------------------------------------------------------------------------------- /01-testing/04-ci/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/04-ci/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/src/model.ts: -------------------------------------------------------------------------------- 1 | export interface Credential { 2 | name: string; 3 | password: string; 4 | } 5 | 6 | export interface User { 7 | email: string; 8 | role: string; 9 | } 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | coverage 4 | .awcache 5 | test-report.* 6 | junit.xml 7 | *.log 8 | *.orig 9 | package-lock.json 10 | yarn.lock 11 | .awcache 12 | public 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/core/profile/profile.vm.ts: -------------------------------------------------------------------------------- 1 | export interface UserProfile { 2 | userName: string; 3 | } 4 | 5 | export const createEmptyUserProfile = (): UserProfile => ({ 6 | userName: "", 7 | }); 8 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { App } from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /00-react/02-base/05-list-refactor/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MemberEntity } from "./model"; 3 | import { MemberTable } from "./member-table"; 4 | 5 | export const App = () => { 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/config/webpack/helpers.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const rootPath = path.resolve(__dirname, '../../'); 4 | 5 | exports.resolveFromRootPath = (...args) => path.join(rootPath, ...args); 6 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/04-ci/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/src/dummy.spec.ts: -------------------------------------------------------------------------------- 1 | describe('dummy specs', () => { 2 | it('should pass spec', () => { 3 | // Arrange 4 | 5 | // Act 6 | 7 | // Assert 8 | expect(true).toBeTruthy(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/login/login.vm.ts: -------------------------------------------------------------------------------- 1 | export interface Login { 2 | username: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): Login => ({ 7 | username: "", 8 | password: "", 9 | }); 10 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/login/login.vm.ts: -------------------------------------------------------------------------------- 1 | export interface Login { 2 | username: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): Login => ({ 7 | username: "", 8 | password: "", 9 | }); 10 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/login/login.vm.ts: -------------------------------------------------------------------------------- 1 | export interface Login { 2 | username: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): Login => ({ 7 | username: "", 8 | password: "", 9 | }); 10 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/login/login.vm.ts: -------------------------------------------------------------------------------- 1 | export interface Login { 2 | username: string; 3 | password: string; 4 | } 5 | 6 | export const createEmptyLogin = (): Login => ({ 7 | username: "", 8 | password: "", 9 | }); 10 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/config/test/jest.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: '../../', 3 | preset: 'ts-jest', 4 | restoreMocks: true, 5 | testEnvironment: 'jsdom', 6 | setupFilesAfterEnv: ['/config/test/setup-after.ts'], 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/04-ci/src/api.ts: -------------------------------------------------------------------------------- 1 | import { Credential, User } from './model'; 2 | 3 | // TODO: Implement real login method on backend server 4 | export const login = (credential: Credential): Promise => { 5 | return Promise.reject('Pending to implement'); 6 | }; 7 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/calculator.ts: -------------------------------------------------------------------------------- 1 | import { isLowerThanFive } from './business'; 2 | 3 | export const add = (a, b) => { 4 | const result = a + b; 5 | 6 | if (result < 5) { 7 | isLowerThanFive(result); 8 | } 9 | 10 | return result; 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/calculator.ts: -------------------------------------------------------------------------------- 1 | import { isLowerThanFive } from './business'; 2 | 3 | export const add = (a, b) => { 4 | const result = a + b; 5 | 6 | if (result < 5) { 7 | isLowerThanFive(result); 8 | } 9 | 10 | return result; 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/calculator.ts: -------------------------------------------------------------------------------- 1 | import { isLowerThanFive } from './business'; 2 | 3 | export const add = (a, b) => { 4 | const result = a + b; 5 | 6 | if (result < 5) { 7 | isLowerThanFive(result); 8 | } 9 | 10 | return result; 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | 5 | export const App = () => { 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | 5 | export const App = () => { 6 | return ; 7 | }; 8 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/calculator.ts: -------------------------------------------------------------------------------- 1 | import { isLowerThanFive } from './business'; 2 | 3 | export const add = (a, b) => { 4 | const result = a + b; 5 | 6 | if (result < 5) { 7 | isLowerThanFive(result); 8 | } 9 | 10 | return result; 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/src/api.ts: -------------------------------------------------------------------------------- 1 | import { Credential, User } from './model'; 2 | 3 | // TODO: Implement real login method on backend server 4 | export const login = (credential: Credential): Promise => { 5 | return Promise.reject('Pending to implement'); 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/name-api.ts: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | 3 | const url = 'https://jsonplaceholder.typicode.com/users'; 4 | 5 | export const getNameCollection = (): Promise => 6 | Axios.get(url).then(({ data }) => data.map((user) => user.name)); 7 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/name-api.ts: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | 3 | const url = 'https://jsonplaceholder.typicode.com/users'; 4 | 5 | export const getNameCollection = (): Promise => 6 | Axios.get(url).then(({ data }) => data.map((user) => user.name)); 7 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/src/api.ts: -------------------------------------------------------------------------------- 1 | import { Credential, User } from './model'; 2 | 3 | // TODO: Implement real login method on backend server 4 | export const login = (credential: Credential): Promise => { 5 | return Promise.reject('Pending to implement'); 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/02-base/03-webpack-react/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/02-base/04-list-users/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/02-base/05-list-refactor/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/04-basic-app/03-list/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/04-basic-app/04-detail/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/src/api.ts: -------------------------------------------------------------------------------- 1 | import { Credential, User } from './model'; 2 | 3 | // TODO: Implement real login method on backend server 4 | export const login = (credential: Credential): Promise => { 5 | return Promise.reject('Pending to implement'); 6 | }; 7 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/00-boilerplate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/07-custom-hook/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/10-use-reducer/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/11-use-context/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/14-use-ref-dom/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | import "./styles.css"; 4 | 5 | export const App = () => { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | }; -------------------------------------------------------------------------------- /00-react/04-basic-app/00-boiler-plate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/api.ts: -------------------------------------------------------------------------------- 1 | import Axios from 'axios'; 2 | import { Member } from './api-model'; 3 | 4 | const url = 'https://api.github.com/orgs/lemoncode/members'; 5 | 6 | export const getMembers = (): Promise => 7 | Axios.get(url).then((response) => response.data); 8 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/02-use-state-object/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/08-pure-component/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/11-use-context/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent, MyContextProvider } from "./demo"; 3 | 4 | export const App = () => { 5 | return ( 6 | 7 | 8 | 9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/13-async-closure/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { MyComponent } from "./demo"; 3 | import "./styles.css"; 4 | 5 | export const App = () => { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | }; -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/03-component-did-onload/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/04-component_unmount/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/06-ajax-field-change/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/99-promise-unmounted-R17/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/detail/detail.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberDetailEntityApi } from "./detail.api-model"; 2 | 3 | export const getMemberDetail = (id: string): Promise => 4 | fetch(`https://api.github.com/users/${id}`).then((response) => 5 | response.json() 6 | ); 7 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/login/login.styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: 20px; 5 | } 6 | 7 | .container > input { 8 | width: 320px; 9 | } 10 | 11 | .container > button { 12 | width: 180px; 13 | align-self: center; 14 | } 15 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/login/login.styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: 20px; 5 | } 6 | 7 | .container > input { 8 | width: 320px; 9 | } 10 | 11 | .container > button { 12 | width: 180px; 13 | align-self: center; 14 | } 15 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/display.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const Display: React.FunctionComponent = (props) => { 8 | const { userName } = props; 9 | 10 | return

{userName}

; 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/display.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const Display: React.FunctionComponent = (props) => { 8 | const { userName } = props; 9 | 10 | return

{userName}

; 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/05-component-update-render/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/09-pure-component-callback/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | import { App } from "./app"; 4 | 5 | const container = document.getElementById("root"); 6 | const root = createRoot(container); 7 | 8 | root.render(); 9 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/detail/detail.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberDetailEntityApi } from "./detail.api-model"; 2 | 3 | export const getMemberDetail = (id: string): Promise => 4 | fetch(`https://api.github.com/users/${id}`).then((response) => 5 | response.json() 6 | ); 7 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/display.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | } 6 | 7 | export const Display: React.FunctionComponent = (props) => { 8 | const { userName } = props; 9 | 10 | return

{userName}

; 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { Router } from './router'; 3 | 4 | export const App: React.FunctionComponent = () => { 5 | return ( 6 | <> 7 |

05-Testing / 01 React

8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/detail/detail.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberDetailEntityApi } from "./detail.api-model"; 2 | 3 | export const getMemberDetail = (id: string): Promise => 4 | fetch(`https://api.github.com/users/${id}`).then((response) => 5 | response.json() 6 | ); 7 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/layouts/center.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const CenterLayout: React.FC = ({ children }) => ( 8 |
{children}
9 | ); 10 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/login/login.styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: 20px; 5 | } 6 | 7 | .container > input { 8 | width: 320px; 9 | } 10 | 11 | .container > button { 12 | width: 180px; 13 | align-self: center; 14 | } 15 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { NameEdit } from './name-edit'; 3 | 4 | export const App: React.FunctionComponent = () => { 5 | return ( 6 | <> 7 |

05-Testing / 01 React

8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { NameEdit } from './name-edit'; 3 | 4 | export const App: React.FunctionComponent = () => { 5 | return ( 6 | <> 7 |

05-Testing / 01 React

8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/detail/detail.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberDetailEntityApi } from "./detail.api-model"; 2 | 3 | export const getMemberDetail = (id: string): Promise => 4 | fetch(`https://api.github.com/users/${id}`).then((response) => 5 | response.json() 6 | ); 7 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/detail/detail.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberDetailEntityApi } from "./detail.api-model"; 2 | 3 | export const getMemberDetail = (id: string): Promise => 4 | fetch(`https://api.github.com/users/${id}`).then((response) => 5 | response.json() 6 | ); 7 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const DetailPage: React.FC = () => { 5 | return ( 6 | <> 7 |

Hello from Detail page

8 | Back to list page 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const ListPage: React.FC = () => { 5 | return ( 6 | <> 7 |

Hello from List page

8 | Navigate to detail page 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/src/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const DetailPage: React.FC = () => { 5 | return ( 6 | <> 7 |

Hello from Detail page

8 | Back to list page 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/src/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export const ListPage: React.FC = () => { 5 | return ( 6 | <> 7 |

Hello from List page

8 | Navigate to detail page 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/list/list.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntityApi } from "./list.api-model"; 2 | import { MemberEntity } from "./list.vm"; 3 | 4 | export const getMemberCollection = (): Promise => 5 | fetch(`https://api.github.com/orgs/lemoncode/members`).then((response) => 6 | response.json() 7 | ); 8 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/list/list.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntityApi } from "./list.api-model"; 2 | import { MemberEntity } from "./list.vm"; 3 | 4 | export const getMemberCollection = (): Promise => 5 | fetch(`https://api.github.com/orgs/lemoncode/members`).then((response) => 6 | response.json() 7 | ); 8 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/list/list.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntityApi } from "./list.api-model"; 2 | import { MemberEntity } from "./list.vm"; 3 | 4 | export const getMemberCollection = (): Promise => 5 | fetch(`https://api.github.com/orgs/lemoncode/members`).then((response) => 6 | response.json() 7 | ); 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/04-ci/.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Ci workflow 2 | 3 | on: pull_request 4 | 5 | jobs: 6 | ci: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - name: Checkout repository 10 | uses: actions/checkout@v2 11 | - name: Install 12 | run: npm install 13 | - name: Tests 14 | run: npm test 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/list/list.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntityApi } from "./list.api-model"; 2 | import { MemberEntity } from "./list.vm"; 3 | 4 | export const getMemberCollection = (): Promise => 5 | fetch(`https://api.github.com/orgs/lemoncode/members`).then((response) => 6 | response.json() 7 | ); 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/list/list.api.ts: -------------------------------------------------------------------------------- 1 | import { MemberEntityApi } from "./list.api-model"; 2 | import { MemberEntity } from "./list.vm"; 3 | 4 | export const getMemberCollection = (): Promise => 5 | fetch(`https://api.github.com/orgs/lemoncode/members`).then((response) => 6 | response.json() 7 | ); 8 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/scenes/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { LoginContainer } from "@/pods/login"; 3 | import { CenterLayout } from "@/layouts"; 4 | 5 | export const LoginPage: React.FC = () => { 6 | return ( 7 | 8 | 9 | 10 | ); 11 | }; 12 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/src/say-hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | person: string; 5 | } 6 | 7 | export const SayHello: React.FunctionComponent = (props) => { 8 | const { person } = props; 9 | return ( 10 |

11 | Hello {person} 12 |

13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/say-hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | person: string; 5 | } 6 | 7 | export const SayHello: React.FunctionComponent = (props) => { 8 | const { person } = props; 9 | return ( 10 |

11 | Hello {person} 12 |

13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/say-hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | person: string; 5 | } 6 | 7 | export const SayHello: React.FunctionComponent = (props) => { 8 | const { person } = props; 9 | return ( 10 |

11 | Hello {person} 12 |

13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/src/say-hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | person: string; 5 | } 6 | 7 | export const SayHello: React.FunctionComponent = (props) => { 8 | const { person } = props; 9 | return ( 10 |

11 | Hello {person} 12 |

13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/say-hello.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | person: string; 5 | } 6 | 7 | export const SayHello: React.FunctionComponent = (props) => { 8 | const { person } = props; 9 | return ( 10 |

11 | Hello {person} 12 |

13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/user-edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { useParams } from 'react-router-dom'; 3 | 4 | type ParamProps = { 5 | name: string; 6 | }; 7 | 8 | export const UserEdit: React.FunctionComponent = (props) => { 9 | const params = useParams(); 10 | return

User name: {params.name}

; 11 | }; 12 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/src/demo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const MyComponent: React.FC = () => { 4 | const [myName, setMyName] = React.useState("John Doe"); 5 | 6 | return ( 7 | <> 8 |

{myName}

9 | setMyName(e.target.value)} /> 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /01-testing/04-ci/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/src/login.hooks.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Credential } from './model'; 3 | 4 | export const useLogin = () => { 5 | const [credential, setCredential] = React.useState({ 6 | name: '', 7 | password: '', 8 | }); 9 | 10 | return { 11 | credential, 12 | setCredential, 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/04-ci/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/detail/detail.vm.ts: -------------------------------------------------------------------------------- 1 | export interface MemberDetailEntity { 2 | id: string; 3 | login: string; 4 | name: string; 5 | company: string; 6 | bio: string; 7 | } 8 | 9 | export const createDefaultMemberDetail = () => ({ 10 | id: "", 11 | login: "", 12 | name: "", 13 | company: "", 14 | bio: "", 15 | }); 16 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/layouts/app.layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface Props { 4 | children: React.ReactNode; 5 | } 6 | 7 | export const AppLayout: React.FC = ({ children }) => ( 8 |
9 |
User Logged in
10 | {children} 11 |
12 | ); 13 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/src/name-edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const NameEdit: React.FunctionComponent = () => { 4 | const [userName, setUserName] = React.useState(''); 5 | 6 | return ( 7 | <> 8 |

{userName}

9 | setUserName(e.target.value)} /> 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/03-hooks/01-use-state/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/03-hooks/04-use-context/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/00-boilerplate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/02-name-edit/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { NameEdit } from './name-edit'; 3 | import { NameCollection } from './name-collection'; 4 | 5 | export const App: React.FunctionComponent = () => { 6 | return ( 7 | <> 8 |

05-Testing / 01 React

9 | 10 | 11 | 12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/config/webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'production', 7 | output: { 8 | path: helpers.resolveFromRootPath('dist'), 9 | filename: './js/[name].[chunkhash].js', 10 | }, 11 | }); 12 | -------------------------------------------------------------------------------- /01-testing/03-hooks/03-component-unmount/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 05 Testing / 01 React 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /00-react/04-basic-app/03-list/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/02-base/03-webpack-react/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/02-base/04-list-users/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/02-base/05-list-refactor/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/02-login/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/04-detail/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/02-layout/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/00-boilerplate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/01-use-state/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/07-custom-hook/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/10-use-reducer/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/11-use-context/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/14-use-ref-dom/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/00-boiler-plate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/03-list/src/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useParams } from "react-router-dom"; 3 | 4 | export const DetailPage: React.FC = () => { 5 | const {id} = useParams(); 6 | 7 | return ( 8 | <> 9 |

Hello from Detail page

10 |

User Id: {id}

11 | Back to list page 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/login/login.api.ts: -------------------------------------------------------------------------------- 1 | export const doLogin = ( 2 | username: string, 3 | password: string 4 | ): Promise => { 5 | const promise = new Promise((resolve, reject) => { 6 | // Simulating Ajax Call 7 | setTimeout(() => { 8 | resolve(username === "admin" && password === "test"); 9 | }, 500); 10 | }); 11 | return promise; 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/login/login.api.ts: -------------------------------------------------------------------------------- 1 | export const doLogin = ( 2 | username: string, 3 | password: string 4 | ): Promise => { 5 | const promise = new Promise((resolve, reject) => { 6 | // Simulating Ajax Call 7 | setTimeout(() => { 8 | resolve(username === "admin" && password === "test"); 9 | }, 500); 10 | }); 11 | return promise; 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/02-use-state-object/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/04-component_unmount/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/06-ajax-field-change/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/08-pure-component/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/13-async-closure/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/15-memo-predicate/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/16-use-debug-value/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/login/login.api.ts: -------------------------------------------------------------------------------- 1 | export const doLogin = ( 2 | username: string, 3 | password: string 4 | ): Promise => { 5 | const promise = new Promise((resolve, reject) => { 6 | // Simulating Ajax Call 7 | setTimeout(() => { 8 | resolve(username === "admin" && password === "test"); 9 | }, 500); 10 | }); 11 | return promise; 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/03-component-did-onload/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/17-why-did-you-update/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/99-promise-unmounted-R17/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/04-basic-app/03-list/src/styles.css: -------------------------------------------------------------------------------- 1 | .list-user-list-container { 2 | display: grid; 3 | grid-template-columns: 80px 1fr 3fr; 4 | grid-template-rows: 20px; 5 | grid-auto-rows: 80px; 6 | grid-gap: 10px 5px; 7 | } 8 | 9 | .list-header { 10 | background-color: #2f4858; 11 | color: white; 12 | font-weight: bold; 13 | } 14 | 15 | .list-user-list-container > img { 16 | width: 80px; 17 | } 18 | -------------------------------------------------------------------------------- /00-react/04-basic-app/04-detail/src/styles.css: -------------------------------------------------------------------------------- 1 | .list-user-list-container { 2 | display: grid; 3 | grid-template-columns: 80px 1fr 3fr; 4 | grid-template-rows: 20px; 5 | grid-auto-rows: 80px; 6 | grid-gap: 10px 5px; 7 | } 8 | 9 | .list-header { 10 | background-color: #2f4858; 11 | color: white; 12 | font-weight: bold; 13 | } 14 | 15 | .list-user-list-container > img { 16 | width: 80px; 17 | } 18 | -------------------------------------------------------------------------------- /00-react/05-architecture/03-cross-cutting/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/app.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; 3 | import { RouterComponent } from "@/core"; 4 | import { ProfileProvider } from "@/core/profile"; 5 | 6 | export const App = () => { 7 | return ( 8 | 9 | 10 | 11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/detail/detail.mapper.ts: -------------------------------------------------------------------------------- 1 | import * as vm from "./detail.vm"; 2 | import * as api from "./detail.api-model"; 3 | 4 | export const mapMemberFromApiToVm = ( 5 | member: api.MemberDetailEntityApi 6 | ): vm.MemberDetailEntity => ({ 7 | id: member.id.toString(), 8 | login: member.login, 9 | name: member.name, 10 | company: member.company, 11 | bio: member.bio, 12 | }); 13 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/detail/detail.mapper.ts: -------------------------------------------------------------------------------- 1 | import * as vm from "./detail.vm"; 2 | import * as api from "./detail.api-model"; 3 | 4 | export const mapMemberFromApiToVm = ( 5 | member: api.MemberDetailEntityApi 6 | ): vm.MemberDetailEntity => ({ 7 | id: member.id.toString(), 8 | login: member.login, 9 | name: member.name, 10 | company: member.company, 11 | bio: member.bio, 12 | }); 13 | -------------------------------------------------------------------------------- /00-react/02-base/02-webpack-boiler/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |

Hello World !

11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/05-component-update-render/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/09-pure-component-callback/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | My App Example 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/01-routes/src/styles.css: -------------------------------------------------------------------------------- 1 | .list-user-list-container { 2 | display: grid; 3 | grid-template-columns: 80px 1fr 3fr; 4 | grid-template-rows: 20px; 5 | grid-auto-rows: 80px; 6 | grid-gap: 10px 5px; 7 | } 8 | 9 | .list-header { 10 | background-color: #2f4858; 11 | color: white; 12 | font-weight: bold; 13 | } 14 | 15 | .list-user-list-container > img { 16 | width: 80px; 17 | } 18 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/pods/detail/detail.mapper.ts: -------------------------------------------------------------------------------- 1 | import * as vm from "./detail.vm"; 2 | import * as api from "./detail.api-model"; 3 | 4 | export const mapMemberFromApiToVm = ( 5 | member: api.MemberDetailEntityApi 6 | ): vm.MemberDetailEntity => ({ 7 | id: member.id.toString(), 8 | login: member.login, 9 | name: member.name, 10 | company: member.company, 11 | bio: member.bio, 12 | }); 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/login/login.api.ts: -------------------------------------------------------------------------------- 1 | export const doLogin = ( 2 | username: string, 3 | password: string 4 | ): Promise => { 5 | const promise = new Promise((resolve, reject) => { 6 | // Simulating Ajax Call 7 | setTimeout(() => { 8 | resolve(username === "admin" && password === "test"); 9 | }, 500); 10 | }); 11 | return promise; 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/login/login.api.ts: -------------------------------------------------------------------------------- 1 | export const doLogin = ( 2 | username: string, 3 | password: string 4 | ): Promise => { 5 | const promise = new Promise((resolve, reject) => { 6 | // Simulating Ajax Call 7 | setTimeout(() => { 8 | resolve(username === "admin" && password === "test"); 9 | }, 500); 10 | }); 11 | return promise; 12 | }; 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/detail/detail.mapper.ts: -------------------------------------------------------------------------------- 1 | import * as vm from "./detail.vm"; 2 | import * as api from "./detail.api-model"; 3 | 4 | export const mapMemberFromApiToVm = ( 5 | member: api.MemberDetailEntityApi 6 | ): vm.MemberDetailEntity => ({ 7 | id: member.id.toString(), 8 | login: member.login, 9 | name: member.name, 10 | company: member.company, 11 | bio: member.bio, 12 | }); 13 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/detail/detail.mapper.ts: -------------------------------------------------------------------------------- 1 | import * as vm from "./detail.vm"; 2 | import * as api from "./detail.api-model"; 3 | 4 | export const mapMemberFromApiToVm = ( 5 | member: api.MemberDetailEntityApi 6 | ): vm.MemberDetailEntity => ({ 7 | id: member.id.toString(), 8 | login: member.login, 9 | name: member.name, 10 | company: member.company, 11 | bio: member.bio, 12 | }); 13 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | onSetUserName: (userName: string) => void; 6 | } 7 | 8 | export const Edit: React.FunctionComponent = (props) => { 9 | const { userName, onSetUserName } = props; 10 | 11 | return ( 12 | onSetUserName(e.target.value)} /> 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | onSetUserName: (userName: string) => void; 6 | } 7 | 8 | export const Edit: React.FunctionComponent = (props) => { 9 | const { userName, onSetUserName } = props; 10 | 11 | return ( 12 | onSetUserName(e.target.value)} /> 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | interface Props { 4 | userName: string; 5 | onSetUserName: (userName: string) => void; 6 | } 7 | 8 | export const Edit: React.FunctionComponent = (props) => { 9 | const { userName, onSetUserName } = props; 10 | 11 | return ( 12 | onSetUserName(e.target.value)} /> 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/04-pods/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/05-apis/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /00-react/06-mui/00-login/src/pods/login/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | username: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const formValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /00-react/06-mui/01-heading/src/pods/login/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | username: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const formValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/scenes/detail.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { useParams } from "react-router-dom"; 3 | import { AppLayout } from "@/layouts"; 4 | import { DetailContainer } from "@/pods/detail"; 5 | 6 | export const DetailPage: React.FC = () => { 7 | const { id } = useParams(); 8 | 9 | return ( 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/scenes/list.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { AppLayout } from "@/layouts"; 3 | import { ListContainer } from "@/pods/list"; 4 | 5 | interface MemberEntity { 6 | id: string; 7 | login: string; 8 | avatar_url: string; 9 | } 10 | 11 | export const ListPage: React.FC = () => { 12 | return ( 13 | 14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/src/app.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { getMembers } from './api'; 3 | import { mapMemberListFromApiToVm } from './mapper'; 4 | 5 | export const App: React.FunctionComponent = () => { 6 | React.useEffect(() => { 7 | getMembers().then((members) => { 8 | console.log(mapMemberListFromApiToVm(members)); 9 | }); 10 | }, []); 11 | 12 | return

Look down the dev console 👇

; 13 | }; 14 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/src/name-edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Display } from './display'; 3 | import { Edit } from './edit'; 4 | 5 | export const NameEdit: React.FunctionComponent = () => { 6 | const [userName, setUserName] = React.useState(''); 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/src/name-edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Display } from './display'; 3 | import { Edit } from './edit'; 4 | 5 | export const NameEdit: React.FunctionComponent = () => { 6 | const [userName, setUserName] = React.useState(''); 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/03-react-hooks/12-set-state-func/src/demo.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const MyComponent: React.FC = () => { 4 | const [numero, setNumero] = React.useState(0); 5 | 6 | React.useEffect(() => { 7 | setTimeout(() => { 8 | setNumero((numero) => numero + 1); 9 | }, 1500); 10 | setNumero(1); 11 | }, []); 12 | 13 | return ( 14 | <> 15 |

El numero: {numero}

16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /00-react/05-architecture/07-css-handling/src/pods/login/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | username: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const formValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /01-testing/02-components/03-integration/src/name-edit.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Display } from './display'; 3 | import { Edit } from './edit'; 4 | 5 | export const NameEdit: React.FunctionComponent = () => { 6 | const [userName, setUserName] = React.useState(''); 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /00-react/05-architecture/06-form-validation/src/pods/login/login.validation.ts: -------------------------------------------------------------------------------- 1 | import { ValidationSchema, Validators } from "@lemoncode/fonk"; 2 | import { createFormikValidation } from "@lemoncode/fonk-formik"; 3 | 4 | const validationSchema: ValidationSchema = { 5 | field: { 6 | username: [Validators.required], 7 | password: [Validators.required], 8 | }, 9 | }; 10 | 11 | export const formValidation = createFormikValidation(validationSchema); 12 | -------------------------------------------------------------------------------- /01-testing/04-ci/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /00-react/04-basic-app/01-routing/src/login.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Link, useNavigate } from "react-router-dom"; 3 | 4 | export const LoginPage: React.FC = () => { 5 | const navigate = useNavigate(); 6 | 7 | const handleNavigation = () => { 8 | navigate("/list"); 9 | }; 10 | 11 | return ( 12 | <> 13 |

Hello from login page

14 | 15 | 16 | ); 17 | }; 18 | -------------------------------------------------------------------------------- /01-testing/01-base/04-tdd/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/01-base/01-config/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/01-base/03-debug/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/01-base/05-async/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/03-hooks/02-fetch/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /00-react/02-base/04-list-users/src/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Sans-Serif; 3 | } 4 | 5 | .user-list-container { 6 | display: grid; 7 | grid-template-columns: 80px 1fr 3fr; 8 | grid-template-rows: 20px; 9 | grid-auto-rows: 80px; 10 | grid-gap: 10px 5px; 11 | max-width: 40vw; 12 | } 13 | 14 | .header { 15 | background-color: #2f4858; 16 | color: white; 17 | font-weight: bold; 18 | } 19 | 20 | .user-list-container > img { 21 | width: 80px; 22 | } 23 | -------------------------------------------------------------------------------- /01-testing/01-base/00-boilerplate/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/01-base/02-calculator/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/02-components/01-hello/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/02-components/04-fetch/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/02-components/05-router/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | -------------------------------------------------------------------------------- /01-testing/03-hooks/00-boilerplate/config/webpack/dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const base = require('./base'); 3 | const helpers = require('./helpers'); 4 | 5 | module.exports = merge(base, { 6 | mode: 'development', 7 | devtool: 'inline-source-map', 8 | output: { 9 | path: helpers.resolveFromRootPath('dist'), 10 | filename: '[name].js', 11 | }, 12 | devServer: { 13 | host: 'localhost', 14 | port: 8080, 15 | }, 16 | }); 17 | --------------------------------------------------------------------------------