How to Create a React Application
(Part 1: File Setup and db.json)
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-kartIf run successfully you should see a message similar to the one below
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
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-serverNext, 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.
We can then view our fake REST API endpoint using the following terminal command
json-server --watch db.json
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
