This is an ongoing series on React, check out the first part here:
So let’s get started where we left off, in this case we want to validate an input form before submitting the information upstate, a combination of state,form elements & bootstrap UI display takes care of the interaction, so in the end the component is fairly independent.
See the Pen React Form Submit Validation by Eugenio - Keno - Leon (@k3no) on CodePen.
Before going any further, we need to take a look at a components lifecycle, there are more stages in a component’s life, but these few I think are enough to get the concept across ( open your console for this one) :
See the Pen React Component Lifecycle by Eugenio - Keno - Leon (@k3no) on CodePen.
Another common thing you might find yourself doing is Iterating and rendering the contents of an array, here’s a simple one.
See the Pen React Iterating over Array by Eugenio - Keno - Leon (@k3no) on CodePen.
Now that we know how to iterate over an array, let’s talk about data flow, specifically from child to parent, while a parent communicates through props to it’s children, a child can communicate through a function passed as a prop as well:
See the Pen React Data Flow by Eugenio - Keno - Leon (@k3no) on CodePen.
But what if you want to create components on the fly, here’s a simple way of creating components in a for loop that incorporates the previous data flow pattern.
See the Pen React Dynamic Components by Eugenio - Keno - Leon (@k3no) on CodePen.
Another thing you might want to change on the fly is css styles, in this case with a custom component method.
See the Pen React Dynamic CSS Styles by Eugenio - Keno - Leon (@k3no) on CodePen.
This one took me a little longer to figure out, but basically you can incorporate Css transitions into your components life cycle, check it.
See the Pen React CSS Transitions by Eugenio - Keno - Leon (@k3no) on CodePen.
Getting close to a good basic understanding of React, here is the all too popular Ajax call which happens inside a component, which in turn could call other components to display and format it.
See the Pen React Ajax Call by Eugenio - Keno - Leon (@k3no) on CodePen.
I wanted to revisit the data flow example,now with communications from a child to a parent and child to a parent’s parent, also using bind as an alternative way of passing a function as a prop.
See the Pen React Bind by Eugenio - Keno - Leon (@k3no) on CodePen.
Best,
Keno