hadrien-delaitre / react-nexus

Real world apps with React.

React Nexus 4

Page still in development.

Minimal React Nexus boilerplate

const flux = createFlux();
const app = <App flux={flux} />;
await Nexus.prepare(app);
ReactDOMServer.renderToStaticMarkup(app);

1. Flux creation

• A flux contains stores and actions.
• There are two implementations for stores and actions: HTTP and Memory.

Create your Memory Flux

Flux.create({
  actions: [
    action('changeStatus'), async function changeStatus(status) {
      // change user status
    },
    action('setAge'), async function setAge(age) {
      // set user age
    },
  ]
  stores: [
    store('channels').set({}, {
      'public': 'channels/public',
    })
  ]
});

Create your HTTP Flux

Flux.create({
  actions: [
    action('/user/create'),
    action('/user/:id/delete'),
  ]
  stores: [
    store('/users'),
  ]
});

2. Create Root Component

This component will receive the builded Flux. This should be done by decorating the component with root() method:

root()(class App extends React.Component {
  render() {
    return <div></div>;
  }
});

3. Add Flux' dependencies on components

By decorating each component with deps() method:​

export default deps(({ userId }) => ({
  actions: {
    deleteUser: '/delete/${userId}/delete', // HTTP action
    changeStatus: 'changeStatus', // memory action
  },
  stores: {
    users: '/users', // HTTP store
    channels: 'channels', // memory store
  },
}))
(class Users extends React.Component {
  render() {
    if(users.isPending()) {
      return <div className='User pending'>
        {'Loading...'}
      </div>;
    }
    if(users.isRejected()) {
      return <div className='User rejected'>
        {'Error: '}{users.reason}
      </div>;
    }
    return <ul>
      users.value.map((user) => <li>user</li>);
    </ul>;
  }
});

Or by decorating directly with stores (or actions):

export default stores(({ userId }) => ({
  users: '/users',
}))
(class Users extends React.Component {
  render() {
    if(users.isPending()) {
      return <div className='User pending'>
        {'Loading...'}
      </div>;
    }
    if(users.isRejected()) {
      return <div className='User rejected'>
        {'Error: '}{users.reason}
      </div>;
    }
    return <ul>
      users.value.map((user) => <li>user</li>);
    </ul>;
  }
});

4. Prepare Root Component

prepare method recursively browses the root component, looking for child components wrapped by deps() method. This method may contains actions and stores references. These stores and actions are injected as component props. Stores are beforehand fetched by React Nexus.

5. Constructs HTML component

By applicating React.renderToString on root component.

Selenium's Tests

Pre-requisites:

Selenium's config will run tests with 2 default browsers:

• Chrome
• Firefox

So you have to install both browser or change the following configuration:

• /config/wdio/${env}/wdio.config.js

capabilities: [{
  browserName: '${browser1}',
}, {
  browserName: '${browser2}',
}],

You can check platform-configurator to configure your own platform.

In order to perform tests with Selenium, just run the automated test :

gulp test-selenium

Tips

If you want run selenium headlessly, on linux you can use xvfb as:

xvfb-run --server-args="-screen ${screenNumber}, ${pixels}" gulp test-selenium
# xvfb-run --server-args="-screen 0, 1366x768x24" gulp test-selenium