https://github.com/stanleynguyen/contikey-frontend

frontend for contikey webapp
https://github.com/stanleynguyen/contikey-frontend

babel react react-router-v4 redux webpack

Last synced: 30 days ago
JSON representation

frontend for contikey webapp

• Host: GitHub
• URL: https://github.com/stanleynguyen/contikey-frontend
• Owner: stanleynguyen
• License: mit
• Created: 2017-10-22T11:46:27.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-10T02:46:28.000Z (about 7 years ago)
• Last Synced: 2024-10-30T07:57:28.189Z (3 months ago)
• Topics: babel, react, react-router-v4, redux, webpack
• Language: JavaScript
• Homepage:
• Size: 1.82 MB
• Stars: 0
• Watchers: 7
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# contikey-frontend

This is a TLDR write-up on this project configurations and guide. For the

detailed write-up, please refer to [here](Frontend-Setup-GUIDE.md)

## Stuffs to have a look at before starting

* [React Redux Architecture Overview](https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e)

* [Hooking Up Redux with React](https://egghead.io/courses/build-a-react-app-with-redux)

* [Redux Course](https://learnredux.com/)

## Notes

This architecture was mainly influenced from the 2 courses above.

### Difference between components and containers

They are both folders of React components. However, one main difference is that

while a "container"is assumed to be allowed to read shared props from the redux

tree (i.e. store) via the react-redux's

[connect function](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

, a "component" is assumed to be "pure" (most of the time), meaning it would

only take it props passed during usage and are not supposed to be "connected" to

the store.

### How to pull assets (images etc.) to use inside my react code

Just import it since I already set up a "file-loader" inside

[webpack config](webpack.config.prod.js)

### Why use folder for my react components/containers?

My intentions is to have a sub-folder "components" that contains all the

componets that is useful to (i.e. is only used in) such react

component/container.

## Start writing code

Install [yarn](https://yarnpkg.com/lang/en/docs/install/) if you don't already

have it.

```bash

git clone [email protected]:stanleynguyen/dboard-frontend.git

cd dboard-frontend

yarn install

yarn start # this is to start the development server

```

Always remeber to open a new branch to work on anything that's your

responsibility and open a PR once done. Other team members will be expected to

review the code, once done, we will merge it in :)

To build the bundle for deployment

```bash

yarn build

```

Then deploy everything that's inside `dist/` folder to a static site host then

you are good to go :)

## Burning question

Please contact me on [Telegram](https://web.telegram.org/#/im?p=@stanley_nguyen)

or [Whatsapp](https://api.whatsapp.com/send?phone=6581489408) or

[Email](mailto:[email protected])