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.

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).

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.

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

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

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.