This video is available to students only
  2. Beginner's Guide to Real World React
  3. React - A modern UI library

Getting Started with React - Building Your First App

Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.

Building the Greeting App#

Introduction#

Hello and welcome to our very first React demo, as part of the Beginner's Guide to Real World React course.

The first real example we're going to build is a really simple greeting app that’s going to accept a name in an input box and output it back as part of a welcoming message.

Adding Parcel bundler#

Now you can just use React by loading it using a script tag from a package repository like unpkg. However, what you'll find with most real-life React projects is they will be adding the React libraries over npm and usually using some sort of code bundler such as Webpack, or even the Create React App starter project (which uses Webpack under the hood).

We're going to do something similar so you get familiar with using a common means to build and run a React project. For this, we’re going to use Parcel JS.

Parcel JS is a really simple code bundler that’s very much like Webpack but without a lot of the complex configuration and setup. In its own words Parcel JS is a ‘blazing fast, zero-config web application bundler’.

You’ll see I’ve got the Parcel JS website open (https://parceljs.org) and we’re going to head over to the ‘getting started’ section. We need to install it globally onto our machine and you can do that by using the commands on this page:

npm i -g parcel-bundler

Or

yarn -global add parcel-bundler

Once you've done that, we'll close this window up and we'll open up a brand new project in VS Code.

Adding React to the project#

We’ve got a shiny new, empty folder that we’ve opened in VS Code. I’ve got a .gitignore file and a readme in here because I’ve got this connected with a git repository, but we’re not going to use those files and you can ignore them.

Because we’re using Parcel, we don’t need to do any configuration to make it work, but we do need to add React to our project.

Open up your terminal in VS Code and you’ll see that it’ll open in the current working directory of our project. From here, we’re going to do three steps to get our project up and running with everything we need:

  1. Initialize our project

  2. Add the React dependencies

  3. Add a shortcut script to build and run our code

Initialize the project#

The first step is to initialize our project with a package.json file. To do that we’re going to run the command:

yarn init -y

We add the -y flag which will automatically answer yes to all the initialization questions such as, ‘who's the author?’, ‘what's the license?’, and those sorts of questions that we don’t care about for our example.

Add React dependencies#

Next, we're going to add React to the project. There are two packages we need, React, and React DOM. React is the star of the show and includes the core React library. React DOM is a secondary package that is responsible for rendering our components to the DOM in the browser.

Back in our terminal type the following command to add both packages to the project:

yarn add react react-dom

Yarn is well cached and very fast so both of those packages should be added to the project in no time at all.

Add scripts for building and running the code#

The final part of our setup involves the package.json file. Notice the react and react-dom dependencies in there.

Now, once we’ve built our app, we need to call Parcel to bundle everything up and run it. It’s not a huge chore, but we can add a simple shortcut to help us out.

In our package.json file, add a new property, ‘scripts’ and add a new command property under this and call it ‘start’. Next, add the command:

parcel index.html —open

The new part of the package.json file should look like this:

What we’ve just written there is a terminal shortcut that will allow us to type yarn start and have our Parcel command open our starting file, and the --open flag tells Parcel to open the running code in a browser once the files have been compiled and Parcel’s development server is up and running.

Parcel works by giving it an entry point, in this case, our index.html file which we’ll be building next. From there, Parcel works out which files it needs to include in the bundle based on your imports and file references.

Coding the project files#

Now onto the exciting part: building out our example. Now for smaller projects like this, I like to just start by creating all the files we need and then filling them in as we go along.

For our greeting app, we're going to need to create four files. So let's create them now. We'll need:

  • A styles file, called styles.css. We'll just have some basic styles in there just to make our app look slightly more interesting than the out-of-the-box HTML.

  • Our Parcel starting point, index.html. This is going to be the very first entry point that Parcel is going to look for to render our app.

  • A starting point for the JavaScript, which will be index.js.

  • And finally, our main React component, which we'll call app.js. This is our main entry point for the React side of things.

Once we have the files created, it’s time to fill them in. Starting with our styles.css file.

Styles.css#

Our styles file isn’t absolutely essential at this point, but it’s nice to have a few basic styles available to improve the built-in look and feel that browsers give us by default.

You can see I've copied and pasted some really simple styles in there that just affect the body, the font size, and the line-height. Later on, we’ll be adding an input and a button to our app, so I’ve also added some nice styles for those.

Give that a save and we’ll move onto our entry point, our index.html file.

Index.html#

The next thing we want to do is add some HTML to our index.html file. I'm using Emmet that comes with VS Code, because it allows me to type the name of the HTML elements, like ‘head’ or ‘title’ and hit the tab key, and Emmet will handily just output the complete HTML element’s tag for us, rather than having to type it all out by hand. It’s a nice little timesaver.

So we’ll add the HTML tag first. Inside that we’ll add a <head> tag, and within that, we’ll add a <title> tag and I’m going to give it a title of ‘My first React example’.

We’ll also need a <body> tag, so we’ll add that. Within the <body> tag, we need two things:

  • Some kind of element to render our React output into.

  • And a script tag that references our JavaScript entry point, index.js (which we’ll create once we’re done here).

For the first one, I'm going to add a <main> element and give it an ID of ‘output’. Finally, we’ll add our <script> tag that references index.js.

What happens here is that when Parcel runs, it looks in this file first for any script tags. When it finds this one pointing to index.js, it looks in there to see what other JavaScript files it needs to import and chain together to bundle up into our working app.

With that done, we’ll save the file and move on to the main JavaScript entry point, the index.js file.

Index.html contents#

Index.js#

Inside our index.js file is where the magic happens. It’s the first place that we really set up our React app to load and inject it into our HTML page. This is going to be quite a small file where we’ll add our very first piece of React code.

We’ll need to do a few things inside this file:

  • Import React

  • Import our main App component, the starting point for our React app

  • Use React DOM to render our App to the browser

Importing React and the App component#

First off, we’ll need to import two React packages: React and React DOM. So let’s do that now

It's important to note that whenever you're doing anything with React, you must import it at the top of the file. This is what’s known as bringing React into scope. For this file, we also need the React DOM package, which is responsible for rendering our React code to the browser.

Finally, we'll import our App component, which will look after greeting the user.

 

This page is a preview of Beginner's Guide to Real World React

Start a new discussion. All notification go to the author.