/three-car-pileup

A follow-along project for mastering props and prop-drilling. Complete with visual aid documentation.

THREE CAR PILEUP

GitHub Cover

About The Three Car Pileup

I created the Three Car Pileup for a few reasons:

  • to help me solidify the information for myself
  • to help other aspiring web devs solidfy the information about props and passing props
  • to create a learning project for web devs to play in as they develop and add onto their skills

In my former life, I was a Paramedic/Firefighter and a Surgical Technologist before that. For me to be able to understand and teach the concepts of web development, I relate them to the medical field. This gives me a visual aid to remember the concepts but also makes it more relatable to anyone whose first language isn't web development.

For me, props was one of the hardest concepts to learn. Passing props was no easier. Creating this project and the accompanying document helped me to have a better understanding.

How to use The Three Car Pileup

I have created a follow-along document to go along with the project. It breaks down the very basics of a prop along with following the props as they are passed through the components of the project.

There are two ways of using this project:

  1. Start from scratch with only the PatientData.js file and framework. Follow the document and work through the project step-by-step. To do that, use the skeleton repo. Be sure to fork and clone it before getting started.

  2. Follow along in this repo with the files already completed. Then add onto this project to build other skills like:

    • styling
    • refactoring to use Redux
    • create forms allowing for CRUD
    • create login/registration pages
    • create dashboard
    • create routing and private routing
    • creating a backend to perform an API call
    • etc

    *** In the near future, each of these concepts will have accompanying documentation and source code to view if you get stuck.

React - Prop Drilling Documentation and Visual Aid

PASSING DATA THROUGH PROPS

Download the Three Car Pileup Doc

HEARTBEATHEARTBEATHEARTBEATHEARTBEATHEARTBEAT

If you're ready for styling:

While there are many styling frameworks, you should first know HTML/CSS along with Flexbox.

HTML/CSS

Download the HTML/CSS Reference Cards