All Articles

React Basics

Let’s get started with React, a javascript library for creating user interfaces. Here are the basics.

JSX and React Elements

JSX is syntactic sugar that looks similar to HTML or XML, and it allows developers to declaratively create user interfaces in React. Here is a simple example:

const basicElement = <h1>Hello World</h1>;

Using a JSX compiler (like Babel), JSX will compile to JavaScript objects that are nested like elements in a DOM, these are called React Elements. The previous example compiles to the following:

var basicElement = React.createElement(
  "h1",
  null,
  "Hello World"
);

Just like HTML, we can also nest JSX tags and use HTML-like attributes to achieve style and layout.

const nestedElement = (
  <div className="article">
    <h1>Hello World</h1>
  </div>
)

This declarative structure results in a slightly more complex output:

var nestedElement = React.createElement(
  "div",
  { className: "article" },
  React.createElement(
    "h1",
    null,
    "Hello World"
  )
);

In this case get two nested React Elements, each corresponding to their JSX tag and their matching attributes. Note that we did not use class since it is part of the HTML standard. JSX is its own separate thing, but it is meant to look familiar.

Now that we have React Elements, we can display them in the browser. We must specify an entry point for our root element, the element which holds our entire app together.

const App = (
  <div className="article">
    <h1>Hello World</h1>
  </div>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React will use our React Elements to populate it’s own in-memory version of the DOM; this is called the Virtual DOM. Whenever the Virtual DOM detects changes (like initialization), the actual DOM will be manipulated and Hello World wrapped around an h1 tag will be displayed on screen.

If we wanted to programmatically customize the string within h1, we can do this by passing props.

React Components

Passing props is just as easy as setting an attribute to an HTML tag, but first we must define a React Component that can receive props. Conceptually, components are the equivalent of a function, they take arguments, and return a React Element.

const Title = (props) => {
	const { text } = props;
	return <h1>{ text }</h1>;
}

const titleElement = <Title text="Hello World" />;

In this case Title is our component, all of the attributes assigned to Title are captured within props, like text. We can now use Title in our App.

const App = (
  <div className="article">
    <Title text="Hello World" />
  </div>
)

ReactDOM.render(
  <App />
  document.getElementById('root')
);

Summary

We learned JSX, a markup language that looks like HTML that when compiled creates React Elements. Elements are the basic building blocks which create React apps. We also looked into React Components, functions that take user specified props and return React Elements that use those props. Finally, we created a React app, albeit a very static app.

To add interactivity we will look into Stateful and Stateless components next.

Published 16 Nov 2016