{"id":16181748,"url":"https://github.com/ericclemmons/tech-2016-lightning-talks","last_synced_at":"2025-03-19T01:31:16.116Z","repository":{"id":66108077,"uuid":"75959919","full_name":"ericclemmons/tech-2016-lightning-talks","owner":"ericclemmons","description":"10-minute lightning talks about Storybook, Styled Components, MobX, \u0026 Jest.","archived":false,"fork":false,"pushed_at":"2016-12-08T17:34:06.000Z","size":54,"stargazers_count":26,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-10T19:03:22.626Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ericclemmons.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":"2016-12-08T17:28:37.000Z","updated_at":"2019-04-01T05:16:03.000Z","dependencies_parsed_at":"2023-07-08T07:30:36.077Z","dependency_job_id":null,"html_url":"https://github.com/ericclemmons/tech-2016-lightning-talks","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/ericclemmons%2Ftech-2016-lightning-talks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Ftech-2016-lightning-talks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Ftech-2016-lightning-talks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ericclemmons%2Ftech-2016-lightning-talks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ericclemmons","download_url":"https://codeload.github.com/ericclemmons/tech-2016-lightning-talks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243960361,"owners_count":20375102,"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":[],"created_at":"2024-10-10T06:27:13.695Z","updated_at":"2025-03-19T01:31:16.106Z","avatar_url":"https://github.com/ericclemmons.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eric's Lightning Talks\n\n- [Storybook in 10 minutes](#storybook)\n- [Styled Components in 10 minutes](#styled-components)\n- [MobX in 10 minutes](#mobx)\n- [Jest in 10 minutes](#jest)\n\nCheck out the `example` branch for all of this working in action.\n\n### Setup\n\nBefore getting started, let's make sure this is a workable project:\n\n1. `git init .`\n2. `npm init -y`\n3. `nvm use 7.2.0`\n4. `yarn add react react-dom`\n\n---\n\n### Storybook\n\n![Storybook](https://getstorybook.io/static/media/demo.f13d28a7.gif)\n\u003e https://getstorybook.io/\n\n- Playground for predictable, isolated development of React Components.\n- \"Stories\" to describe different use-cases.\n- Live-reloading.\n- \"Addons\" (e.g. knobs, documentation, specs, backgrounds, etc.)\n\n#### Getting Started\n\n2. `yarn add --dev @kadira/storybook`\n3. `.stories/config.js`\n\n  ```js\n  import { configure } from \"@kadira/storybook\";\n\n  const stories = require.context(\"..\", true, /\\.stories\\.js$/);\n\n  configure(() =\u003e (\n    stories.keys().forEach((file) =\u003e stories(file))\n  ), module);\n  ```\n\n4. `$(yarn bin)/start-storybook -p 3000`\n5. Create something in `src/components/MyForm/MyForm.stories.js`\n\n  ```js\n  import React from \"react\";\n  import { storiesOf, action } from \"@kadira/storybook\";\n\n  storiesOf(\"MyForm\", module)\n    .add(\"default\", () =\u003e (\n      \u003cp\u003eTest!\u003c/p\u003e\n    ))\n  ;\n  ```\n6. Add `onChange`, `onSubmit` events via the `action` helper.\n\n--\n\n### Styled Components\n\n![Styled Components](https://github.com/styled-components/styled-components/raw/master/docs/assets/logo.png)\n\u003e https://github.com/styled-components/styled-components\n\n- Co-locate styles alongside components.\n- Abstract styles into a components for cleaner abstractions in the consumer.\n- Auto-prefixing.\n- Supports what CSS supports.\n- DRYs up common styles.\n\n#### Related Projects\n\n- [glamor](https://github.com/threepointone/glamor)\n- [styled-jsx](https://github.com/zeit/styled-jsx)\n- [styletron](https://github.com/rtsao/styletron)\n\n\n#### Getting Started\n\n1. `yarn add styled-components`\n2. Style a regular HTML element (e.g. `label`) in your component:\n\n  ```js\n  import styled from \"styled-components\";\n\n  const Label = styled.label`\n    background: #369;\n    border: none;\n    color: #fff;\n\n    \u0026:hover {\n      cursor: pointer;\n    }\n  `;\n  ```\n\n3. You can even wrap existing components via `styled(Component)`,\n   **as long as they accept the `className` prop**.\n\n---\n\n### MobX\n\n![MobX](https://github.com/mobxjs/mobx/raw/master/docs/mobx.png)\n\n\u003e https://mobxjs.github.io/mobx/\n\n- State management using observables \u0026 mutable structures.\n- Performant rendering of only affected components.\n- Less \"ceremony\" than Redux.\n\n#### Getting Started\n\n1. `yarn add mobx mobx-react`\n2. `yarn add babel-preset-{latest,react,stage-2}`\n3. `yarn add babel-plugin-transform-decorators-legacy`\n4. Create `.babelrc`:\n\n  ```json\n  {\n    \"plugins\": [\"transform-decorators-legacy\"],\n    \"presets\": [\"latest\", \"react\", \"stage-2\"]\n  }\n  ```\n\n5. Wrap your component with `@observer`:\n\n  ```js\n  import { observer } from \"mobx-react\";\n\n  @observer\n  export default class ...\n  ```\n\n6. Add `@computed` \u0026 `@observable` class properties to your component for\n   internal state.\n\n  ```js\n  import { computed, intercept, observe, observable } from \"mobx\";\n\n  ...\n  @observable email = \"\"\n\n  @computed get valid() {\n    return this.email.includes(\"@highereducation.com\");\n  }\n  ```\n\n7. Add `intercept` \u0026 `observe` methods to sanitize input \u0026 fire events:\n\n  ```js\n  componentDidMount() {\n    intercept(this, \"email\", (change) =\u003e {\n      change.newValue = change.newValue.trimLeft().trimRight();\n\n      return change;\n    });\n\n    observe(this, \"email\", (value) =\u003e this.props.onChange({ email: value }));\n  }\n  ```\n\n---\n\n### Jest\n\n![Jest](https://github.com/ericclemmons/jest-storybook/raw/master/jest.png)\n\u003e https://facebook.github.io/jest/\n\n- Built-in support for Babel.\n- Snapshots.\n- _Fast_ with caching.\n- Easy to adopt in existing projects.\n\n1. `yarn add --dev jest`\n2. `$(yarn bin)/jest`\n3. Add tests to `__tests__` in any folder in the usual `describe` / `it` structure.\n4. Convert a `.toBe(...)` assertion to `.toMatchSnapshot();`.\n\nSnapshotting existing Storybook stories:\n\u003e https://github.com/ericclemmons/jest-storybook\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Ftech-2016-lightning-talks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fericclemmons%2Ftech-2016-lightning-talks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fericclemmons%2Ftech-2016-lightning-talks/lists"}