Front-End Codebase for project Fresh Spire
Clone the repo first
> git clone firstname.lastname@example.org:ckres/teamfresh.git > cd ./teamfresh
Install all the dependencies (make sure you already have node.js installed)
You will be redirected to http://localhost:3000 by default and everything is hot-reloaded, which means you don't have to refresh the browser everytime you did some code modification.
How to Work On Your Own Feature
We use React.js as the front-end framework, which is kind of component based. Generally you could follow the steps that I provide below:
- Create your own branch, I suggest using a formatt in
- Create a React component file, for example,
- Create its corresponding style file with the same file name, and use
- Write the according route, in
- Mock your data if needed. If it's a generic/big feature, ideally I recommend you create a separated store like
DealStore.js. But don't create too many stores as this could be hard to maintain in the future.
- The bottom line is that it doesn't break the current code base, so plz make sure you fully test your feature.
- Push your feature and submit a pull request.
Sass, which is a preprocessor of css. It transform
scss files to
css. There are quite a few awesome features such as nesting, using variables, etc. It's quite easy to pick up.
But pay attention that in the .js files you are still importing
Every styles, sizes variables that could be shared across components, plz put it under
theme.scss like this:
$spearmint-dark: #3dd28f; $spearmint-light: #64dba5; $grey-dark: #e9e9e9; $grey-light: #f2f3f3; $charcoal-dark: #2b2b2b; $charcoal-light: #404041;
react-router to handle route. As you can see, this project is essentially a Single Page Application, in which we only have one
html file and a single entry