Rapid Prototyping with React PowerPlug

Instructor: [00:00] Let's take a look at the infamous Counter example, first as a regular React component then as a PowerPlug component. As you can see here, I have a simple class component with a Counter for State and two handlers for incrementing and decrementing.

[00:13] The first component you'll find in the React PowerPlug library is the State component. All additional components in the library are built using the State component, and it's what we'll use to get started with our Refactor.

[00:24] The first thing we'll need to do is wrap our component with a State component and pass it in an initial value for our State. Remember, the React PowerPlug library doesn't render any DOM itself but acts more as a container for your State and logic that you can pass to your UI. It does this in the form of the Render props pattern which allows us to render whatever we want.

[00:43] This State PowerPlug component will give use two parameters we can use in our component -- State and Substate. All right, so let's got ahead and adjust our existing implementation to utilize the params provided in our render prop.

[00:57] This .state.counter can be replaced with just state.counter, and our event handlers can simply be in line and called a set State method directly. The main advantage to this pattern is the clean separation between State logic and the presentational component in charge of rendering the UI.

[01:13] The State component is agnostic at what it's rendering. It just supplies the UI component with the necessary tools to get its job done. All right, so that looks like it's working. Let's go ahead and clear out our existing component to clean it up a bit.