Article

Learning React on egghead.io

React is a modern open-source web development toolkit built by Facebook. React is built to be a declarative, efficient, and flexible approach to creating JavaScript applications that run in the browser (and beyond!)

Dividing web applications up into components is a central idea to creating applications with React. Instead of a gigantic monolith of a web page, you will generally consider the individual pieces that make up an application and divide it up into smaller pieces that are much easier to develop, debug, and to generally think about.

Learning React is often a daunting task. It introduces several concepts that might seem totally foreign to you at first. While it is sold as a simple toolkit for building web applications, React also delivers new concepts, syntax, and an ever growing ecosystems of tools and utilities that go into building a production scale React app.

The first step is to learn the basics of what React provides, and understand the overall vocabulary that is used when programming a web application with React. As programmers, this seems to always be the case. Here’s a bunch of new words to understand both in terms of their definitions, but also how they are related and used together.

Once you’ve managed to gain a solid understanding of the vocabulary, the next step is to put that all together to actually build something. It’s smart to start small and keep it as simple as possible. There is always a temptation to grab a large full-featured boilerplate project and jump straight to WEB SCALE PRODUCTION APP, but this approach can introduce an avalanche of interconnected libraries, utilities, configuration that are often confusing if you’re just starting out.

So, where should you start?

Learning React will require a working knowledge of JavaScript, and specifically the es6+ modern versions of the JavaScript language. While not strictly required, many of the features of modern JavaScript can help clarify and simplify the code you will be writing to create a React web application.

Additionally, React development requires a working knowledge of HTML and CSS. React actually uses a markup language called JSX that is very similar to HTML, but allows us to write the markup directly inside of React components. This often leads to a “ARE YOU KIDDING ME? NO!” reaction when people are introduced to JSX. It feels weird. It feels a little wrong.

JSX is fine. In fact, after spending some time with it, it just is. Once you’ve built a few delightfully self-contained components that are easy to think about and work with, the oddness of writing “markup in code” falls to the wayside in favor of productive and happy software development for most developers.

To help you, we have several full courses that should build confidence and fill your brain with the knowledge you need to start! We’ve divided the courses below into three levels based on your experience with React.

Beginner

You’ve got to start somewhere, and for anything worth learning that is usually at the beginning. With React, being a beginner doesn’t me you are totally new to web development. In fact, if you’re learning React you should already have experience building web applications with JavaScript, HTML, and CSS.

Start Using React to Build Web Applications (21 lessons)

This courses will teach you the fundamentals of React, walking through the key features and demonstrating how they work in code. It is the foundation that the rest of the courses will build upon.

Build Your First Production Quality React App (24 lessons)

Once you’ve gained a solid understanding of the basics, you should be ready to build an application. This course focuses on using the core of React to build a web application, while not using a lot of libraries or other dependencies. By avoiding dependencies you can start to understand when and why the popular libraries like React Router and Redux exist. Knowing when you don’t need to use a library is often as important as when it is the best choice.

People often fill their applications with all of the popular libraries from the start, and this can lead to sadness and confusion when you go just beyond the scope of “tutorial work”.

Intermediate

The next stage of competent knowledge of React is exploring the vast and rich sea of tools and libraries that have been created by the amazing React community.

React is open-source software and it’s popularity and use has the traction of a 4x4 monster truck. It’s not just hype. React is being used at every layer of our global economy from high finance to binge-watching TV the odds are that React is literally touching every aspect of your connected online life.

What that means is that a lot of very smart humans have chosen React as their tool of choice, and many have taken the basic core set of tools and expanded on them by releasing open-source libraries that solve common, sometimes deceptively difficult issues that we all face every time we set out to build a non-trivial web application.

Instead of rebuilding the same solution over and over and over again, we can look to the brightest minds the React community has to offer. They are not only teaching us how to build better, they are creating amazing tools that make us more successful developers.

Projects like React Router and Redux weren’t created inside the walls of Facebook. These solutions came from the community, to solve real problems that occur in essentially every application we build. They were created by the efforts of hundreds of community members contributing their time and effort, largely for little to no compensation, to share their hard work with the rest of us.

It’s truly amazing, and you should consider thanking your favorite open-source maintainers loudly and publicly! 😃

The next step on the path to React mastery will be to examine these libraries and be clear about how and when they can help you build your own applications. We’ll start with React Router.

Add routing to React apps using React Router v4 (14 lessons)

Users are rarely satisfied with a single page to interact with. When we refer to the single-page application, we are actually saying that the server only renders a single HTML page and then lets JavaScript take over the rest. We still want a rich navigation experience that delivers the users to contextual screens that have the data and inputs they need to get work done.

