Getting Started

New apps are set up with create-react-app

Install it globally with NPM

$ npm install -g create-react-app

To create a new app

$ create-react-app my-app
$ cd my-app
$ npm start

Note that create-react-app provides an update path for the build scripts, but as of February 2018 doesn’t allowe access to the underlying webpack configuration, so we need to remove the app from the tool by “ejecting” it. You can read more about this here. You’ll need to have no un-committed changes in the git repository to for this. Once you’re ready, run

$ npm run eject

Configuration

We use react-router for navigation, bootstrap for layout, and sass-loader for css preprocessing. Currently we use native react for state management, for more complicated projects we’re considered Redux.

react-router

You can view full react-router documentation in their guide. In short, we install the dom router which installs the base router package. React native would use a different router.

$ npm install --save react-router-dom

then in code

import { Route, Switch, Link } from 'react-router-dom';

//set up routes that map to components
<Switch>
    <Route exact path='/' component={Home} />
    <Route path='/help' component={Help} />
    <Route path='/about' component={About} />
    <Route render={() => <h1>Page not found</h1>} />
</Switch>

//create html links to other pages
<Link className="nav-link" to="/">home</Link>

bootstrap

Bootstrap requires jquery and popper.js, which need to be installed along with it.

$ npm install --save bootstrap jquery popper.js

Then in one of the top-level javascript files,

import 'bootstrap';

And in the root Sass file:

@import "~bootstrap/scss/bootstrap";

sass-loader

We use SASS for CSS preprocessing.

$ npm install sass-loader node-sass --save-dev

Then update our webpack config files (this will be available once you’ve ejected from create-react-app) by adding a test inside the rules object oneOf property along with the other tests.

{
  test: /\.scss$/,
  loaders: [
    require.resolve('style-loader'),
    require.resolve('css-loader'),
    require.resolve('sass-loader')
  ]
},

Make sure it’s added above the final “file” loader.

data access

We use axios for data access, and plan to handle fetching and saving data through a state object at the top level. This passes data down into components, and receives messages from components to update. This section coming soon!

App Structure

Applications are broken down into functional components and structured according to what they rely on. Components are stored in a .js file, using jsx syntax. They can optionally include a .scss file for component-specific styling. Components that are used in multiple places should be stored at the highest level of things that share them. Child components only used in one place should be nested under the parent component. Ex, for a Page that contains a Widget and WidgetB

Page/
|-- Page.js
|-- Page.scss
|-- Widget/
|--------- Widget.js
|--------- Widget.scss
|-- WidgetB/
|--------- WidgetB.js
|--------- WidgetB.scss