The first two articles in this series were heavy on discussion. In today's session, let's dive into some code and write our first React app.
Let's revisit the "Hello world" app we introduced on day one. Here it is again, written slightly differently:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var app = <h1>Hello world</h1>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
</script>
</body>
</html>
Loading the React library
We've included the source of React as a <script> tag inside the <head> element of our page. It's important to place our <script> loading tags before we start writing our React application otherwise the React and ReactDOM variables won't be defined in time for us to use them.
Also inside head is a script tag that includes a library, babel-core. But what is babel-core?
Babel
Yesterday, we talked about ES5 and ES6. We mentioned that support for ES6 is still spotty. In order to use ES6, it's best if we transpile our ES6 JavaScript into ES5 JavaScript to support more browsers.
Babel is a library for transpiling ES6 to ES5.
Inside body, we have a script body. Inside of script, we define our first React application. Note that the script tag has a type of text/babel:
<script type="text/babel">
This signals to Babel that we would like it to handle the execution of the JavaScript inside this script body, this way we can write our React app using ES6 JavaScript and be assured that Babel will live-transpile its execution in browsers that only support ES5.
Warning in the console?
When using the
babel-standalonepackage, we'll get a warning in the console. This is fine and expected. We'll switch to a precompilation step in a few days.We've included the
<script />tag here for ease of use.
The React app
Inside the Babel script body, we've defined our first React application. Our application consists of a single element, the <h1>Hello world</h1>. The call to ReactDOM.render() actually places our tiny React application on the page. Without the call to ReactDOM.render(), nothing would render in the DOM. The first argument to ReactDOM.render() is what to render and the second is where:
ReactDOM.render(<what>, <where>)
We've written a React application. Our "app" is a React element which represents an h1 tag. But this isn't very interesting. Rich web applications accept user input, change their shape based on user interaction, and communicate with web servers. Let's begin touching on this power by building our first React component.
Components and more
We mentioned at the beginning of this series that at the heart of all React applications are components. The best way to understand React components is to write them. We'll write our React components as ES6 classes.
Let's look at a component we'll call App. Like all other React components, this ES6 class will extend the React.Component class from the React package:
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
All React components require at least a
render()function. Thisrender()function is expected to return a virtual DOM representation of the browser DOM element(s).
In our index.html, let's replace our JavaScript from before with our new App component.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>
However, nothing is going to render on the screen. Do you remember why?
We haven't told React we want to render anything on the screen or where to render it. We need to use the ReactDOM.render() function again to express to React what we want rendered and where.
Adding the ReactDOM.render() function will render our application on screen:
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
Notice that we can render our React app using the App class as though it is a built-in DOM component type (like the <h1 /> and <div /> tags). Here we're using it as though it's an element with the angle brackets: <App />.
The idea that our React components act just like any other element on our page allows us to build a component tree just as if we were creating a native browser tree.
While we're rendering a React component now, our app still lacks richness or interactivity. Soon, we'll see how to make React components data-driven and dynamic.
But first, in the next installment of this series, we'll explore how we can layer components. Nested components are the foundation of a rich React web application.
Learn React the right way
The up-to-date, in-depth, complete guide to React and friends.
Download the first chapter
