Getting Started with React

In this tutorial, we will learn about React, get an overview of how it works, and start using it with a basic app.

The React logo.

What is React?

React is a front-end JavaScript library created by Facebook for building user interfaces. It is a popular and open-source library used for building web applications and mobile apps.

Using React, you can break down more complex user interfaces into smaller, reusable pieces, with React only making changes to the DOM when needed.

Prerequisites

1. Basic HTML knowledge is needed. If you're absolutely new, check out our class on HTML.
2. Intermediate JavaScript knowledge is also needed. If you need a refresher, check out our class on JavaScript.
3. Node and NPM installed. If you don't have them installed, follow our how to install Node guide.

Create React App

The React team has created a tool called Create React App that will help you get started with React very easily.

Let's create a React app using Create React App. To do so, run the following command:

BASH
npx create-react-app app

When you run this, it will automatically install the latest version of react, react-dom, and react-scripts into your project. It will even initialize a git repository and run npm install for you.

If done successfully, you should see the following:

BASH
Success!
Inside that directory, you can run several commands:

npm start
    Starts the development server.

npm run build
    Bundles the app into static files for production.

npm test
    Starts the test runner.

npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd app
npm start

Happy hacking!

Running React

Now that you have a React app, you can start running it. To run your app, run the following command:

BASH
npm start

Or using yarn:

BASH
yarn start

If you do, you will have started the development server and should see the following:

BASH
Compiled successfully!

You can now view app in the browser.

Local:            http://localhost:3000        
On Your Network:  http://172.22.48.1:3000      

Note that the development build is not optimized.
To create a production build, use yarn build.

Now go to http://localhost:3000 in your browser. You should see your React app running.

Our Create React App running on port 3000

JSX

Let's dive into the React code. If you open up src/App.js, you'll see that it's a function that returns some JSX (JavaScript XML).

JSX
return (
    <div className="App">
        <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
            Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
            >
            Learn React
            </a>
        </header>
    </div>
);

JSX is a syntax extension for JavaScript that allows you to write HTML inside of JavaScript. If you know HTML, you essentially know JSX.

You can see an example of JavaScript inside the markup here:

JSX
<img src={logo} className="App-logo" alt="logo" />

The above code is a JSX expression, as logo is coming from the src/logo.svg file.

If you make changes to this file, you should see it update immediately in the browser thanks to the development server you have running.

Components

Let's talk about components because they're a huge part of React. Components are the building blocks of React apps. They allow you to break up your UI into smaller, reusable pieces.

Let's look at the App component in src/App.js again:

JSX
import logo from './logo.svg';
import './App.css';

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

export default App;

App is a simple component that imports a logo and CSS file, and returns the JSX that React will use to render the component from a function.

As this is just a normal exported function, it can be imported elsewhere and used as a standalone component.

You can see where it is imported by opening src/index.js.

JAVASCRIPT
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

This is the entry point of the entire React app. This is where React itself is imported, along with a CSS file and the App component we talked about earlier.

This React app is then mounted on the DOM at the element with ID root. You can find this element in the index.html file inside the public folder.

HTML
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
        name="description"
        content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

This is the HTML file that will be served by the web server. It's a simple HTML file that contains the <div> element with an ID of root.

React will render the App component inside of this element and you see the React app there as a result.

Conclusion

React is a declarative, flexible and modern JavaScript library for building user interfaces. This tutorial only covered the basics of React, but you can learn more about React by going to the official React website.

Hopefully this post has been useful in helping you get started with React including how to get a starter app running, and a basic overview of React components and JSX.

Resources

• React Official Website
• ReactDOM
• JSX
• Create React App website
• Create React App Github

• Support Us
• Discord
• Share
• Post
• Share