Creating the React project for the frontend

Before we start coding the frontend, we have to create a new React app:

  1. Open the PowerShell or any other suitable terminal. Create a new React app by typing the following command:
create-react-app carfront
  1. Run the app by typing the following command:
npm start

Or, if you are using Yarn, type in the following:

yarn start
  1. Open the app folder with VS Code, remove any extra code, and change the header text from the App.js file. After the modifications, your App.js file source code should look as follows:
import React, { Component } from 'react';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">CarList</h1>
</header>
</div>
);
}
}

export default App;
  1. Let's also decrease the header height and change the color to lightblue. Open the App.css file where you can find stylings of the App.js file. Decrease the header height from 150 to 50 and change the color to lightblue:
.App-header {
background-color:lightblue;
height: 50px;
padding: 20px;
color: white;
}

Now your frontend starting point should look like the following:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.142.199.184