Learning React Continues

React

Still Enjoying React

I have been slowly working my way through the Fullstack React book the past week. The more I learn about React the more excited I am to learn more. I can see why it is becoming increasingly popular.

What I Have Learned

When building your React app, you want to use the single responsibility principle. You want each of your components to handle one part of your app. This separation of responsibilities keeps things simple, makes debugging a lot easier, and improves reusability.

Using the example from the book on the left, you can see how each component has a single responsibility. By keeping the Timer separate from the rest of the app, including the TimerForm, this makes it easy to reuse. We can take the Timer component and drop it any where we want to display a timer.

Seven Steps to Building a React App

When you are developing your React app, there are seven steps in developing them. Both the voting app and this timer app used these steps in the tutorials.

1. Break the app into components
2. Build a static version of the app
3. Determine what should be stateful
4. Determine in which component each piece of state should live
5. Hard-code initial state
6. Add inverse data flow
7. Add server communication

Going through the first six steps in both of the apps has been very helpful for getting a feel for the flow of building a React app.

Object#assign

This was a new concept for me. You can pass any number of objects as argument when you use object#assign. If you pass in two arguments, it will take the properties of the second argument and copy it to the first. The example from the book:

const coffee = { };
const noCream = { cream: false };
const noMilk = { milk: false };
Object.assign(coffee, noCream);
// coffee is now: { cream: false }

You can also pass in a new JavaScript object to create a new object with the properties of the second argument:

const tea = Object.assign({}, noCream);
// tea is now: { cream: false }

Bottoms Up!

A common theme while building these apps has been adding features from the bottom up. Adding the ability to edit and delete the timers we first started in the Timer component. From there we next added the necessary code to the EditableTimer component, then the EditableTimerList, and finally the TimersDashboard. Working in this matter makes it easier to build out our functionality.

What’s Next?

I am putting the Fullstack React book on a slight hold for now. Flatiron School is working on a React certificate course for their online campus. I am getting a sneak peak and running through it. It is looking extremely helpful and will be an awesome course when it is finished and released. You are going to love it!

Graduate of Flatiron School’s Full Stack Web Developer Program. Follow me on Twitter @thebrianemory. Follow me here, click the green heart to show some love, leave a comment, and get in touch!