Getting Started with React: Lesson 3 of 14

Getting Something on a Page

Up Next

Creating Your First Component

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

There are lessons in this course. of learning!

Sign Up Now

Login to your account

Now that we have the project setup, let's get something basic on the page. Let's put a paragraph on the page with "Hello, world!" in it.

We need to download two new dependencies: React and React DOM. React is the library that handles the virtual DOM manipulation. React DOM handles the actual manipulations to the DOM in the brower. This is separated due to other implementations of React rendering such as React Native for native app development.

Install the dependencies with the following command:

yarn add react react-dom // npm install --save react react-dom

In src/app.js, remove the console.log call. Next we need to import React and React DOM into this file so we can use them. Add the following to the top of this file.

import React from 'react';
import ReactDOM from 'react-dom';

This will bring in the libraries we need. Next, we need to grab an element to use as the root of our project. Luckily we have one already on our index.html file. It has an id of app-container. So let's grab it.

const root = document.getElementById('app-container');

Now we have a container to put our application in. Now we will use ReactDOM to render a paragraph inside this container.

ReactDOM.render(<p>Hello, world!</p>, root);

First, we pass it some JSX. I know this looks like HTML, and that's the point, but it will actually be transpiled by the Babel compiler into regular JavaScript. It actually ends up looking something like this:

ReactDOM.render(React.createElement('p', null, 'Hello, world!'), root);

We could write all our code like it is above, but it's much easier to write it in JSX and let Babel handle the heavy work. It makes our code much easier to read and maintain in the future.

If you view the application in the browser, you will see "Hello, world!" displayed on the screen.

Now that we know how to put something on screen, let's create our first component!

Alex Sears

Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?