React Fundamentals

Let's learn React to the core and how it works. This guide will walk you through everything you need to know when getting started with React.

We will go through the "hows and whys" behind the basic concepts.

Prerequisites

Here are some of the few things you will need to be familiar with if you want to get the most out of it.

Basic HTML

In React, we use what's called JSX to create the HTML for our webpages. We'll explain JSX in depth later, but for now make sure you have a good foundation when it comes to HTML:

• How to structure HTML (how to nest elements and so on)
• HTML attributes (like "id", "class", "onclick" and so on)

Basic Javascript

React is a JavaScript library, so it makes sense to know JavaScript before learning React, right? Just the bare minimum is enough:

• Variables, functions, data types
• Arrays and Objects
• ES6 Syntax (using let & const, Arrow Functions, Destructuring Assignment, classes, importing/exporting, etc)
• How JavaScript is used to manipulate the DOM

Development Environment

The first thing we're going to do is set up a development environment. If you've already setup Node.js and installed Visual Studio Code (or your preferred IDE), you can go ahead and skip to the next section.

Node.js

Go here and download the right package for your OS (Mac/Windows/Linux)

When the installation is complete, type this in terminal:

node -v

Creating React App

To create a React Project, all we need to do is run a command within our terminal:

npx create-react-app my-app

This creates a project for us called "my-app" and sets everything up automatically. Pretty cool.

Notice the create-react-app output has told us what we need to do to start the app. Go ahead and run the commands in your terminal:

cd my-app
npm start

This will start a development Server for you.

Node Modules

This is where our packages go that we install through NPM (Node Package Manager). If you’re not familiar with NPM, it’s a glorious place where we can share code (usually open source) that other developers can use instead of writing their own.

Instead of using script tags like we do in traditional HTML, we install these modules as part of the application. Then, we use an import statement to access the code from that module. We’ll see this in action later.

Public Folder

This is where our bundled code goes. When we are ready to deploy our app, we run a ** build script**and the final files go in here. This will typically be our HTML, JavaScript, and CSS files. This is the folder we dump onto a web server somewhere, so that we can let users see our app via a URL

Index.html

The index.html is the entry point, or the first thing the web browser loads when a user navigates to the URL hosting our app.

If we look at the file, it’s a just a normal HTML file with normal HTML stuff that you will hopefully be familiar with. If we look at the body — it’s empty. React will dynamically convert our React code into HTML and load it here, in the “root” div.

With that out of the way, let’s look at the juicy parts — the code.

Our First Component

Open up App.js from the project tree. This is the Main component in our application. This is the first component to get rendered. It’s the “big cheese” of components.

The first thing we’re going to do in our big cheese component is delete everything, and build our very own component from scratch, to better understand what’s going on.

Now that we have a nice blank slate to play with we will start by importing react. This brings the React library into scope and gives us access to all the lovely features:

import React from "react";

Next we will declare a function. We’ll use ES6 arrow functions here. That’s more or less what a “component” is — a function with some logic and markup.

const App = () => {

}

export default App;

Within our function we want to write return(). This is what get’s returned from this component, and contains our markup which gets converted and rendered as HTML.

import React from "react";

const App = () => {
  return (
    <div>
       <h1>Hello React World</h1>
       <h2>
             This is our first React App - isn't it marvellous?!
       </h2>
    </div>
  );
}

export default App;

Now you’re probably thinking, "Woah! HTML in a function? What is this madness?" Even though it looks like HTML, it’s actually something called JSX (JavaScript XML). This basically allows us to mix JavaScript and HTML together.

This might seem a bit strange. We originally learned front end development by separating our HTML and JavaScript (and even CSS). Yet JavaScript and the way we design apps has evolved, and keeping everything together in the same “component” makes it easier to maintain and reuse our code.

Let’s see this in action. Open your terminal and run

npm start

This should open the browser and you should see the app running.

Congrats! You’ve just created your first component!

JSX

You probably have some question marks floating above your head when thinking about this JSX thing. Let’s take a deeper look into this.

return (
    <div>
      <h1>Hello React World</h1>
      <h2>
          This is our first React App - isn't it marvellous?!
      </h2>
    </div>
  );

Making things dynamic

So we’ve seen JSX, and gotten over our fear of it (hopefully). But what’s the point? Why use this JSX thing, when we could just use HTML? They look the same? Right?

Good question my friend! Well, if we remember what JSX stands for — JavaScript XML. This means we can use JavaScript to make things dynamic. Our previous example looks like so:

const App = () => {
  const message = "This is my first variable rendered in JSX!";

  return (
    <div>
      <h1>Hello React World</h1>
      <h2>{message}</h2>
    </div>
  );
}

We use curly braces to tell the compiler “execute this code as JavaScript”. If we didn’t have curly braces, the message variable wouldn't get executed as JavaScript and instead, the text “message” would appear on the screen.

Handling Events

The same approach can be taken when with handling events. When using JSX, React gives us access to event listeners you may already be familiar with: onClick, onPress, onSubmit and so on.

Let’s say we want to display an alert when the message is clicked. Firstly, we add the onClick property to our h2 tag.

The onClick property accepts a function (in other words, we pass a function as an argument. This function will call the alert like so:

const App = () => {
  const message = "This is my first variable rendered in JSX!";  

  return (
    <div>
      <h1>Hello React World</h1>
      <h2 onClick={()=> alert("you clicked the message!")}>{message}</h2>
    </div>
  );
}

Notice how we use a arrow function here to create a nice, concise inline function.

Calling functions

So we looked at inline functions in the last example. Since JSX is JavaScript, we can create and reference functions outside of the return block. Our last example could look like this:

const App = () => {
  const message = "This is my first variable rendered in JSX!";  

  const handleClick = () =>{
    alert("you clicked the message!");
  }

  return (
    <div>
      <h1>Hello React World</h1>
      <h2 onClick={handleClick}>{message}</h2>
    </div>
  );
}

Notice how we created a function called handleClick which alerts the message. Instead of using an inline function, we reference this function in our onClick property

Quick Summary

Before moving on, let’s quickly summarise what we’ve learned so far:

• We have an index.html file, which is the skeleton of our web app
• When the app starts, index.html loads, and imports our App Component
• The JSX in the App component get’s converted to HTML, which is then rendered in the index.html file at the root div