React Baby Steps Series: Props

I had built projects with React before. My first application was horrible in terms of…everything. It was badly designed and even worse executed. Now that I look back and evaluate how I learn the library, I notice that I failed to learn systematically. Lack of solid fundamentals leads to messy data flow (props all over the place), non reusable components (components serve as both presentational and container components), and less intuitive coding style (compromising too much just to make codes work). If you find it sounding familiar, I can assure you that this happens more often than you might think. How react and its ecosystem works is very different from the other in a wonderful way and it’s a lot to cope with.

So this is how React Baby Step Series is born. In order to right the ship, I will build a series of apps and each tackles a single concept in React ecosystem.

Let’s get started, shall we?

This article is all about this.props. Props look like this in a component

<Quote quote={ data.quote }/>

Here I have a Quote React component and assign data.quote to the property name quote.

Props enables React’s one-way data flow. It’s the mean to pass data from parent down to child component. It’s discouraged to apply changing data models to props so it’s great for static apps.

props is immutable.

Based on Thinking in React, I created a static page by dividing it into components and use this.props to pass data from a parent component to its children.

I simply create a root component Article and pass data to its children component and let the children decide what to do with the data.

And children can be rendered based on the data they are fed with. Here I was making a timeline table and the rows are rendered according to the data in this.props.timeline.

Here you have it:)