https://github.com/lemoncode/dev-workflow-demos
https://github.com/lemoncode/dev-workflow-demos
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lemoncode/dev-workflow-demos
- Owner: Lemoncode
- License: mit
- Created: 2017-07-30T18:30:53.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-10-01T22:11:04.000Z (over 8 years ago)
- Last Synced: 2025-06-17T22:11:30.223Z (about 1 year ago)
- Language: JavaScript
- Size: 155 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 02 React App
In this sample we are going to setup a basic React application, it will:
- Load a list of members belongign a team from Github.
- Display it in table like format.
We will take as starting point sample _01 Services_.
Summary steps:
- Create a _./src/pods/Organization/container_ component,
.
- Create a _./src/pods/Organization/OrganizationComponent_.
- Instantiate this component on the _app.js_
- In componentWillMount load the data from fetch members.
- Create a _membersrow_ component.
- Create a _members_ component.
- use in in our _./src/pods/Organization/OrganizationComponent_
# Prerequisites
Ensure all the packages has been installed:
```
yarn install
```
## Steps to build it
- Create a container component
_./src/pods/Organization/container.jsx_
```javascript
import React, { Component } from 'react';
export class OrganizationContainer extends Component {
render() {
return (
Hello from container
);
}
}
export default OrganizationContainer;
```
- We will expose it to the app via an index file
_./src/pods/organization/index.js_
```javascript
export * from './container';
```
- Let's instantiate this container in the app.js file:
_./src/App.js_
```diff
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
-
- 
- Welcome to React
-
-
- To get started, edit src/App.js and save to reload.
-
);
}
}
export default App;
```
- 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
build & test the child components)
_./src/pods/Organization/container.jsx_
```diff
import React, { Component } from 'react';
export class OrganizationContainer extends Component {
+constructor(props) {
+ super(props);
+
+ this.state = {
+ members : [],
+ }
+}
+ fetchTeamMembers() {
+ this.setState({
+ members : [
+ {
+ id: 1457223,
+ login: 'testuser1'
+ },
+ {
+ id: 1852223,
+ login: 'testuser2'
+ },
+ ],
+ })
+ }
render() {
return (
Hello from container
);
}
}
export default OrganizationContainer;
```
- In the child component let's consume this method and a property to hold the
members array.
```javascript
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class OrganizationComponent extends Component {
render() {
return (
Hello from component
);
}
}
OrganizationComponent.propTypes = {
members : PropTypes.array.isRequired,
fetchMembers : PropTypes.func.isRequired,
}
```
- Let's tie them together.
```javascript
import React, { Component } from 'react';
+import { OrganizationComponent } from './component'
export class OrganizationContainer extends Component {
//...
render() {
return (
+
);
}
}
export default OrganizationContainer;
```
- Now our child component will hook to componenDidMount and make the call
to load the members list, then render it (simple ul/li).
```diff
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export class OrganizationComponent extends Component {
+ componentDidMount() {
+ this.props.fetchMembers();
+ }
render() {
return (
-
Hello from component
+ -
+ {member.login}
+
+ {
+ this.props.members.map((member) =>
+
+ )
+ }
+
);
}
}
OrganizationComponent.propTypes = {
members : PropTypes.array.isRequired,
fetchMembers : PropTypes.func.isRequired,
}
```
- Cool, we can just see how the component behave using mock data, why not using real data? We only
need to update the container, children components won't need any change.
```diff
import React, { Component } from 'react';
import { OrganizationComponent } from './component'
+ import { fetchMembers } from '../../rest-api'
export class OrganizationContainer extends Component {
constructor(props) {
super(props);
this.state = {
members : [],
}
}
fetchTeamMembers = () => {
- this.setState({
- members : [
- {
- id: 1457223,
- login: 'testuser1'
- },
- {
- id: 1852223,
- login: 'testuser2'
- },
- ],
- })
+ fetchTeamMembers = () => {
+ fetchMembers().then((members) =>
+ this.setState({
+ members: members,
+ })
+ );
}
}
render() {
return (
);
}
}
export default OrganizationContainer;
```
## Next step
Now that we have our simple react build, let's see how easy is to integrate it
with redux.