In this article, we're going to take a quick look at the React templating library from Facebook. It's an extremely popular project, and I've been using it for some of my side projects. In fact, React powers the preview app for my Rainglow project!
Don't worry PHP guys, I haven't given up on PHP, I actually use a range of different languages. Use the tool most suitable for the problem you're facing!
We're not going too deep into React in this article. Instead, we'll take a look at a few React concepts, so that you'll know what those fancy-pants Javascript developers are talking about. Let's get going!
JSX
The first thing that's going to strike your attention if you look at React code, is that some HTML has snuck into the Javascript. Don't worry, it has permission to be there! Just take a look at this example.
someJsx => {<div>Hi there!</div>}
You see, we're not actually writing Javascript, we're writing JSX. It's very similar to Javascript except that you can store HTML in variables, and return HTML from functions.
You can see that my syntax-highlighter has also been shocked at the HTML present in the Javascript source. Sorry about that, I'll see if I can update it to support JSX later!
JSX takes some getting used to at first, and you'd be among others if at first, you look upon it with distaste. However, after a while, it will grow on you. Trust me.
JSX is a format that is transpiled to Javascript. That means that there's a build process that turns JSX files into native Javascript files so that they can run in the browser.
Components
In the React world, we like to break things down into modular components. For example, if we were writing an email client, we might have one component for the email list, one for an item in that list, one for the preview pane, one for the toolbar, etc, etc.
Keeping things modular makes them easy to understand, extremely re-usable, and simple to test.
Here's an example of a React component.
import React, { Component } from 'react';
class Hello extends Component {
render() {
return <div>I am a component!</div>
}
}
This component would simply render a <div> tag with some text inside. You'll notice that the imported dependency React isn't used! Well, actually it is! It's used when the code is transpiled to native Javascript, and so it's a requirement of any JSX file.
You can use other components inside React components. Here's an example.
import React, { Component } from 'react';
import Hello from './Hello';
class Welcome extends Component {
render() {
return <div>
<Hello />
</div>
}
}
Here we've nested our Hello component inside the Welcome component. This way, we can build hierarchies of components. This is important because all react applications start with a top-level component, and then break down into smaller components.
Props
Props are component properties. You can pass them into your components when using them. Let's change our Hello component to use a prop.
import React, { Component } from 'react';
class Hello extends Component {
render() {
return <div>Hello there {this.props.name}!</div>
}
}
Here we're using a prop called name that we access from this.props. We can use { braces } to output Javascript statements within the template portions of our JSX code.
Now let's alter the Welcome component to pass in a name prop.
import React, { Component } from 'react';
import Hello from './Hello';
class Welcome extends Component {
render() {
const myName = 'Dayle';
return <div>
<Hello name={myName} />
</div>
}
}
We pass props into React components in a similar fashion to how you specify attributes on HTML elements. Here we're passing the myName constant into the component as the name prop.
Our Welcome component will now greet by name! Of course, we could pass any name into the component, making our Hello component re-usable.
State
React components can have state. They use this state to store information that's valuable to them. Let's take a look at an example.
import React, { Component } from 'react';
class Hello extends Component {
setName() {
this.setState({name: 'Dayle'});
}
render() {
return <div>
<p>Hello there {this.state.name}!</p>
<button onClick={this.setName.bind(this)}>Set name!</button>
</div>
}
}
In this example we've added a button with an onClick event that calls a setName() method on that component. Don't worry too much about the bind() part, that's just a way of changing the scope of the function, and is a handy little Javascript feature.
Initially, when the component renders it will show 'Hello there !' without a name, this is because this.state.name is undefined. If we click the button, our code will call this.setState() to update the state with a name, and the component will re-render to show 'Hello there Dayle!', updating in real time.
Why do we need to use setState() instead of setting this.state directly? Well, React observes the state object, and using the setState() method triggers all the observers, to let React (cleverly) decide which parts of the interface to re-render. It's extremely efficient at doing this! I'm not going to explain why, because that would over-complicate this introduction to the library!
The object literal that you hand to setState() will be "merged" with the state object, overwriting existing keys and values.
What's more useful, is that if the state is passed down the chain into nested components, React is smart, and will re-render the parts of these components that need to change too!
Summary
What's interesting, is that's basically it for React. Sure, there are a bunch of other features, but what you have here is enough to build a dynamic application for the web. There are plenty of other libraries that you can bring in to do lots of fancy things! Here are some of my favourites.
So you see, React isn't all that complex. Unfortunately, as for lots of Javascript libraries, it's the tooling and build processes that sit around React that complicate matters. They aren't entirely welcoming to the beginner Javascript developer.
For that reason, if you'd like to play with React, I'd recommend using create-react-app.
Use NPM or yarn to install the library.
yarn global add create-react-app
Now use the script to create a directory containing a fully bootstrapped React application to use as a base for your project.
create-react-app my-project
cd my-project
yarn start
This will open your project in a web browser. Go ahead and edit src/App.js to see what happens. You'll find that you have hot-reloading, and so your changes to the react project will trigger instantly. It's also got a bunch of useful debugging options. I highly recommend it!
Enjoy playing with React! Let me know if you'd like to see more Javascript or React content.
If you found this article useful, then please leave some feedback. Also, I'm currently working really hard on a side project, it's called Rainglow and it's a collection of hundreds of syntax themes for loads of software! If you can spare a moment, please share it with your friends! That would be awesome. :)
If you'd like to learn about PHP or Laravel, then there are a bunch of books that I've written on those topics.