How to Create a React Application

(Part 1: File Setup and db.json)

Image for post

Background

The most popular front end JavaScript web frameworks today include React, Angular, Vue, Ember, and Backbone.js. What sets React apart from other frameworks are the following features:

  • Virtual Dom
  • Declarative writing structure
  • Babel
  • Webpack
  • ESLint functionality

Setting Up Your First React App

React makes it easy to get started. In this example, we are going to make a page for one of the most popular racing games of all time Mario Kart. The terminal command to get started is the following.

npx create-react-app mario-kart

If run successfully you should see a message similar to the one below

Image for post
Success Message for Create-React-App Command

The create-react-app command provides developers with a preconfigured project package that is ready for immediate use. This package is functionally built to work on all modern browsers and mobile devices. Following the suggestion found in the terminal we can type the below command and see what create-react-app has provided.

cd mario-kart
yarn start
Image for post
Files/Folders provided by create-react-app command
Image for post
What our app looks like in the browser

Next a quick and easy way to get data into our app, without a proper backend database, is to use JSON Server. JSON Server mimics a full REST API using a db.json file. Use the following command in your terminal to install JSON Server globally.

npm install -g json-server

Next, we need to create a db.json file and add our data into the file. The data used for this project can be found below.

Image for post
db.json file

We can then view our fake REST API endpoint using the following terminal command

json-server --watch db.json
Image for post
“API” endpoint

Now that we have our base file setup we are now ready to begin using React to integrate and manipulate the data from our JSON Server. Stay tuned for the next installment of this blog to see how.

Next Blog:

How to Create a React Application (Part 2: Integrating Data Using React)

Resources:

React: https://reactjs.org/

JSON Server: https://github.com/typicode/json-server

Written by

Software Engineer — Full Stack, JavaScript, ReactJS, Ruby on Rails, OO Programming (https://www.matthewsedlacek.com/)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store