React Tutorial 101: Create a Simple Web App

A CodeMix eLearning Tutorial

Create a simple React application that gets a list of characters from the Star Wars universe.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# React 101: Create a Simple Web App

### 01

# Welcome to React 101!

In this tutorial, we will create a simple React application that will get a list of characters from the Star Wars universe.

A new project `tutorial-react101` has been added to your workspace. If you want to create your own React project, select `File > New > Project...` and choose `CodeMix > React Project`.

### 02

# Install NPM Dependencies

Now that you have a Terminal, you need to run npm install to install the corresponding Node modules needed to properly work with React inside this project, including the command needed to serve the React application easily from development.

1. Type `npm install`
2. Press `Enter`

The Terminal+ view in CodeMix will automatically configure the Node and NPM versions for you. If you need to change this, you can at any time via project properties.

Node and NPM installation can take up to several minutes.

### 03

# Check out the app

Use Live Preview to see how the app looks like right now.

If you do not see the preview at the right of your editor, you can enable it by clicking the Live Preview toggle (or the eye icon) at the top right of the editor, alternative you can use  `{binding:codemix.toggle.preview}` to turn it on.

It will prompt to run the React local server first, just accept the request and it will start the server and then display the preview.

### 04

# Create StarWarsPeople.jsx

Let's create a new React component for retrieving the list of characters.

1. Right-click on `src/components`
2. Select `New > React File`
3. Type `StarWarsPeople.jsx` for the name

### 05

# Import Basic Component Dependencies

Let's add some fundamental React dependencies so we can get started with our Component. As you type import, you can select the import statement template which will insert a import {} from the snippet for you. You can then use content assist and Tab to enter the module and symbol names.

```
import React, {Component} from "react";
```

### 06

# Create the Component Class

We create a state object to hold the currently retrieved list of characters.

When typing in `Component`, observe how it is suggested by the content assist, as we imported it earlier.

```
class StarWarsPeople extends Component {

constructor() {
        super();
        this.state = {
            people: null
        };
    }
    
}
```

### 07

# Fetch List of Characters from Web Service

*fetchStarWarsPeople method*: We use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank" rel="nofollow noopener">fetch API</a> and a <a href="https://javascript.info/promise-chaining" target="_blank" rel="nofollow noopener">Promise chain</a> to request data from the Star Wars  web service, and handle the response. On a successful fetch, we update the state of the component with the list of characters returned.

*componentDidMount method*: This is a <a href="https://reactjs.org/docs/react-component.html#the-component-lifecycle" target="_blank" rel="nofollow noopener">React lifecycle method</a> that is called when the component is inserted into the tree, we call the fetchStarWarsPeople method here to ensure the list of characters is fetched when the component is first loaded.

```
	fetchStarWarsPeople() {
	    fetch('https://swapi.co/api/people/?format=json')
	        .then(results => {
	            if (!results.ok) {
	                throw Error(results.statusText);
	            }
	            return results.json();
	        }).then(data => {
	            this.setState({ people: data.results });
	        }).catch(error => {
	            console.log(error);
	        });
	}
	
	componentDidMount() {
	    this.fetchStarWarsPeople();
	}

```

### 08

# Write HTML in JSX to Render Component

*render method*: One of the strong points of React is the <a href="https://reactjs.org/docs/introducing-jsx.html" target="_blank" rel="nofollow noopener">JSX syntax</a>, allowing you easily describe the UI right in your JavaScript component - no separate files, no cumbersome document.createElement calls.

This is the most interesting part of our component, if the character list has already been fetched, we use the map array function to create a new array, `peopleArray`,  which holds a list of react elements - table rows, corresponding to each character in the original array. We then create a table using JSX and include `peopleArray` within, which will ultimately be rendered as an HTML table containing the character names and their birth years.

Note that content assist will suggest HTML elements (technically JSX elements) as you type, along with attributes of these element,  so you don't have to look up documentation as you type.

```
	render() {
        if (this.state.people) {
            const peopleArray = this.state.people.map(person => {
                return <tr key={person.name}><td>{person.name}</td><td>{person.birth_year}</td></tr>;
            });
            return (
                <div>
                    <table>
                        <tbody>
                            <tr>
                                <th>Name</th>
                                <th>Birth Year</th>
                            </tr>
                            {peopleArray}
                        </tbody>
                    </table>
                </div>
            );
        } else {
            return (<div></div>);
        }
    }
```

### 09

# Export Component

So our component is now ready for action, let's export it by adding the following line at the end of the file.

```
export default StarWarsPeople;
```

### 10

# Show Component

To use our component, in the index.js file, we can first import it.

```
import StarWarsPeople from "./components/StarWarsPeople";
```

We can replace the render method that renders, "Hello world!!!", with a reference to our component.

```
ReactDOM.render(<StarWarsPeople/>, document.getElementById('root'));
```
Now you are ready, just Save the file and Live Preview will show the Start Wars list.

### 11

# Nice Job!!!

You've finished the React 101 tutorial. As you are learning React, why not check out <a href="https://reactjs.org/community/examples.html" target="_blank" rel="nofollow noopener">React Examples</a> for good examples of challenges you may face.

Explore other <a href="https://www.genuitec.com/elearning/" target="_blank">React</a> courses.