React for python developers

#!/bin/sh -e
type -p yarn || {
  echo "Install yarn: https://yarnpkg.com/en/docs/install#centos-stable"
}
yarn create react-app my-app
cd my-app
# Check README.md for project structure details

# Start a hot-reload development server
yarn start
# Run test
yarn test
# Build production files
yarn build

# Add dependencies
yarn add patternfly-react react-router react-router-dom

# .eslintrc
---
parser: babel-eslint
plugins:
  - standard
  - jest
rules:
  no-console: off
  semi: [error, never]
  quotes: [error, single]
  lines-between-class-members: error
  space-before-function-paren: error
  react/prop-types: error
  react/jsx-key: error
  react/no-did-mount-set-state: error
  react/no-did-update-set-state: error
  react/no-deprecated: error
extends:
  # Replace recommened by all or strict for pedantic code style.
  - eslint:recommended
  - plugin:react/recommended
settings:
  react:
    version: 16.4
env:
  jest/globals: true
  browser: true

yarn add --dev eslint-plugin-react eslint-plugin-standard eslint-plugin-jest

// Add a new script in the package.json file:
//   "lint": "eslint --ext .js --ext .jsx src"

// Run lint
yarn lint

class Title:
  def __init__(self, title):
    self.title = title

  def render(self):
    return '<h1>%s</h1>' % self.title

print(Title('Hello Python').render())

class Title extends React.Component {
  render () {
    const { name } = this.props
    return (<h1>{name}</h1>)
  }
}
const title = <Title name='Hello React' />

class Counter extends React.Component {
  constructor () {
    super()
    this.state = {value: 0}
  }
  // This clicked method doesn't work, it is not binded
  clicked () {
    this.setState({value: this.state.value + 1})
  }
  // This clicked method works
  clicked = () => {
    this.setState({value: this.state.value + 1})
  }
  render () {
    return (
      <Button onClick={this.clicked}>
        {this.state.value}
      </Button>
    )
  }
}

state = {
  items: []
  object: {}
}
// This doesn't work. This will not re-render a component:
this.state.items.push('New item')
this.state.object.name = 'New name'

// This works but it's not recommended. use setState() method
const { items, object } = this.state;
items.push('New item');
object.name =  'New name';
this.setState({
  items: items,
  object: object
});

// Better is to treat this.state as if it were immutable and use setState callback
// ... operator is the javascript spread syntax
this.setState(prevState => ({
  items: [...prevState.items, 'New item'],
  object: {
    ...prevState.object,
    name: 'New name'
  }
}))

import update from 'react-addons-update'

newItems = update(items, {$push: ['New item']});
newObject = update(object, {$merge: {name: 'New name'}})

// To remove item, splice can be used:
const items = [1, 2, 3, 4, 5]
update(items, {$splice: [[1, 1]]})         // Removes 2
update(items, {$splice: [[1, 1, 0]]})      // Replaces 2 by 0
update(items, {$splice: [[4, 1], [0, 1]]}) // Removes 5 and 1
// NOTE: $splice parameter order matter, always go from highest index to lowest

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { withRouter, Link, Redirect, Route, Switch } from 'react-router-dom'

class PageWelcome extends React.Component {
  render () { return (<h1>Page Welcome</h1>) }
}
class PageAbout extends React.Component {
  render () { return (<h1>Page About</h1>) }
}
class PageView extends React.Component {
  render () { return (<h1>Show {this.props.match.params.itemName}</h1>) }
}

class App extends React.Component {
  render () {
    return (
      <div>
        <ul>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/view/item1'>Show item 1</Link></li>
          <li><Link to='/view/item42'>Show item 42</Link></li>
        </ul>
        // React router will render the route component based on url
        <Switch>
          <Route path='/welcome' component={PageWelcome} />
          <Route path='/about' component={PageAbout} />
          <Route path='/view/:itemName' component={PageView} />
          <Redirect from='*' to='/welcome' key='default-route' />
        </Switch>
      </div>
    )
  }
}
// withRouter enables react router and adds location and history props
export default withRouter(App)

// Router top-level component needs to be used
ReactDOM.render(<Router><App /></Router>,
                document.getElementById('root'))

<Directory /usr/share/app>
  Require all granted
</Directory>
Alias / /usr/share/app/
<Location />
  RewriteEngine on
  RewriteBase /
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  # Any request that isn't a local file is served with index.html
  RewriteRule . /index.html [L]
</Location>

import React from 'react'
import Axios from 'axios'

const url = 'https://softwarefactory-project.io/zuul/api/tenant/local/status'

class StatusPage extends React.Component {
  state = {
    status: null
  }

  componentDidMount () {
    Axios.get(url)
      .then(response => {
        this.setState({status: response.data})
      })
      .catch(error => {
        console.log('Oops...')
      })
  }

  render () {
    const { status } = this.state
    if (!status) {
      return <p>Loading...</p>
    }
    return <p>Zuul version: {status.zuul_version}</p>
  }
}

import { ListView } from 'patternfly-react'
import 'patternfly/dist/css/patternfly.min.css'
import 'patternfly/dist/css/patternfly-additions.min.css'

const itemList = [{'title': 'An item', 'content': 'Item content'}]
const listView = (
  <ListView>
    {itemList.map((item, idx) => (
      <ListView.Item
        heading={item.title}
        hideCloseIcon={true}
        key={idx}
        expanded
        >
        {item.content}
      </ListView.Item>
   ))}
  </ListView>
)

