React.js Quick Start

React Project Setup

In this tutorial, we use a template react project built using yarn and create-react-app. Click Here for step-by-step instructions on how to get a basic react project setup and deployed.

We're going to use the create-react-app cli. Then add react-toolbox with a themeroller to have a good looking material ui to show patients.

$ create-react-app newhealthco
$ cd newhealthco
$ yarn add react-toolbox react-toolbox-themr

Open package.json and add the following to the top level

"reactToolbox": {
  "include": [
    "BUTTON",
    "INPUT",
    "NAVIGATION",
    "LINK",
    "APP_BAR"
  ],
  "customProperties": {
    "animation-duration": "0.3s",
    "color-accent": "var(--palette-pink-a200)",
    "color-accent-dark": "var(--palette-pink-700)",
    "color-primary-contrast": "var(--color-dark-contrast)",
    "color-accent-contrast": "var(--color-dark-contrast)"
  },
  "output": "src/react-toolbox"
}

Then add this to the scripts section:

"scripts": {
  "toolbox": "react-toolbox-themr"
}

Now you can run

$ yarn run toolbox

We need to include this themeroller in our index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import theme from './react-toolbox/theme';
import './react-toolbox/theme.css';


ReactDOM.render(
	<ThemeProvider theme={theme}>
		<App />
	</ThemeProvider>
	, document.getElementById('root'));
registerServiceWorker();

Then we can use these components in our App.js file

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import Button from 'react-toolbox/lib/button/Button';
import AppBar from 'react-toolbox/lib/app_bar/AppBar.js';


class App extends Component {
  render() {
    return (
      <div className="App">
        <AppBar title="Sample App" flat="false">

        </AppBar>
        <p className="App-intro">
          <Button label="Hello World!" raised primary/>
        </p>
      </div>
    );
  }
}

export default App;

React Toolbox Theme Roller Reference

We need to add the google material icon set to index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

$ yarn start

Smashing! We have our project setup, ready to go.