Intro
In this lecture, we are going to go through the initial setup of React application. This requires a lot of setup and configuration, so the aim of this lecture is not to force you to do it all by yourself. We will go through all the steps and the final code is available on the branch called 6_client, which will be used as a starting point.
Create React App
When you would like to create a React app from scratch, you would navigate to the client folder and run npx create-react-app . command. This command would create a basic skeleton of a React application, including all the default dependencies and configuration files.
But, we need to do some adjustments to the default configuration to meet our specific needs, so we will not use this command. You should just check out to the branch called 6_client and in the next part, we will go through all the adjustments we made and you can follow that also by looking at the code in the client folder.
Adjustments
- We have adjusted
README.mdandpackage.jsonfile to include all the packages you should need during the course. - We have deleted files:
App.test.js,logo.svg,reportWebVitals.js,setupTests.jsbecause we do not need them. index.cssfile contains all the styling for the React app. We have added some basic styling to the app, which will be used later.- In the
publicfolder, we replaced the default favicon and logos with custom ones.
index.html
In general, the index.html file defines the basic structure and content of a web page. In the case of a React app, the index.html file is used to load the React components into the web page. It typically includes a div element with an id of root, which is used as a container for the React components. When the React app is loaded, it replaces the contents of this div element with the dynamically generated content of the app.
To original index.html file, we have added an additional stylesheet link that references a Bootstrap CSS file. This means that we can use Bootstrap components in our React app.
Run the app
- Run
npm installto install all the dependencies. - Run
npm startto start the React app. You should see the following screen in your browser:
Summary
In this lecture, we have created a basic skeleton of a React application. We have also added some basic styling and Bootstrap to the app. In the next lecture, we will implement React routing and create the first React components.