import { Table } from 'patternfly-react'

const headFormat = value => <Table.Heading>{value}</Table.Heading>
const cellFormat = (value) => <Table.Cell>{value}</Table.Cell>
const columns = [{
  header: {label: 'Title', formatters: [headFormat]},
  property: 'title',
  cell: {formatters: [cellFormat]}
}, {
  header: {label: 'Content', formatters: [headFormat]},
  property: 'content',
  cell: {formatters: [cellFormat]}
}]
const table = (
  <Table.PfProvider
     striped
     bordered
     hover
     columns={columns}
     >
     <Table.Header/>
     <Table.Body
        rows={itemList}
        rowKey="title"
        />
  </Table.PfProvider>
)

import React from 'react'
import { withRouter } from 'react-router'
import { Link, Redirect, Route, Switch } from 'react-router-dom'
import { Masthead } from 'patternfly-react'
import 'patternfly/dist/css/patternfly.min.css'
import 'patternfly/dist/css/patternfly-additions.min.css'

import logo from './images/logo.png'
// Routes can be defined using custom array, store it in a dedicated module.
import { routes } from './routes'

class App extends React.Component {
  constructor () {
    super()
    this.menu = routes()
  }

  // Automatically render a menu with buttons for route with a title.
  renderMenu = () => {
    const { location } = this.props
    const activeItem = this.menu.find(
      item => location.pathname === item.to
    )
    return (
      <ul className="nav navbar-nav navbar-primary">
        {this.menu.filter(item => item.title).map(item => (
          <li key={item.to} className={item === activeItem ? 'active' : ''}>
            <Link to={item.to}>{item.title}</Link>
          </li>
        ))}
      </ul>
    )
  }

  // Automatically render the Switch and Route from the routes custom array.
  renderContent = () => {
    const allRoutes = []
    this.menu.map((item, index) => {
      allRoutes.push(
        <Route key={index} exact
               path={item.to}
               component={item.component} />
      )
      return allRoutes
    })
    return (
      <Switch>
        {allRoutes}
        <Redirect from="*" to="/" key="default-route" />
      </Switch>
    )
  }

  // Render the body of the application.
  render () {
    return (
      <React.Fragment>
        <Masthead
          iconImg={logo}
          navToggle
          thin
          >
          <div className="collapse navbar-collapse">
            {this.renderMenu()}
            <ul className="nav navbar-nav navbar-utility">
              <li>
                <a href="https://docs.example.com/"
                   rel="noopener noreferrer" target="_blank">
                  Documentation
                </a>
              </li>
            </ul>
          </div>
        </Masthead>
        <div className="container-fluid container-cards-pf">
          {this.renderContent()}
        </div>
      </React.Fragment>
    )
  }
}
export default withRouter(App)

// routes.js
// A custom routing structure that is easy to maintain.
import Welcome from './pages/Welcome'
const routes = () => [
  {
    title: 'Welcome',
    to: '/',
    component: Welcome
  },
]
export { routes }

// index.js | the main entry point
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import { Provider } from 'react-redux'

import { createMyStore } from './reducers'
import App from './App'

const store = createMyStore()
ReactDOM.render(
  <Provider store={store}>
    <Router><App /></Router>
  </Provider>,
  document.getElementById('root'))

// api.js | keep the network code in a dedicated module
import Axios from 'axios'
const api = 'https://softwarefactory-project.io/zuul/api/tenant/local/'
function fetchStatus () {
   return Axios.get(api + 'status')
}
export { fetchStatus }

// reducers.js | store management
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { fetchStatus } from './api'

// Reducers process action and update state accordingly.
const statusReducer = (state = null, action) => {
  // state = null is the default state
  switch (action.type) {
    case 'FETCH_STATUS_SUCCESS':
      // when success action is dispatched, state becomes status
      return action.status
    default:
      return state
  }
}
function createMyStore () {
  // We can have multiple reducers for each context variable.
  return createStore(combineReducers({
    status: statusReducer,
  }), applyMiddleware(thunk))
}

// Actions to be dispatched.
function fetchStatusAction () {
  return (dispatch) => {
    return fetchStatus ()
      .then(response => {
        dispatch({type: 'FETCH_STATUS_SUCCESS', status: response.data})
      })
      .catch(error => {
        throw (error)
      })
  }
}
export {
  createMyStore,
  fetchStatusAction,
}

// Status.jsx
import React from 'react'
import { connect } from 'react-redux'

class Status extends React.Component {
  render () {
    // This property is automatically set by redux
    const { status } = this.props
    if (!status) {
      return <p>Loading...</p>
    }
    return (
      <p>Zuul version: {status.zuul_version}</p>
    )
  }
}

// The connect method binds the store status state to
// the component status property.
// When the status changes, the component is automatically updated.
export default connect(
  state => ({
    status: state.status
  })
)(Status)

// App.jsx
import React from 'react'
import { withRouter } from 'react-router'
import { connect } from 'react-redux'

import Status from './Status'
import { fetchStatusAction } from './reducers'

class App extends React.Component {
  render () {
    return (
      <div>
        {/* Clicking the button dispatch the fetchStatusAction and redux
            will update the Status component. */}
        <button onClick={() => {this.props.dispatch(fetchStatusAction())}}>
          Fetch status
        </button>
        <Status />
      </div>
    )
  }
}
// Connect also adds a dispatch function property to dispatch action.
export default withRouter(connect()(App))