Our first React application

— 3 minute read

Today we are looking into building our first app in React.

I've been experimenting with React, Vue and Angular so far React has been a stable work horse with a lot of features. Hence this tutorial on how to start our first app in React.

React of course is build on top of JavaScript, so make sure you have a good enough understanding of Vanilla JavaScript.

React good to knows

There are a couple things we have to keep in mind when building React applications.

  • React is build with components, components are small and reused through your application.
  • Props are how we can make components dynamic, we can pass props through components. Props cannot be changes however.
  • State is a variable in every component, a state can hold information dynamically. So very similar to props, but states are private and fully controlled by its component.
  • JSX is a XML/HTML-Like syntax that React uses so we can have HTML in our components.

Creating our first React app

Make sure we have Node.js installed, then open your favourite terminal and run the following command:

npm install -g create-react-app

This will install the React CLI globally (-g option).

Next we can create a new app

create-react-app react-starter

This creates our first React application and automatically create the following files for us:

Basic React structure

Running our React app

to run the application we run the following command:

cd react-starter
yarn start

Now we can open up http://localhost:3000/ to see our very first React application!

A basic Component in React

Let's have a look into how a basic component in React looks.

import React from 'react';
import './App.css';
import Child from './components/child';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div className="App">
      <Child />
    </div>
  );
}

export default App;

As you can see we first do some imports to define what elements this component is going to use.

We can import css files, Other components and more.

Then we have a open a function which will define our Component, in the end we export our component.

Check out our next day React props and components tip

Feel free to download a starter template from GitHub.

Or read more on the React website

Thank you for reading, and let's connect!

Let me know what React topics you would like to see in more depth and feel free to subscribe to my email newsletter and connect on Facebook or Twitter.