Front end Development

Everything works great on VS Code (+ the relevant plugins). If you're not familiar with VS Code, you bring up the command palette with ctrl-shift-p. The organise imports and format document command are your friends.

We're using http://yarnpkg.com/.

Important commands:

• yarn to install the packages
• yarn start to start the dev server.
• yarn storybook to start the storybook. Remember to add stories for components when it would be useful.
• yarn lint lints the entire project instead of just one file. You can use VS Code's task runner to run this and it will integrate into the Problems panel so you can jump straight to the problem.
• yarn start:mock-api starts a mock API that uses mock-api/db.json. You can put data in there to quickly test your components against an example API without having the back-end up yet.

Important things to understand for our codebase are TypeScript (and ES6), React, and Redux. Look at their websites for details (will keep an eye out for useful tutorials too).

Style

Immutability is important when it comes to states since that's how React and Redux know when to re-render. e.g.

const good = (obj, moo) => ({...obj, moo});

const bad = (obj, moo) => {
    obj.moo = moo;
    return moo
};

good does not alter obj, but bad does.

Also prefer declarative over imperative, and composition over inheritance.

React

For React components, it's good practice to split them into presentational and container components. Put simply, presentational components have props but no state, while container components manage state that they pass via props to presentational components (they also would pass handlers down via props to allow presentational components to interact with the state). Here's a good overview by Dan Abramov, a co-author of React and Redux: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Storybook

Having separate presentational components also makes it easy to add them to our Storybook. Storybook is a useful tool for developing and documenting components in isolation. Stories live in the web/stories directory. yarn storybook to start the storybook.

Stateless Components

React.SFC<IProps> is the type of a stateless functional component (hence SFC) i.e. the component is a function which just takes props (as defined by the interface IProps), having no state. e.g.

interface IProps {
    name: string;
    age: number;
}

const Message: React.SFC<IProps> = ({name, age}) => (
    <>I'm {name}, and I'm {age} years old.</>
);

const Example: React.SFC<{name: string}> = ({name}) (
    <div>
        Welcome! <Message name={name} age={18} />
    </div>
);

p.s. <> is shorthand for React.Fragment

Redux

For components whose state we are storing in Redux, use the connect() function whose arguments mapStateToProps and mapDispatchToProps let you specify how to map the Redux state and dispatcher into props to pass to the presentational component.