Have you found your way to React and need some help to get started? When I first started out with React I was confused and struggled to understand the basic concepts. Eventually it started making sense and I’ve had a great time playing around with React ever since.

This beginners guide is for those looking to get started with React develpoment. The guide will help you get a basic understanding of React and guide you through the process of building your first React application.

The guide is split into a two-part series.

Topics covered in Part 1:

  • What is React? - We’ll familiarize ourselves with React
  • Setup and Installation - We’ll go you through 3 different options to get started with React.
  • Create React App - Once all neccessary installtions are made, we’ll create our first React applications.
  • Editing React App in Code Editor - We’ll open up the React project in a code editor to make the first changes.

Topics covered in Part 2:

  • The JSX syntax
  • Components
  • Data handling with Props and State

What is React?

React is a open-source project created and maintained by Facebook (with the help of the React community), with over 130,000 stars on GitHub.

“React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.” - reactjs.org

I understand if this is a bit confusing, let’s break it down…

React is a JavaScript library used for creating User Interfaces (UI). Components are custom UI elements which you can create and reuse throughout your application. This enables a smooth and efficient way to build user interfaces while not working against the DRY-principle (Don’t Repeat Yourself). We’ll be covering more details about components later and even create our own custom components.

React was developed with a unique approach - “learn once, write anywhere”. The intention of this approach is that developers should be able to develop applications for different platforms, once they’ve learned the fundamentals of React. By learning the basics of React, you’ll have the fundamentals required to get started with mobile development for both iOS and Android.

To summarize, React is a popular JavaScript library for creating simple and complex User Interfaces through custom components.

Goals

  • Get a basic understanding about key concepts of React development, such as components, JSX, prop and state.
  • Build your first “Hello World” React application which uses the above mentioned concepts.

Before we start

This tutorial doesn’t require any previous knowledge of React, but some former programming experience will be helpful in the learning process. Recommended is to have some previous on the following:

  • Basic knowledge of HTML & CSS
  • Basic knowledge of JavaScript (preferably also ES6 syntax and features)
  • Basic familiarity with programming concepts like functions, variables, objects and arrays.
  • Basic familiarity with the command line interface (CLI)

If you don’t have any former experience of React or programming, don’t worry. You will be able to follow along as a complete beginner and by the end of the tutorial, have everything setup on your computer to start playing around with React.

Now, let’s start writing some code!

Setup and Installation

There are a few ways to get started with React and we’ll be covering three different options.

1. Online Playground

If you’re just interested in playing around with React without any local setup, there’s online code playgrounds out there for you. There’s no installation or setups required so you can start writing React code wright away. Try out the Hello World template on CodeSandBox.

2. Static HTML File

The second option allows you to start writing React applications through your own text editor on your computer. This is not a common way of working with React, but it’s an easy way of gettting started and also gives you an idea of how it works.

We’ll start by creating a basic index.html file and loading in three different CDNs inside the head;

  • React - the entry point to the React library
  • React DOM - provides DOM-specific methods
  • Babel - a JavaScript compiler, let’s you to use the latest generation JavaScript in old browsers

Inside the body, we’ll add a div with the id called root, which will act as the entry point for our application. The last thing is to add a script where we’ll soon be placing our custom React code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Hello World</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will be here
    </script>
  </body>
</html>

Don’t worry if your confused by all this code, this is just some basic setup required for React.

Now, we’re going to add our first code of React. We’ll be using the render method from the React DOM, which takes an element and renders it in a specified place in the DOM.

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));

Basically, we are telling the ReactDOM render method to place the element <h1>Hello, world!</h1> in the root div. Lets add this line of code to the index.html file, here’s the full code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <title>Hello World</title>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById("root"));    </script>
  </body>
</html>

Now you can open the file in your browser, where you should see the Hello World! title that we just added.

This setup is only recommended for testing purposes and not for actual development. Let’s move on and set up our local development enviroment so we can start creating React applications.

3. Local Development Environment

There are a few steps required for setting up our local development environment, and it’s a bit more technical than the previous setup. We’ll be using the command line interface (CLI) throughout this section, it’s often referred to as the terminal. If you’ve never used it before, it might be useful to take some time to familiriaze yourself with it. But don’t worry, we’ll guide you through the process and explain what we’re doing.

We’ll be using Create React App which is the recommended way to start building React applications. With just a one-line command, it creates a React application without the need for any build configurations. Under the hood, it sets up a development environment with latest JavaScript features, is optimized for production and comes in a developer friendly environment. You’ll soon see all the amazing features that comes with this environment.

