{"id":28789551,"url":"https://github.com/lemoncode/dev-workflow-demos","last_synced_at":"2025-07-21T04:32:31.721Z","repository":{"id":81411286,"uuid":"98817166","full_name":"Lemoncode/dev-workflow-demos","owner":"Lemoncode","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-01T22:11:04.000Z","size":159,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-17T22:11:30.223Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lemoncode.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2017-07-30T18:30:53.000Z","updated_at":"2017-10-02T13:22:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"59b1c12b-589e-4725-8482-13642f952d3e","html_url":"https://github.com/Lemoncode/dev-workflow-demos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lemoncode/dev-workflow-demos","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fdev-workflow-demos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fdev-workflow-demos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fdev-workflow-demos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fdev-workflow-demos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/dev-workflow-demos/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Fdev-workflow-demos/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266240854,"owners_count":23898062,"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":"2025-06-17T22:11:00.353Z","updated_at":"2025-07-21T04:32:31.716Z","avatar_url":"https://github.com/Lemoncode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 02 React App\n\nIn this sample we are going to setup a basic React application, it will:\n\n  - Load a list of members belongign a team from Github.\n  - Display it in table like format.\n\nWe will take as starting point sample _01 Services_.\n\nSummary steps:\n\n- Create a _./src/pods/Organization/container_ component, \n. \n- Create a _./src/pods/Organization/OrganizationComponent_.\n- Instantiate this component on the _app.js_\n- In componentWillMount load the data from fetch members.\n- Create a _membersrow_ component.\n- Create a _members_ component.\n- use in in our  _./src/pods/Organization/OrganizationComponent_\n\n# Prerequisites\n\nEnsure all the packages has been installed:\n\n```\nyarn install\n```\n\n## Steps to build it\n\n\n- Create a container component \n\n_./src/pods/Organization/container.jsx_\n\n```javascript\nimport React, { Component } from 'react';\n\nexport class OrganizationContainer extends Component {\n  render() {\n    return (\n      \u003ch1\u003eHello from container\u003c/h1\u003e\n    );\n  }\n}\n\nexport default OrganizationContainer;\n```\n\n- We will expose it to the app via an index file\n\n_./src/pods/organization/index.js_\n```javascript\nexport * from './container';\n```\n\n- Let's instantiate this container in the app.js file:\n\n_./src/App.js_\n\n```diff\nimport React, { Component } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nclass App extends Component {\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n-        \u003cdiv className=\"App-header\"\u003e\n-          \u003cimg src={logo} className=\"App-logo\" alt=\"logo\" /\u003e\n-          \u003ch2\u003eWelcome to React\u003c/h2\u003e\n-        \u003c/div\u003e\n-        \u003cp className=\"App-intro\"\u003e\n-          To get started, edit \u003ccode\u003esrc/App.js\u003c/code\u003e and save to reload.\n-        \u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n- Let's add state to this component and add the list of members, and Create a method that will return just mock data (we  will have data to \nbuild \u0026 test the child components)\n\n\n_./src/pods/Organization/container.jsx_\n\n```diff\nimport React, { Component } from 'react';\n\nexport class OrganizationContainer extends Component {\n\n+constructor(props) {\n+  super(props);\n+  \n+  this.state = {\n+    members : [],\n+  }\n+}\n\n+ fetchTeamMembers() {\n+    this.setState({\n+     members : [\n+       {\n+         id: 1457223,\n+         login: 'testuser1'\n+       },\n+       {\n+         id: 1852223,\n+         login: 'testuser2'\n+       },\n+     ],\n+   })\n+ }\n\n  render() {\n    return (\n      \u003ch1\u003eHello from container\u003c/h1\u003e\n    );\n  }\n}\n\nexport default OrganizationContainer;\n```\n\n- In the child component let's consume this method and a property to hold the\nmembers array.\n\n```javascript\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nexport class OrganizationComponent extends Component {\n\n  render() {\n    return (\n      \u003ch3\u003eHello from component\u003c/h3\u003e        \n    );\n  }\n}\n\nOrganizationComponent.propTypes = {\n  members : PropTypes.array.isRequired,\n  fetchMembers : PropTypes.func.isRequired,\n}\n```\n\n\n- Let's tie them together.\n\n```javascript\nimport React, { Component } from 'react';\n+import { OrganizationComponent } from './component'\n\nexport class OrganizationContainer extends Component {\n\n//...\n\n  render() {\n    return (\n+      \u003cOrganizationComponent\n+        members={this.state.members}\n+        fetchMembers={this.fetchTeamMembers}\n+      /\u003e\n    );\n  }\n}\n\nexport default OrganizationContainer;\n```\n\n- Now our child component will hook to componenDidMount and make the call\nto load the members list, then render it (simple ul/li).\n\n```diff\nimport React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nexport class OrganizationComponent extends Component {\n\n+  componentDidMount() {\n+    this.props.fetchMembers();\n+  }\n\n  render() {\n    return (\n-      \u003ch3\u003eHello from component\u003c/h3\u003e  \n+      \u003cul\u003e\n+      {\n+        this.props.members.map((member) =\u003e \n+         \u003cli key={member.id}\u003e\n+           \u003cspan\u003e{member.login}\u003c/span\u003e\n+         \u003c/li\u003e                  \n+        )\n+      }\n+      \u003c/ul\u003e     \n    );\n  }\n}\n\nOrganizationComponent.propTypes = {\n  members : PropTypes.array.isRequired,\n  fetchMembers : PropTypes.func.isRequired,\n}\n```\n- Cool, we can just see how the component behave using mock data, why not using real data? We only\nneed to update the container, children components won't need any change.\n\n```diff\nimport React, { Component } from 'react';\nimport { OrganizationComponent } from './component'\n+ import { fetchMembers } from '../../rest-api'\n\nexport class OrganizationContainer extends Component {\n\n  constructor(props) {\n    super(props);  \n\n    this.state = {\n      members : [],\n    }    \n  }\n\n  fetchTeamMembers = () =\u003e {    \n-    this.setState({\n-      members : [\n-        {\n-          id: 1457223,\n-          login: 'testuser1'\n-        },\n-        {\n-          id: 1852223,\n-          login: 'testuser2'\n-        },\n-      ],\n-    })\n\n+  fetchTeamMembers = () =\u003e {\n+    fetchMembers().then((members) =\u003e\n+      this.setState({\n+        members: members,\n+      })\n+    );\n  }  \n     \n\n  }  \n\n  render() {\n    return (\n      \u003cOrganizationComponent\n        members={this.state.members}\n        fetchMembers={this.fetchTeamMembers}\n      /\u003e\n    );\n  }\n}\n\nexport default OrganizationContainer;\n```\n\n## Next step\n\nNow that we have our simple react build, let's see how easy is to integrate it\nwith redux.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Fdev-workflow-demos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flemoncode%2Fdev-workflow-demos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flemoncode%2Fdev-workflow-demos/lists"}