Class 31
Resources:
- A Complete Guide To props.children In React
- Thinking in React: Component Composition
- How to use props.children in React
- Understanding The Fundamentals of Routing in React
Review, Research, and Discussion
- Why do we not need more .html pages in a multi-page React app?
- With React we can build a single-page app, Because we don’t need to render different html pages, we can render different components.
- If we wanted a component to show up on every page, where would we put it and why?
- Inside the
, outside a - BrowserRouter is used for doing client side routing with URL segments. We can load a top level component for each route. This helps separate concerns in app and makes the logic/data flow more clear.
- Inside the
- What does props.children contain?
- Essentially,
props.childrenis a special prop, automatically passed to every component, that can be used to render the content included between the opening and closing tags when invoking a component.
- Essentially,
Vocabulary Terms
- Composition
- In React, composition is a natural pattern of the component model. It’s how we build components from other components, of varying complexity and specialization through props. Depending on how generalized these components are, they can be used in building many other components.
- Children / Child Components
- The children, in React, refer to the generic box whose contents are unknown until they’re passed from the parent component.
- It simply means that the component will display whatever is included in between the opening and closing tags while invoking the component. The component would usually be invoked from App component.
- Hash Routing
- HashRouter is used for static websites with a server that only responds to requests for files that it knows about.
- Link Routing
- The react-router package also contains a component that is used to navigate the different parts of an application by way of hyperlinks. It is similar to HTML’s anchor element but the main difference is that using the Link component does not reload the page but rather, changes the UI.