{"id":17345368,"url":"https://github.com/literat/workshop_react-training","last_synced_at":"2025-03-27T10:26:01.666Z","repository":{"id":149681075,"uuid":"121361275","full_name":"literat/workshop_react-training","owner":"literat","description":"React training with Daniel Steigerwald","archived":false,"fork":false,"pushed_at":"2018-02-16T12:40:12.000Z","size":157,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-01T15:14:26.511Z","etag":null,"topics":["flow","graphql","nextjs","nodejs","prettier","prisma","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/literat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-13T09:09:06.000Z","updated_at":"2022-11-25T08:27:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"15d3a05f-4e30-465e-ad7a-eb0761121f03","html_url":"https://github.com/literat/workshop_react-training","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/literat%2Fworkshop_react-training","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/literat%2Fworkshop_react-training/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/literat%2Fworkshop_react-training/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/literat%2Fworkshop_react-training/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/literat","download_url":"https://codeload.github.com/literat/workshop_react-training/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245825156,"owners_count":20678513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flow","graphql","nextjs","nodejs","prettier","prisma","react"],"created_at":"2024-10-15T16:30:40.780Z","updated_at":"2025-03-27T10:26:01.644Z","avatar_url":"https://github.com/literat.png","language":"JavaScript","readme":"# React Training\n\nwith [Daniel Steigerwald](https://medium.com/@steida/)\n\nbase on information and code from [este](https://github.com/este/este)\n\n## Prerequisites\n\n* [node.js](https://nodejs.org/en/) Node 8+\n* [yarn](https://yarnpkg.com/lang/en/)\n\n## Starting\n\n### Starting development\n\n* `git clone git@github.com:literat/react-training.git`\n* `cd react-training`\n* `yarn`\n* `yarn dev`\n* see `http://localhost:3000`\n\n### Starting backend\n\n* `cd server`\n* `yarn`\n* `yarn dev`\n* see `http://localhost:4000` and `http://localhost:5000`\n\n## Sources\n\n### Javascript Development\n\n* https://prettier.io/\n* https://github.com/flowtype/flow-typed\n* https://flow.org/en/docs/install/\n* https://facebook.github.io/immutable-js/\n* https://flow.org/en/\n* https://github.com/zeit/styled-jsx#syntax-highlighting\n* https://github.com/este/este/wiki/Learn-JavaScript-and-stuff\n* http://webassembly.org/\n* https://davidwalsh.name/fetch\n* https://github.com/chriso/validator.js/\n* https://www.saltycrane.com/flow-type-cheat-sheet/latest/\n* https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955\n* https://blog.bloomca.me/2018/02/04/spa-is-not-silver-bullet.html\n* https://medium.com/@steida/why-validation-libraries-suck-b63b5ff70df5\n\n### Functional stuff\n\n* http://ramdajs.com/\n* http://fr.umio.us/why-ramda/\n* http://blog.ploeh.dk/2014/03/10/solid-the-next-step-is-functional/\n* https://stackoverflow.com/questions/871405/why-do-i-need-an-ioc-container-as-opposed-to-straightforward-di-code\n* https://reasonml.github.io/\n* http://www.modularscale.com/\n* http://blog.ploeh.dk/2015/04/13/less-is-more-language-features/\n\n### Reactive Programming\n\n* https://github.com/developit/preact\n* https://github.com/facebook/create-react-app\n* https://redux.js.org/\n* https://zeit.co/blog/next5\n* https://github.com/zeit/next.js/\n* https://github.com/jamiebuilds/create-react-context\n* https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367\n* https://www.learnrxjs.io/\n* https://github.com/reactjs/rfcs/pull/2\n* https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\n* https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html\n* http://blog.ploeh.dk/2011/07/28/CompositionRoot/\n* https://github.com/acdlite/rfcs/blob/new-version-of-context/text/0000-new-version-of-context.md\n* https://medium.com/@steida/the-boring-react-redux-forms-a15ee8a6b52b\n* http://blog.ploeh.dk/2017/01/03/decoupling-application-errors-from-domain-models/\n* http://bradfrost.com/blog/post/atomic-web-design/\n* http://atomicdesign.bradfrost.com/chapter-2/\n* https://redux-form.com/7.2.3/\n* https://medium.com/@steida/react-form-validation-without-abstraction-41264608473c\n* https://github.com/creationix/nvm#installation\n\n### GraphQL\n\n* http://graphql.org/\n* https://www.apollographql.com/\n* https://facebook.github.io/relay/ - implementation of GraphQL for client\n* http://www.graph.cool/\n* https://github.com/graphcool/graphcool-framework\n* https://github.com/graphcool/prisma\n* https://www.prismagraphql.com/\n\n### Testing\n\n* https://facebook.github.io/jest/\n* https://medium.com/@gcanti/type-driven-development-with-flow-e06ee61e1bc9\n\n### Other\n\n* https://hyper.is/\n* https://sentry.io/welcome/\n* https://zeit.co/\n* https://ide.atom.io/\n* https://www.gatsbyjs.org/\n\n## Notes\n\n### Progress bar\n\n* když načítám ajaxem, tak je dobré, aby se stránka prednačetla až když má data,\nale kvůli pomalému připojení je dobré uživateli zobrazit nejaký stav - viz např. github,\n je dobré progress bar zobrazovat až po nějakém krátkém čase (aby tam nebyl pořád),\n kouknout do este na LoadingBar.js\n\n ### Fetch\n\n * fetch - lepší než jquery.ajax() - davidwalsh.name/fetch,\n používá Promise místo callbacku, ale pozor na to, že nejde udělat cancel,\n learn RxJS - dokumentace getInitialProps - pouze v pages,\n spousti Next.js, jako defaultni initial funkci imperativní/deklarativní data - react je deklarativni -\u003e řeším\n pouze data, react automaticky data reprezentuje do UI\n\n ### Miscellaneous\n\n * dynamický klíč: `this.setState({ [e.currentTarget.name]: e.currentTarget.value });`\n * algebraický typ / union type: `type Now = number | \"unknown\";`\n * exact type - nesmí se rozšířit o další property:\n```\ntype ExactProps = {|\n  now: number\n|};\n\ntype IndexProps = {\n  now: number,\n  later: ?number, // null nebo number\n  superlater?: number // nepovinna polozka\n};\n```\n\n* this:\n```\nfoo() {\n  this...\n}\n\n// this ktere ocekavam\nfoo = () =\u003e {\n  this...\n}\n```\n\n* object change -\u003e create new:\n```\nconst Joe = {\n  ...Joe,\n  name: ‘Jine jmeno’\n}\n\nconst products = [...products, 4, 5];\n```\n\n* `\"private\": true`: nedovolí uploadovat balík do NPM repository\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliterat%2Fworkshop_react-training","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliterat%2Fworkshop_react-training","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliterat%2Fworkshop_react-training/lists"}