viniciusdacal

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ScreensRoot from './screens/Root';

ReactDOM.render(<ScreensRoot />, document.getElementById('root'));

viniciusdacal

import React, { Component } from 'react';
import { Router } from 'react-router';
import { Redirect, Route, Switch } from 'react-router-dom';

import ScreensUserForm from './User/Form';
import ScreensUserList from './User/List';

const ScreensRoot = () => (
  <Router>
    <Switch>

viniciusdacal

<ShowIf
  value={this.state.hello == 'hello'}
  render={() => (
    <input type="text" value="Hello World"/>
  )}
/>

viniciusdacal

{this.state.user && <span>{this.state.name}</span>}

// vs

<ShowIf value={this.state.user && this.state.name}>
  <span>{this.state.user && this.state.name}</span>
</ShowIf>

viniciusdacal

root-app-folder
  config
    webpack, build, jestconfig, etc...

  src
    components
      User // Split by features/modules
        Form
 Form.jsx // presentation const UsersForm

viniciusdacal

const handlers = {
  number: value => <NumberDisplay>{value}</NumberDisplay>
  currency: value => <CurrencyDisplay customProps value={value} />
  time: value => <TimeDisplay time={value} customProps />
  date: value => <DateDisplay date={value}  showTime={false} />
  default: value => value,
};

const displayData = (type, value) => {
  const handler = handlers[type] || handlers.default;

viniciusdacal

const UserForm = ({ onChange, values }) => (
  <div>
    <h1>User</h1>
    <div>
      <div className="row">
        <div className="form-group">
          <label>Name</label>
          <input type="text" name="name" value={values.name} onChange={onChange} />
        </div>
        <div className="form-group">

viniciusdacal

const UserListResults = ({ error, results, isLoading }) => {
  if (error) {
    return <span>Something is not right!</span>;
  }

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (!results.length) {

viniciusdacal

const UserList = ({ isLoading, results, error }) => {
  const shouldDisplayLoader = !error && isLoading;
  const shouldDisplayNoResults = !error && !isLoading && !results.length;
  const shouldDisplayList = !error && !isLoading && results.length > 0;

  return (
    <div>
      <div>
        <h1>Users</h1>
        <a href="/users/create">New User</a>

viniciusdacal

const UserList = ({ isLoading, results, error }) => (
  <div>
    <div>
      <h1>Users</h1>
      <a href="/users/create">New User</a>
    </div>
    <div>
      {error && <span>Something is not right!</span>}
      {!error && isLoading && <span>Loading...</span>}