-
Notifications
You must be signed in to change notification settings - Fork 0
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
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.
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.