One hour with React

Welcome to the first post in Bytesized’s free course “A year with React.js”. In this series, we’ll explore the React JavaScript framework, beginning with the concepts you need to know for your first hour with the framework. In later parts of the series, we’ll touch on increasingly complex aspects of being a React developer. As you might expect, the concepts and “gotchas” worth exploring after working with the framework for an hour, one week or one month differ greatly. This post covers your first hour with React––initializing components, and providing data via props and state.

React components are the building blocks of a React.js application. As you write more React code, you’ll find that it’s easiest to think in components: it’s an Arrival-esque “rewiring” of your brain, where you begin to internally modularize your planned code by default.

A React component is simply a JavaScript function that ultimately renders to the DOM. In React.js, this means rendering HTML; in React Native, this could mean rendering to the iOS or Android viewport. Note that the rendering component is not strictly defined––this is an advantage of the platform. React intentionally separates this part of the process from writing actual React components, which allows React to be used to build a variety of interfaces that aren’t necessarily web-related, like VR apps.

Depending on your toolchain, you may use Facebook’s JSX tool to write HTML-like code inside your JavaScript, or forego it for entirely JS-based functions. For most React components using JSX and ES6, a simple React component looks like this:

This simple React component returns an HTML div container, with a primary header of “Hello, world!”. This is a “static” component––it doesn’t take any input and doesn’t perform any updates. In another post, we’ll explore how React components update via lifecycle methods; for now, let’s look at providing “input” and building more dynamic components.

In examining React components, it can be useful to separate the important facets of it into internal and external categories—for instance, what can be passed in to a component, and what can a component manage itself? Let’s begin with external, and see how initializing a React component can work.

External to the component

Given what we currently know about components, we would be unable to define a NameComponent that returns “Hello, (name)”. The name variable must be passed into the component, and the component must store some kind of “state”.

React components accept external properties in the form of “props”. Props can be of any form—however, most developers will insist on keeping their props as simple JS types: strings, numbers, arrays, and objects. Initializing a component with a name prop takes the form of:

<NameComponent name="Kristian" />

Given the name prop, we can render it in the component using this.props:

Any number of NameComponent components can be defined, each with a different name. Each component operates independently, because the name prop has been provided with an entirely different value.

Internal to the component

Components can also internally store state. Instead of passing in a name prop, we can set an initial state and use it to display a name:

Given this definition, no props are required to initialize the component. In fact, doing so will be useless, as the prop would never be used.

By using a React component’s internal state, we can provide simple “dynamic” functionality, and update a name value––for instance, by clicking a button:

The updateName method, which fires when the button element is clicked, changes the internal state to have a name value of “George”. Again, each React component has independent state, so initializing multiple components means that each button can be used to update state separately.

All React components are, fundamentally, a combination of structure (JSX logic) and input (props and state), with the ultimate goal of rendered output (HTML, React Native views, etc). As you move into more complicated React components, the way that these pieces fit together may change slightly: the popular Redux data library, for instance, foregoes component state entirely, preferring to store application state at the global level and passing information only as props.

Intermediate and advanced components may substitute rendering HTML for rendering more components: a Header component, for instance, could be comprised of various MenuItem components, as opposed to raw li elements or something similar.

Want to receive this course in your email inbox? Join the A year with React.js mailing list–it’s instant and easy.

Bytesized offers technical training for companies. Contact us to schedule React.js training for your team today.

Leave a Reply

Your email address will not be published. Required fields are marked *