Before we create our first react application, we need to install:

  • Homebrew - A software management tool which makes it easier to install software on Mac
  • Node.js - A JavaScript runtime environment, which includes everything required for running a program written in JS.

Installing Homebrew

The recommended way to install Node.js, is using Homebrew. It might seem like a lot of installations needed, but this is a one-time setup and the struggle will be worth it in the end.

How to install Homebrew on your computer:

  1. Open your terminal.
  2. Run the following command to check if you already have Homebrew installed. You should see “Homebrew” and a version number, e.g. Homebrew 1.7.7. If you have it installed, you may skip steps 3 and 4.
brew -v
  1. Install HomeBrew by following the instructions for your operating system (Mac, Windows or Linux).
  2. When you have Homebrew installed, repeat step 2 to verify that it’s installed on your computer.

Installing Node.js

After Homebrew has been installed, we can proceed to installing Node.js.

How to install Node.js on your computer:

  1. Open your terminal.
  2. Run the following command to make sure you have the latest version of homebrew installed.
brew update
  1. Next step is to run the following command in your terminal in order to install Node.
brew install node

This command will install both Node and npm, which is the world’s largest software registry of open source projects. As a React developer, you will probably come across npm a few times.

  1. Verify the installation of Node.js by running the below command. React requires version 8.10+.
node --version
  1. Verify the installation of npm by running the below command. React requires version 5.6+.
npm --version

Create React App

Now that we have everything installed, we’re finally ready to create our first React app.

How to set up Create React App:

  1. Open your terminal.
  2. Run the below command in your terminal one directory above where you want your React application to live. hello-world-app is the name of the applicaiton, but you can call it what you want.
npx create-react-app hello-world-app
Note: npx is not a typo. It's a tool for executing Node packages and comes bundled with npm version 5.2+.
  1. Move to the newly created directory once it has finished installing.
cd hello-world-app

Remember earlier when said that create-react-app is a one-line command thats comes pre-configured with everything needed to create a React application? Well, it acutally comes packed with a live development server that is set up and ready to use.

  1. With the following command, we can launch our new React application in our development server.
npm start

When running this command, a new window with your React app will apear in your web browser at localhost:3000.

New React App

You have just set up your first React application on your local development server! That wasn’t so hard, right?

The create-react-app command takes care of a lot of things for us, for instance it uses Babel and Webpack. We mentioned Babel earlier in the tutorial, but Webpack might be new for you. We won’t be diving into this now, you will learn it sooner or later as a JavaScript developer. The important thing to know, is the fact that there is a lot of technology set up behind the scenes for us.

Editing React App in Code Editor

Okay, so we have our local development environment set up. What now?

Let’s open the project in a code editor so we can start to make some changes. Visual Studio Code is a popular choice among React developers, but you may use whichever you prefer.

If you look at the project structure, you’ll notice the /src, /public and /node_modules folders, along with some other files. In /node_modules, you’ll find the packages installed by npm (take a look in the directory and you should see plenty of packages). The /public folder contains the HTML template of our app in the index.html file. As before, React will add code into <div id="root"></div> through the below function in the /src/index.js file.

ReactDOM.render(<App />, document.getElementById("root"));
Note: Webpack doesn't read the public folder and it will therefore not be compiled during runtime. It's okay if you don't understand what Webpack is or does. The important thing to know is that you can't put any JavaScript, CSS or other assets in the public folder.

The /src folder is going to be our working directory and is where we’ll put all our React code. Lets make our first change to the app!

Making the First Changes

Go to the /src folder and open the app.js file. Find the following line of code.

<p>
  Edit <code>src/App.js</code> and save to reload.
</p>

Here you can make some simple changes by editing the text. Below we change the text to “My First React App”.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>My First React App</p>        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

Once you save the file, open your browser at localhost:3000 to see the updated text.

Edited React App

Wrapping up

As you might see in the app.js file, there’s a few things going on that might be unfamiliar to you. The XML-like tags is a special syntax called JSX, which is used by most React developers.

If you’re new to React and espacially web development, we’ve come quite far. You might be a bit impatient and thought that you had created a complex UI by now, I can understand if you just want to get started with the development. But we’ve covered some important steps like familiarizing ourselves with React and setting up our local development environment.

In Part 2, we’ll be covering more features of React, including JSX, components, state and props.

Please leave a comment if you have any questions or other thoughts to share. You may also contact me we any questions, or if there’s anything else you’d like to see on this blog.

Thanks for your time!