What You Need to Know About React

This article is the first part in a series about React, a JavaScript library for building UIs. It will cover crucial things you need to know about React before getting started.

Background

React is primarily developed by teams at Facebook and Instagram, but it is now used in many sites and apps.
At Revelry, we chose React as our UI component framework.

The Purpose of this Article

The purpose of this article is to explain some key things about React that you should know before you get started. When I started learning React, I was confused by the framework and its documentation, because I didn’t understand the core concepts of React. I would like to prepare you to learn React by sharing some of those core concepts.


The Things You Need to Know

React is about components

React takes a component-based approach to JavaScript-driven UIs. When you create UIs in React, you create a series of well-delineated components which have a single responsibility, then you reuse and compose them to build more complex interfaces. You will have little to no UI code outside of components.

React components are their own templates.

React is V, Bring Your Own M & C

React is for making UIs. Most people use React as the View part of the Model/View/Controller (MVC) pattern. React does not have opinions about what technology you use to represent your problem space or store data (models) or how you turn user input into commands for models and views (controllers). At Revelry, we use React as our View framework, and we use Backbone for Models and Controllers.

(There are people out there who use React differently– e.g. using React to make routers or controllers, but most people only use it for views and that is where you should start.)

React components have state

Each UI component will have one or more states which it will display differently. React components store their state information in a property calledstate. In response to events (e.g. user input, model events or signals from a central dispatcher), you change your state, which React uses to change the UI.

  • state is for internal and private state. props is for data passed down by the parent component.
  • I repeat: your component is not a model. You will pass down models to be displayed or edited by components, but your
    component itself is not a model. Business data or logic sitting directly in a component is an anti-pattern.
Data flows (mostly) in one direction

Many other modern JavaScript frameworks have two-way binding. In two-way binding, data automatically flows from parent to child elements and vice-versa. React follows one-way binding– data flows from parent to child elements, unless you explicitly pass the data back to the parent.

Forget about manipulating the DOM

You do not directly manipulate elements with React. If you are using React, forget the jQuery model of UI– selecting an element, adding/manipulating/deleting nodes, and then writing these changes back to the DOM. Instead, you will be declaring how state and props map to display elements. Think “template” or “blueprint”, not “step-by-step assembly
instructions.”

(React has some methods for directly working with the DOM, but you should only use these for interacting with less enlightened code.)

JSX looks like HTML, but it isn’t

JSX scares a lot of people off from React. JSX looks vaguely like HTML that you put in your JavaScript methods. JSX is not really HTML. JSX is a compact way of calling a bunch of React components that is processed into plain old
JavaScript. For example, this:

render = function () {
        <section>
            <HelloWorld />
        </section>
    }

becomes this:

React.createElement(
      "section",
      null,
      React.createElement(
        HelloWorld,
        null
      )
    )

(Sidenote: section here is not even an HTML element. It is a React built-in component which happens to make a section element when rendered. React provides similar built-in components for almost all HTML5 elements.)

Where do I go from here?

Now it should be easier to grok React and its documentation. You could jump in and try creating a simple application. If you want to do some more research, here are some resources I recommend:

Revelry is a Custom Software
and Digital Design Studio.

We practice Agile development methodologies to build Innovation Sprints and Custom Products.

Meet the team!

Keep in touch by subscribing to CODING CREATIVITY.

More Posts by Robert Prehn: