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.
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" />
name prop, we can render it in the component using
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:
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.