/tap-room-react-stateful

Week 2 review on adding state to a static project

Primary LanguageJavaScript

Tap Room 2

By Sean McDermott

Description

  • This is our week two code review for the React portion of our course. The goal of this review is to add state to the static project we began last week.

Component Tree

Sketch

Specifications

Completed

  • Successfully implemented Client-Side routing.
  • Successfully styled with CSS objects and modules.
  • Successfully used propTypes and JSX Looping.
  • Created modular components for a slightly modular UI.
  • Successfully added state to App component and used unidirectional flow to send this into child components.
  • Successfully added callbacks to retrieve information from children and display in other components using the same data.

Setup/Installation Requirements

Development server

Run npm run start for a dev server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

Notes

  • The only issues I ran into doing this project were pretty basic syntax issues. At one point, I incorrectly labelled one of my components but the linter makes it pretty easy to track those problems down. Overall, the process went fairly smoothly.

  • Comparing Angular and React, I like React in this context so far. The functional nature of the library makes it easy for me to visualize what each individual part is doing, especially since the styling, template and coded portions are all present in the same component. It was a lot easier for me to get lost in the component structure of Angular seeing as each component had it's own individual template, style, and coded files to work with. Overall, React seems to make this process a little easier to visualize.

Known Bugs

  • One console error for deprecated propTypes in React Library. Should not effect performance as of this writing.

Technologies Used

  • HTML
  • CSS
  • React
  • Javascript

License

  • MIT

Sean McDermott © 2018