React is a bunch of JavaScript code. That’s it. This code is bundled into a library that developers import into their projects and they can use it to help build their software.
The whole point of React is to build user interface (UI) components. By creating these UI components, developers can reuse them throughout their applications.
You can think of these components as modules or building blocks. Put enough of these together, and you’ve got yourself an application.
UI components are what you use to create everything you see on a web page in React.
You can display webpages any number of ways. What sets React apart is its ability to dynamically change the webpage based on the underlying state of its components.
State
State, in React, refers to the information tied to your components. By having components with state, your UI becomes dynamic and can respond to changes in state.
For example, suppose you were representing a person in an application, such as an enrolment application. In this case, the state object could contain that person’s details like name, phone number, star sign etc.
Or if you were writing a card game, the state could include whether the card is face up or face down.
As you change the state of a component, components get constructed again (more on this later). React effectively redraws the component with the new data in constructing the component again.
Using our previous card example, reconstructing the component would draw the card face up if the original state had a card face down and the new state had the card face up.
React will sit silently in the background, waiting for the state to change, and then spring into action to reconstruct the components it needs to based on the state change. This is what makes React so clever, the ability to only try to redraw what has changed and leave the rest of the site alone.
That’s all fine and good, but how does React know when to redraw a component?
Reconciliation
Data in the DOM (Document Object Model) is webpage data in its raw form and all browsers know how to work with the DOM and use this knowledge to draw a webpage to a screen.
Firstly, React keeps a virtual DOM. This virtual DOM is the virtual representation of the UI at any given time in the same way that the DOM is the concrete representation of the UI. Secondly, React looks at the virtual DOM and DOM via a reconciliation process to determine if React needs to update the UI. It is the DOM that React then alters to represent this new view if the UI needs to be updated.
Props
While state can help make your application dynamic, props allow you to build components that can be changed by delivering different information from a component’s parents.
For example, suppose you had a canvas as a parent component and a square as a child. In that case, the parent component could specify that the square is four units x four units in size and is red.
Another canvas, though, could specify that its child square component is blue and only one unit x one unit in size.
The power of props here is that, as long as the square component knows how to draw itself based on size and colour, we only need to write the square component once and any parent of a square component can specify how it wants the square to look.
At this point, having an understanding of what React essentially is, how it works, and the main concepts of state and props, you are ready to look at the code that makes up React components.
JSX
You write React components in JavaScript (mostly). What’s more, you can use regular JavaScript functions with additional markup features that allows developers to describe the component. JSX is the mixing of markup and JavaScript.
JSX is a syntax extension for JavaScript. The idea is to allow developers to write JavaScript syntax when defining the state or properties of components whilst mixing in HTML-like markup to describe the UI elements.
This can be a bit overwhelming, so let’s look at a simple component written in JSX.
function Card({suit,value}) {
let suitIcon = '';
if (suit === 'hearts') {
suitIcon = '♥︎'
}
else if (suit === 'diamonds') {
suitIcon = '♦︎'
}
else if (suit === 'clubs') {
suitIcon = '♣️'
}
else if (suit === 'spades') {
suitIcon = '♠️'
}
return <>
<h1>{suitIcon}</h1>
<h2>{value}</h2>
</>
}
We can break down this component from top to bottom.
- The function name is the name of the component. So Card is the component name.
- {suit, value} are the props that are being given to the Card component
- Lines 2-14 are conditional statements. They take the suit variable and populate a new variable called suitIcon with the emoji representing the suit
Breaking Down the JSX
Up until this point, the whole function is pure JavaScript. The return statement makes things more interesting.
- Lines 15-18 are JSX. It is a mix of JavaScript and HTML
- The <h1> and <h2> tags are plain HTML tags
- The text between the braces is JavaScript. {suitIcon} is translated into the text inside the variable suitIcon
This example shows how you can write one component that will display differently purely based on the props alone, even without state.
It is essential to mention that web browsers would not know how to display the above code. Something has to translate the above function to plain JavaScript, so the browsers know what to do with it.
Babel
The Babel library transposes the JSX code in a React application to plain JavaScript. The most common use of the Babel toolchain is to convert modern JavaScript code into a backwards-compatible version of JavaScript that any browser can run.
In the case of React, Babel can transform JSX into this backwards-compatible JavaScript.
Running the above Card component through the Babel toolchain, we end up with this:
You can see that everything above the return statement has remained the same. The return statement is no longer of the JSX syntax but plain JavaScript.
You will also notice calls to functions that didn’t previously exist. For example, React.createElement was not part of the original code, but Babel has inserted this for you.
The React.createElement function does exactly what it sounds like. It creates an HTML element based on your JSX. You can see in the image above that there are three calls to createElement. The first creates the fragment <>, and the next two create the headings <h1> and <h2>, respectively.
Putting it all together
Knowing the individual pieces that make up a React app is helpful. Still, it is often difficult for a new React developer to understand the build process.
The pieces of this process are pretty simple. Nonetheless, they can be hidden away when developing an app using one of the starting point code generators like create-react-app.
The process is essentially this:
- Write your components in JSX.
- Have a root component, often called App, that all other components are nested underneath.
- Have a process that converts the JSX, JS, CSS and HTML of your application into a bundled JavaScript file (often named bundle.js)
- Deploy this JavaScript along with your static files (images, CSS and an HTML page to act as the entry point to the React application)
The above list is only an overview of what needs to happen. Many of these steps come bundled with create-react-app. Still, new React developers must understand that no magic is happening when building a React app.
Don’t forget to check out my React page here which contains links to common concepts and examples in React.
Also, you can follow me on Twitter/X here! And now, mastodon: @bernieslearnings@mastodon.social