While it's true that React is ideal for some projects (like making attractive websites and launching web applications rapidly), it's not necessarily the best choice for designing a video gaming app.
Video games are complicated programs that need hard-core coding to show a lot of different parts that can be used again and again on the page. React is a great choice for making a gaming app because it lets developers make user interfaces that are easy to understand and fun to use. But React adds less value when building a game where the logic mainly lives inside one component. That is why developers prefer not to use React when designing a video game.
Now that you have all the basic knowledge of React, let’s dig a little deeper and know the steps for building a simple React application.
Prior to moving ahead, let's do some preparation and set up a development environment so that you can use the latest JavaScript features more conveniently. JavaScript features provide a nice developer experience and optimize your app for production.
You must have Node >= 14.0.0 and npm >= 5.6 installed on your computer to make a react project run:
Step 1. Install Create-React-app on your terminal
Please enter the following command into your terminal. By doing this, the current folder will gain a new directory called "my-app."
The command creates an initial structure for the project and installs its dependencies in the directory that was just made.
Among all the folders created, your Javascript code will live in src.
npm init react-app my-app |
Step 2. Start up the React.js app
To start making the app, go to the directory that was just made (my-app) and run npm start to start your application.
Your browser displays an HTML page similar to the one below.
Create react app npm
Image 1:
As soon as you start your application, below mentioned information appears in the command line:
Image 2:
Step 3: Creating API
In the third step, you have to open the code in a code editor.
Open the ./src folder in my-app directory and you will see a file named App.js.
When the application first launches, this file defaults to the HTML code displayed below, which is then displayed on the homepage.
import React from 'react'; 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;
|
Then in the above code, we remove the unwanted components like App.css and logo.svg. They are no longer needed.
Let's start by altering the component to convert it into a class component, as this will be much more useful in our situation. We want our App.js component to look the way mentioned below:
import React, { Component } from 'react'; class App extends Component { render() { return ( <p>Hello world!</p> ); } } export default app.
|
In order to create a class component, we have to import the component from "React" into our program. Let’s add some custom Javascript code in the return () statement and reload the page to see the result!
Image 3:
Step 4: Create a local state and add a constructor
Let's create a local state in which we will save the data we have obtained from the API.
Also, we have to add a constructor, along with a pass prop. After that, we'll set a local state with posts set to an empty array because we'll be getting some posts from the API.
import React, { Component } from 'react';
class App extends Component { constructor(props) { super(props); this.state = { posts: [] } } render() { return ( <p>Hello world!</p> ); } } export default App;
|
Step 5: Add API
Now it's time to call the APIs. Here we are going to use a faked API from the JSONPlaceholder website (https://jsonplaceholder.typicode.com/).
To get the data, I’ll use the .fetch method from Javascript. Let’s create a call:
import React, { Component } from 'react';
class App extends Component { constructor(props) { super(props); this.state = { posts: [] } } componentDidMount() { const url = "https://jsonplaceholder.typicode.com/posts"; fetch(url) .then(response => response.json()) .then(json => this.setState({ posts: json })) } render() { return ( <p>Hello world!</p> ); } } export default App;
|
We have fetched the data from the API. Make sure to have a look at the data format prior to displaying it as posts.
Step 6: Displaying the data and adding Bootstrap CDN
We have already fetched the data from the API. It's time to take a look at them and see how they will look to others.
To make it good-looking without any styling, we have to add Bootstrap CDN to the application.
We get a CDN From the bootstrap website and place it in ./public/index.html file <head> section.
.... <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>React App</title> </head> <body> ....
|
Now, we have to use Bootstrap and create a JSX code for our data.
We will add a container, header, and a card.
.... render() { return ( <div className="container"> <div class="jumbotron"> <h1 class="display-4">Blog posts</h1> </div> <div className="card"> <div className="card-header"> Featured </div> <div className="card-body"> <h5 className="card-title">Special title treatment</h5> <p className="card-text">With supporting text below as a natural lead-in to additional content.</p> <a href="#" className="btn btn-primary">Go somewhere</a> </div> </div> </div> ); } ...
|
Using the map() method, let's display the data as posts.
import React, { Component } from 'react';
class App extends Component { constructor(props) { super(props); this.state = { posts: [] } }
componentDidMount() { const url = "https://jsonplaceholder.typicode.com/posts"; fetch(url) .then(response => response.json()) .then(json => this.setState({ posts: json })) }
render() { const { posts } = this.state; return ( <div className="container"> <div class="jumbotron"> <h1 class="display-4">Blog posts</h1> </div> {posts.map((post) => ( <div className="card" key={post.id}> <div className="card-header"> #{post.id} {post.title} </div> <div className="card-body"> <p className="card-text">{post.body}</p> </div> </div> ))} </div> ); } } export default App;
|
Step 7: Add some styling
Our app is almost ready to use, and now we have to give it a final touch by adding some styling.
To make our blog posts look nice, let's import an App.css file once more and make some adjustments to the padding and margins.
.app { padding: 10px; }
.app .jumbotron { text-align: center; }
.app .card { margin-bottom: 10px; }
.app .card-header { color: white; font-weight: bold; }
|
Woohoo! The app is ready to use!
Final Thoughts:
I hope these steps will help you create react app more easily and swiftly. Also, it will help you learn more about the framework and create something meaningful. It is important to take the time to understand the fundamentals of the react framework and the best practices that you should use when creating a React app.
We have broken down the app development process into steps so that you get it easily and create a top-notch basic app for yourself.
Also, this article will help you to have a clear plan of what the app will do and how it will work before you start coding. With a bit of patience and dedication, you can create a great app with React.js.
