Code once, deploy everywhere.
That’s a lofty goal, but in the age of web apps (applications like the kind a user would install on a desktop or a smartphone, but that run within a web browser), this ideal is closer than ever. One of the most popular technologies for creating web apps is React.
What is React?
React is a JavaScript library created by Facebook and released as an open-source project in 2013. It is a set of features and technologies that makes creating dynamic web apps easier than writing them in vanilla JS. Facebook is created using React, or for another example check out Airbnb.
If it doesn’t impress you, consider the difficulty in displaying dynamic data for user-generated content and having it look beautiful. Every Airbnb stay has to display data specific to it, like photos, name, price, and so on. Searching for a place to stay has to retrieve all that information and put it into a list. Suffice it to say, this would be time-consuming – if not difficult – to pull off in vanilla JS.
If you want an introduction to the various features and technologies that make React so useful, keep reading.
JSX
JSX (JavaScript as XML) is a powerful programming language based on JavaScript and XML that makes writing React so much easier. Although JSX is not necessary to use React, it’s highly recommended due to its streamlined syntax for writing components (discussed later). For reference, see the following code:
That’s JSX, and it allows you to write HTML-like syntax while retaining the full power of JavaScript, like variables, functions and conditionals. It takes some getting used to (for instance, writing className instead of class in your JSX tag attributes), but the React documentation from Facebook is a great place to start.
One thing I should address that you’re probably asking is, “shouldn’t JavaScript and HTML be separated?” Well…yes and no. According to the old “separation of technologies” view on web technologies, that’s perfectly valid. But that argument starts to fall apart when we talk about the real best thing in React: Components.
Components
In the old days of web development, pages were coded by hand and they were static. The content you wrote into the page is the content the page displayed. Every list item, navigation link, news post, etc. were hand-coded as individual blocks of code, where one change necessitated changing every copy that you made. Manually.
Luckily, we now have components. Components are reusable blocks of code, usually representing content that’s displayed (as in the above examples). Because React is a library for JavaScript, components can also be purely functional, similarly to objects in object-oriented programming. But components are a life-saver, because you can have something like this:
[header component] > [nav bar component] > [6 nav items]
That’s my own way of representing a header component, which can be used on every page. Whenever the base component is changed, it changes on every page automatically. That component is made up of other components, like a logo, or in this case the navigation bar. That navigation bar then has 6 nav item components, which have the links.
That last bit is of particular interest, because it handily explains why we don’t separate our structure from our JS. Because, again, this is JavaScript, we can dynamically fill those nav items with the links to our sub-pages. Perhaps we have an array with the links, and every time the page loads our JSX gets all those links, pushes each one into a nav item component, and bam! We have a dynamic, reusable, React-driven header.
But now imagine other content, like Facebook posts or Amazon products (to my knowledge, Amazon doesn’t actually use React, but you get the point). As you scroll down the page, React looks up – for example – a JSON file to see if there’s anymore content to load. If so, it takes the requested objects and pushes the data out into a React component to be displayed.
That’s the power of React.
But we still have to grapple with data, which isn’t always as easy as you want it to be.
Grappling with Data
Data goes down.
That’s how any introduction to React’s data flow will start. Passing data from one component to its child is easy: you pass it as props (written syntactically as HTML attributes) and retrieve it as {this.props}.
Passing static data to a component for rendering is easy and not very fun. The real fun comes in with States. States are conditions of a component, like a log-in/out button that changes its functionality and text depending on whether the user is logged in or logged out. Functions like componentDidChange can even check for changes in a component and immediately render the change without refreshing the page.
But, as nice as that all sounds, there’s one problem: sending data up. Like I said above, data is sent from parent components to child components via props, not the other way around. It’s similar to the issue of variable scope, but React does have a way around it, with events.
Events work the way you’re probably used to in other programming languages: a trigger executes code. In React, events are used to send data from a child up to its parent. The parent component has functions that run when the child component triggers an event up to the parent, allowing it to take data from the child and display it.
Wrapping Up
I hope that this was a good primer on what you need to know about React, and why you should use it. As always, don’t forget to check out the rest of my blog.
For more information on React, and some quick tutorials to get you started, see the official website.
