React Course Demo Application

[rlmcneary2]

There will be a Bitovi University course about building a sample application using React. This application will focus on React and will minimize use of technologies or modules outside the following React modules: react, react-dom, prop-types, and react-router.

Course Technical Requirements

• The course shall use React 16.8.X or later.
• The demo app shall be created using create-react-app.
• Unless specifically required for capabilities or demonstration purposes functional components shall be preferred over class components.
• State and side-effects (asynchronous actions) shall be managed using hooks.
• All of a component's props shall be defined using PropTypes.
• Split and bundle the application for partial loading.

Tasks [x] Create the react-pmo application repo. [x] Include react-router. [x] import css from place-my-order-assets. [x] AppContext (app-wide context for child components). [x] Header component. [x] Home component. [x] Restaurants component. [x] RestaurantListItem component (image assets served by place-my-order-api). [x] RestuarantDetail component. [ ] RestaurantOrder component. [ ] OrderHistory component. [x] donejs/place-my-order-assets: create a compiled css file at publish time. [x] donejs/place-my-order-assets: publish a new minor version (0.2.0). [x] donejs/place-my-order-api: generator now produces a resources property with URLs that start with "api/resources? [x] donejs/place-my-order-api: include "place-my-order-assets" in bundledDependencies. [x] donejs/place-my-order-api: serve requests that start with "api/resources" from the bundled place-my-order-assets directory.

[justinbmeyer]

Why do you think we should use PropTypes everywhere?

[rlmcneary2]

Generally considered best practice by the React team. I think it's helpful when learning because the developer has to actively define the shape of the props and it will help catch errors during development. The trade-off is code complexity.

[justinbmeyer]

If it makes the code noisier (or adds something), I'm wary of adding it. We can have bonus sections that show moderate to advanced techniques. Or add this after a component or two.

[christopherjbaker]

Looks good to me. Even though it is outside "React Core", I would say yes to react-router-dom, as nearly all projects use it.

As for prop types, they should absolutely be included. PropTypes never be considered optional; I insist on prop types before I insist on testing.

[BigAB]

LGTM. react-router seems like a good choice.

I'd say unless you are using typescript (which I am sure we are not) propTypes is a probably a good idea.

Not sure what you mean by

functional props (passing data back to a parent is a common question)

[rlmcneary2]

Yeah, I prefer typescript myself but that doesn't seem to be in keeping with the spirit of the course. A function prop is just a prop whose value is a function. Like the clickHandler prop:

const props = {
  clickCount: 1,
  clickHander: () => updateClickCount(1)
}

[BigAB]

In that case I don't know what would be TBD about that, of course you'll need callbacks passed to props.

Cool beans.

[justinbmeyer]

@christopherjbaker

As for prop types, they should absolutely be included

Be included on every component? That feels like it will introduce too much at once. Folks should learn one thin at a time. If PropTypes are that important, have them be added after a component or two. But I'd be wary of adding them on the first component when someone should initially be learning what a component is, JSX, how to pass values, etc.

[justinbmeyer]

one more thought on this ...

I think for an example app, proptypes makes sense on every component. So it probably makes sense to put proptypes on every component now, but I still think the final result of the guide should not have proptypes on every component.

[BigAB]

Just to clarify, @justinbmeyer you're saying that for a DEMO APP proptypes are a good idea, they show we know what we are doing, and follow general React patterns and best practices, but for a GUIDE / TUTORIAL we don't want to add steps where the person following the guide would have to add prop-types to the components while walking through the guide.

Is my understanding of your stance correct?

[justinbmeyer]

Not exactly. Showing propTypes as part of the guide is a probably a good idea. However, I’d expect them to be introduced after a component or two. I would not have people go back and add them on the initial components.