A Beginner’s Guide to React

Learn the basics of React JS that every front-end developer should know.

Zight | February 15, 2020 | 10 min read time

Article Last Updated: July 04, 2023

A Beginner’s Guide to React

Front-end development tools and best practices are constantly changing and evolving. It can be a challenge to keep up with for the best of developers. Whether you’re a seasoned developer or just dipping your toes in, chances are, you’ve heard of React (also known as React JS). But you may be wondering ‘what is React and why use it?’. Don’t worry, we’ve got you covered. In a world of ever-changing development products, we’ve got answers to a few common questions a quick guide to help you get started using React.

What is React and Why Use It?

What is React JS? Put simply, React is a library to help developers build user interfaces for the web and mobile applications. However, it has been described by some as a framework. If you were to add Redux, React Router, etc., it would have all the necessary components to be considered a framework; It would certainly be capable of making a regular, single-page application. However, without these add-ons, React is simply a library.

A lot of people wonder, “Why is React so popular?”. One of the factors contributing to its popularity is that JavaScript library makes development processes extremely easy. The React framework is also easy and quick to work with – saving you time and frustration. It is quick to use because it simplifies significant data changes that will automatically modify part of your user experience. This means it will save you from going back and performing additional functions to update your UI. React also allows you to reuse components you’ve developed for other applications that use the same functionality.

One of the other great benefits of React is that its SEO friendly since the webpages produce a higher user experience than those created on most other JavaScript libraries. These, among many factors, have added to the popularity of React over the years.

To give React some background, it was created by Facebook software engineer, Jordan Walke. He released a rudimentary version first called “FaxJS” in 2011, which later evolved to what we know and love to be React today. React gained awareness at first because Facebook was supporting it. But once big leaders like Instagram, Netflix, and Dropbox starting using it in 2015, it took off. In the same year, React native was released. This wasn’t necessarily ground-breaking, but it was an interesting development that caught the attention of many developers. Recently a Flux implementation, Redux, was added. It’s been called the most successful implementation so far because it’s made state-management simpler and faster to learn.

What is React Programming and How Does React Work? Getting Started on Your First React App

Getting started on your first React JS app may seem daunting, but don’t worry. If you’re sitting there wondering ‘what is React programming?’ we got you covered.

Let’s start with the basics. React was initially created to help developers create large web applications that don’t need to reload the page when they change data. React is quick, simple and scalable. As previously noted, you can use React to build a single page application and mobile apps, or to build more complicated apps if you add on other libraries. It may be a bit to get used to the look and feel of React, but it’s not going to completely change the way you look at websites or HTML. In fact, you’ll likely be pleasantly surprised at just how easy React makes it to create beautiful and functional user interfaces.

However, if you’re just getting started with React development, you may be wondering “how does React work?”. We’ve got a few React examples to help you learn the basics.

One of the ways React works is with declarative code. What is declarative code? Take a look at the following React examples, assuming the code is expressed as an application.

React example: declarative code. Code example from: https://medium.com/leanjs/introduction-to-React-3000e9cbcd26

What do you picture when you read that code? As you read, you can recognize there will be a NavBar, Header, Book filter and so on. That’s because each line of the code in React declares what each element of the app is. Hence the name. The photo below is what the app looks like.

A React example: declarative code. Code example from: https://medium.com/leanjs/introduction-to-React-3000e9cbcd26

As you read through declarative code, you’re learning about the design and the code simultaneously. Unlike a lot of other coding languages, declarative code describes what you want, instead of how to do it.

Writing with declarative code is kind of like ordering a beverage at your local coffee shop. You might tell them what you want, but you’re not going to march behind the counter and tell your barista how to do it. Similarly, writing in declarative code will describe the end-result of your product, without providing a detailed guide. This produces a much lighter code that easier to understand and change. Many developers also report writing with declarative code in React means fewer bugs. And fewer bugs means time spent resolving them for you and your team.

What are React JS Components?

Every React App is created through composing components. These components are built with the declarative code style mentioned previously.

But what are React JS components? Components are how information is displayed. In other words, it’s the building blocks users will see on-screen. One of the benefits of React’s components is that they can be re-used, making coding in the future quicker and easier. Components also allow you to create individual blocks in your application, each acting independently of the others. The components then accept arbitrary input from a prop and will return a React element; this determines what the user sees on-screen.

We should note there are differences between components. Each component can be classified as either a function or a class.

So, what’s the difference?

Functional components are plain JavaScript functions. They accept props as an argument and return a React element. It’s commonly accepted among React JS developers that if you can use a functional component – use it. When your app is developed with mainly functional components, you’re going to have an easier time reading and testing because the components are plain JavaScript functions. Unlike their class counterparts, functional components create less code because there are no state or lifecycle-hooks.