These individual screens are called routes, and refer directly (for the most part) to the url that appears in your browser’s location bar As we navigate around the internet, we utilize a “simple” string of characters in the form of a URL that allows us to see where we are, and often to return to that point in the future. It’s how the world wide web functions, and that ability to travel from URL to URL is vital in how we navigate.

For React, this means that we will want to have a router built into our app that manages the state of our applications location relative to the rest of the application as well as the broader internet.

Routing is complicated.

You probably don’t want to build your own router. In fact, in if you’ve worked through Build Your First Production Quality React App, you’ve started to go down the road of creating your own router.

The edge cases are what will kill you. In particular, dealing with browser history is a sticky sticky problem! This is where React Router can really save you a lot of time and heartache. It’s on version 4, and has been in development for several years. Instead of learning about the intricacies of managing the state of browser history, you can focus more directly on the problems your clients and customers are facing through a well vetted community developed tool.

React Router v4 is excellent software, and if you’ve got a solid understanding of React basics, it provides a relatively simple way to get started adding routing to your applications.

Routing is just one aspect of managing data and state that we are faced with when building modern web applications with React. We are also dealing with the state of our domain data, as well as the state of our UI. React provides a mechanism for dealing with UI state using setState, which is often more than enough, but in more complex applications, it can become extremely confusing to have hundreds or thousands of individual setState calls around the application changing the app all at the same time.

This is where Redux enters the picture.

Getting Started with Redux (30 lessons)

Managing state is arguably the trickiest aspect of building any non-trivial web application. User interfaces are asynchronous by nature. Our applications are always eagerly awaiting input from the users mouse and keyboard, all the while sending messages back and forth to multiple services and updating the information displayed on the screen based on all of these streams of information converging inside of our components.

Left unchecked, this can create a mountain of opaque complexity that will have your eyes popping open at 12:03am with a mist of cold sweat across your brow in anticipation of the bowl of code you’ll be wrestling at work the next morning.

Redux builds on decades of experience and solutions to provide an elegant way to manage the data and state of your applications. The core idea of Redux is that all of your applications state is stored in a single branching object. When that object changes, the parts of the application that need to know about changes are notified, so that they can update accordingly.

Instead of sprinkling changes to state across the application, the changes occur in a central location that serves as the single source of truth for the application’s state. Components throughout the application can request change actions, and when they have succeeded (or failed) the central state is updated and everybody using that data can adjust accordingly.

It creates a loop where events occur, data is changed, and those changes are propagated across the application as updated properties for components.

The next step is to put it all together, and buyild an application that combines Redux and React Router to create an application that you will deploy to the public internet.

Build A React App With Redux (26 lessons)

At this point, your are probably getting a better idea of what goes into building a real-world production React application. You’ve got an introduction to two of the most popular utility libraries that the React community has to offer. The next step is to glue it all together and build something step by step!

Advanced

The real world is messy, and React web applications all have different needs in many areas. While we are often able to get away with the core library with a couple of add-ons, depending on your users and business needs there are many aspects of your application that might benefit from other community libraries that are available.

One of the most important aspects of staying current and keeping a sharp edge of skill honed sharp.

That’s what “advanced” tends to mean. It is about specialized problems that go beyond the core basics that are common to most applications.

Manage Complex State in React Apps with MobX (9 lessons)

MobX is an alternative to Redux in that it provides a clean and clear mechanism for managing your application’s data and state. It is fundamentally similar to Redux, but it functions in a different way that many find easier to understand and deal with in their applications.

Higher Order Components with Functional Patterns Using Recompose (15 lessons)

Recompose is billed as a toolbelt for building higher-order components in React. In some ways, it offers another alternative to Redux, but takes a distinctly more component based approach to solve similar problems. It’s very rooted in functional programming techniques and is like lodash for React components.

Add Internationalization (i18n) to a React app using React Intl (11 lessons)

A common aspect of larger applications is the need to build a useful tool for a global audience. This is called localization, internationalization, or sometimes the cryptic i18n. Basically it means we can switch the words displayed by our application to a variant of the primary language or an entirely new language.

This process can be complex and cumbersome, so it is often wise to reach for a library to solve it. It is also a problem that is best solved as early as possible if you are going to need it, because the soul sucking tedium of doing it on a large application isn’t much fun.

What’s Next?

Once you get passed the initial learning curve and avalanche of new terminology, building React web applications is one of the best experiences you can have programming web applications. The library itself is wonderful, and the community is vast, welcoming, and generous. Armed with your new knowledge to can explore our other courses that cover more aspects of building React applications.

We highly recommend spending time looking through the various community open-source projects. Contributing to open-source is an excellent way to gain a deeper understanding of your tools and build valuable career skills, not to mention you gain the opportunity to work alongside many amazing people and make new friends.

if you’d like additional help or guidance, drop us a line and we’ll do our best.