A Beginner’s Guide to React

React

By Karolin Rafalski

If you’ve ever used HTML and CSS to build webpages from scratch, you know that it takes a lot of time and effort to make them look nice. Each page is handcrafted using these common front-end languages. However, if you hop on to a site like Facebook, users generate new content on the fly. There certainly isn’t a dedicated team of developers ready to update the page any time a person shares a photo or comments on a post. Instead, millions of users have the ability to post updates instantaneously.

This first became possible through tools like server-side rendering, older front-end frameworks like Backbone and AngularJS (i.e., versions 1.x), or jQuery. However, when it comes to large-scale websites and applications, these options present a couple of issues:

  • Their cumbersome code is hard for developers to maintain.
  • They aren’t always optimized for speed, which is especially problematic for users viewing on mobile devices.

Enter React, an increasingly popular front-end JavaScript library that enables developers to build fast, scalable webpages and user interfaces that can quickly adapt to continually changing data.

Why Developers Use React

According to the 2018 Stack Overflow Developer Survey, React is the framework most developers say they want to work with if they don’t already. There are plenty of reasons for this, but here are just a few:

  • Speed: React is fast! As more and more people visit webpages on a wide range of devices, fast performance is increasingly critical.
  • Reusable components: You can break down common elements (e.g., forms, buttons, or layouts) into a component, which you can reuse as you build out your app’s functionality, rather than code each new piece from scratch.
  • Easy collaboration: Independent components allow larger dev teams to split work without stepping on one another’s toes. For example, if you were working on a real estate listings site, you could have dedicated developers working on individual views of property listings, while another group tackles the view of all available listings and another works on the ratings system.
  • Highly scalable: Developers often prefer React for large-scale application because of the reusability and independence of the components.

A Brief History of React

A developer at Facebook created React in 2011 to help solve some particularly hard challenges with rebuilding the site’s advertising products, but the team quickly realized it could be useful in more areas. They first tested React’s capabilities on Facebook’s newsfeed to facilitate liking and commenting functions, as well as on Instagram’s website, then implemented it on a wider scale.

In 2013, React was released as an open-source framework so that other coders could take advantage of its speed and power to build out and optimize their own web and mobile applications. Devs at companies that use React love its ability to solve complex challenges, improve speed, and organize code in a way that’s easier for large teams to manage.

Today, React is one of the most popular ways to build pages or update old ones, with hundreds of top companies — including Instagram, Netflix, Dropbox, The New York Times, and many more — leveraging it for their websites. Now’s a great time to learn the framework, as there’s not enough talent to meet employer demand: According to the 2018 HackerRank Developer Skills Report, 33% of employers need developers who can use React — yet only 19% of developers say they have these skills.

Many new website features that seem simple to a user — like a notification system or infinite scrolling to view new custom content — can take months for a team to implement, so developers are there to continually develop, debug, and optimize. In fact, React has become so popular that the dedicated role of “React developer” as emerged for talent that works exclusively in the framework to modernize code and build new functionality. Whether you want to focus solely on React or use it to differentiate yourself from other front-end or software engineers, it’s a valuable skill to add to your toolkit!

How React Is Used to Build Webpages

Developers leverage React to create seamless user interactions. For example, when you search Netflix for a show you want to watch, you might see the results list narrow down with each letter you enter into the search field. These changes are immediate and you see a consistent user interface, which makes it easy to find what you’re looking for. But there’s a lot going on behind the scenes.

When you search for a movie (i.e., input data), your input goes to Netflix, and Netflix quickly returns matching results. This is because data for each category, movie, and show is loaded into a React component (you can think of this as a template or blueprint) that can be reused and updated based on the data.

The framework is based on the concept of components, both for viewing different data and for coding efficiency. Rather than reloading a whole webpage when a user interacts with it, the only components that change are those that need to be updated based on what the user wants to see or do on the page. Developers can also reuse components that have similar functionality throughout a site, saving them extra, repetitive work.

React is “agnostic” to other tools in your front end, which means developers can use it in tandem with other powerful front-end JavaScript frameworks and libraries like jQuery. Since React only handles how data is presented, developers often pair it with numerous back-end (i.e., data-handling) frameworks, such as Ruby on Rails, Express, Django, Drupal, and others.

React at General Assembly

In GA’s React Development course, you’ll learn not just how to create React apps, but how and why they work. You’ll use React to build a scalable, maintainable web application from scratch, and learn how to host it on Heroku to share with the world. You’ll also dive into APIs, JSX, React Router, and more. If you already know coding basics but need to double down on your JavaScript know-how, start with our part-time JavaScript Development course, on campus or online. Or, get started with a free livestream!

If you’re looking to launch a career in coding and are just beginning your journey, our full-time Web Development Immersive (WDI) course, on campus or remote, will take you from motivated beginner to job-ready in three months. In WDI, you’ll learn to create well-designed, high-impact webpages using both front- and back-end languages and frameworks, including React.

Meet Our Expert

Karolin Rafalski is a Web Development Immersive Remote instructor, which means you can take the course with her from nearly anywhere in the world that has internet. Karolin is a career-changer who spent over 10 years teaching at various colleges and took the Web Development Immersive course on the NYC campus in 2016. In her spare time, she enjoys biking, hiking, spending time with her cats and reading.

“React is one of the most in-demand front-end frameworks. Not only can it help you build faster and more robust websites — it’ll also make you a better developer.”

Karolin Rafalski, Web Development Immersive Remote Instructor