Alternatively, class components have a few features that aren’t available in function components. Namely, they can have a state, lifecycles, use refs…the list goes on. Additionally, there are two types of class components; Component and PureComponent. There is one difference between them; PureComponent handles the ShouldComponentUpdate method for you. Meaning with props or state changes, PureComponent is going to do a shallow comparison on both props and state. This is great if you don’t want to make extra renders. This could be the case if a component and its children haven’t changed at all since a render. However, if you’d like to implement a comparison, just use ‘component’ and override ‘ShouldComponentUpdate’, which will return true by default.

Because functions are generally more transparent and easier to use and understand; if you can use them, do. As of React version 16.7.0, class components will only be used for lifecycle methods.

React Lifecycle Methods: Photo from https://www.toptal.com/React/React-tutorial-pt1

How Does React Work? Getting Started On Your First App

If you’re ready to get started with React, we recommend starting with CRA, a CLI tool that will simply create a project for you. CRA will make you rely on React’s default configurations. You won’t need to go through all the settings for Webpack/Babel and so on. To start, you shouldn’t be worrying about the major updates in other critical libraries. CRA will just help you start. However, as you make it through your project, if you’d like to handle every single setting on your own, you can, by simply running:

npm run eject

But let’s not get ahead of ourselves. Once you’re ready to start with CRA, the first thing to enter in is:

npx-create-React-app {app-name}

npm run start

And you’re off to the races!

React JS Integration Testing

Alright, maybe you’ve made it past your initial wondering of “what is React JS”, you’ve started on your first React JS app, and now you’re wondering how to conduct integration testing. If you want to keep your code maintainable without impairing development speed, you’re going to need to write integration tests with the help of a React-testing-library. This could be in addition to, or in replacement of, the component unit tests you’re likely already running. React tests are automated tests of a user interface written within the React library.

Running mostly integration tests is recommended by most top React JS developers. Testing software can get expensive – you don’t want to charge a credit card or have emails sent on every test. But, finding the balance of gaining confidence in your code and keeping costs low is where integration tests come in.

When you’re running an integration test, there are a few key things you’ll want to keep in mind. Make sure your integration tests do the following

  • Ensure API calls are not dependent on API availability and state if you’re running a pass/fail test
  • Ensure tests mock browser APIs
  • Test app use from the user’s perspective
  • Assert on React DOM State

Keep in mind if you do not want your React app integration tests to test implementation details, do a shallow render.

Zight (formerly CloudApp) For Developers

No matter which testing tool you end up using, many testing apps don’t assist you, or your team in actually dealing with any issues that may arise. You may find a bug, but now you need to explain where it is. And, chances are, you’ve experienced situations where not all team members can even find the bug depending on what web browser they’re using.

Finding, explaining and dealing with bugs in your software can eat up a lot of valuable time. I’m sure your English skills are great, but it can get a bit odious typing out in plain English where exactly the bug was, what browser you were using, and so on.

This is why we recommend using one of the greatest productivity tools for web development out there. It can you and your team and easy-to-use way to quickly create and share visual content to resolve any development challenges swiftly.

Zight (formerly CloudApp) enables you to take a screenshot and annotate it before saving. You’ll have a multitude of options including the arrow tool, line tool, pixelate tool, spotlight tool and more to communicate quickly and effectively to your team where you see the bug.

Additionally, Zight (formerly CloudApp) already has integrations with industry-leading software like Jira and Asana to work seamlessly with your existing workflows.

You can get started in three easy steps:

  1. Create a free Zight (formerly CloudApp) account
  2. Create content
  3. Drop content into your project management software

Boom. Done. Look at all that time you saved explaining to your development team where that bug was. In just a few swift mouse gestures, you and your team are now on their way to resolve any development issues that arise.

But don’t take my word for it, power users of Zight (formerly CloudApp) see upwards of 67 minutes in time saved per week while using its screen recording, screen snipping, and GIF editing/creation tools.

Whether you’re dealing with a bug, sharing a workflow or explaining a UI feature, ClooudApp’s screen recording, GIF making, and annotated screenshot tools are all contained in an easy-to-use app. Using Zight (formerly CloudApp) will make communications with your team easier and quicker – meaning you can get back developing sooner.

React JS: Helping You Create Simple, Beautiful UI

React JS has gained considerable traction in the development world since making its first appearance in Facebooks newsfeed back in 2011. One of the reasons it’s gained so much popularity over the last few years is how easy it makes creating effective and beautiful UI for developers. Once you get into it, React JS is extremely easy to learn. It can be hard to keep up with all the advances in development tools. But the good news is, React JS is not going to radically shift the way you understand HTML or websites. It will, however, amaze you with how easy it is to get started. We hope this guide has given you an overview and answered questions like ‘what is React and why use it?’.

Whether you’re a front, back or full-stack developer, don’t forget to download a free Zight (formerly CloudApp) version to see how it can simplify communications between team members and clients.

Ready to chat with us about how to save time, money and help your team communicate better?