React
Preparing a starter project
3 minutes of reading
In order to keep us on the same page in every chapter, this chapter specifies what our project would look like at the beginning of each chapter (unless otherwise specified). This starter project of our course for each chapter is created by deleting extra code in the starter project generated by create-react-app.
First of all, use create-react-app to generate a starter project.
$ npx create-react-app your-app-name
$ cd your-app-name
$ npm start # spin up the local server for your react application
Delete all the files other than those which are shown in the screenshot below.
The folder structure of the starter project
Replace the content of public/index.html by the following.
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
Replace the content of src/App.js by the following.
1
2
3
4
5
6
7
8
function App() {
   return (
     <div>
     </div>
   );
 }
  
 export default App;
Replace the content of src/index.js by the following.
1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
Last but not least, delete all the content in src/index.css.
Congratulations! You now have a brand new React project to start playing with, let’s get started on learning some real React in the next chapter!