Lessons based on posts from my blog - https://kyleshevlin.com

Conditional logic can be very cumbersome and difficult to read. A single `if/else` block might be simple enough, but nesting several of them can lead to very complicated logic and difficult to read code.

Often, we can easily eliminate half of the branching through the use of guard statements and early returns. This lesson will take a function with a few nested `if/else` blocks and refactor it to remove all of the `else`s. The result will be simpler and, in my opinion, easier to read.

Remove Unnecessary `Else` Blocks with Guards and Early Returns

Attempting to render an object in a React component results in an error. Objects are not valid React elements, however, strings are. If we transform an object using `JSON.stringify()` into a string, we can render it just as we would any other string.

We can encapsulate this concern in a React component. We can then use this component in a React app wherever we might like to display an object on the screen. This is very useful for debugging purposes when `console.log` or a `debugger` are not your best options.

Render an Object with JSON.stringify in React

This lesson teaches the fundamental technique for creating your own bar chart data visualization without needing a charting library such as D3 or Chart.js. React components are perfect for composing custom SVG into your own chart. We need only two components to create the example in this lesson. This is a great technique when you have data to display that isn't terribly complicated and you don't want to bloat your bundle size.

Kyle Shevlin's Blog Lessons

Instructor

Course content (3 lessons)

Instructor