React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

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

Kyle Shevlin

Course Content