Building an application with Angular was cool, but it's time to give another client-side router a go.
This project uses React to build a taproom that allows admins to update their keg list and allows users to view those kegs. For a look at what the project looked like in Angular, check the "Links" section below.
As I built this project, I started to get the sense that components in React tend to be much more granular than components in Angular. In Angular, I was building fairly robust applications that made multiple API calls, however, it was only necessary to create one or two components.
- App Component: houses all the other components in the application and is rendered in index.jsx.
- Header Component: header with logo.
- Keg List Component: loops through a hard coded database of kegs.
- Keg Component: passes props to display the kegs that were looped through in the keg list component.
- Admin Component: allows admins to sell pints, change prices, etc.
- Error 404 Component: a 404 error page that you're routed to if a wrong URL is used.
From the desktop:
git clone https://github.com/bjrshea/taproom-react.git
From the project directory:
npm installnpm run start
Linting:
npm run lint<--- this will show errorsnpm run lint-fix<--- this will fix errors if possible
- Clone the repo
- Make a new branch
- Commit and push your changes
- Create a PR
- JavaScript
- React
- NPM
- Babel
- ES Lint
- The first thing I found challenging with this project was setting up my linter. There were some specific installs I needed that I ended up searching for online. In the end, I created a dev environment shell that works great.
- I had an issue figuring out where I should place/style certain divs. This became a bit of an issue with my Keg List & Keg components, but I was able to break down where I needed certain styles.