- Progressive Web Apps with React
- Scott Domes
- 310字
- 2021-07-08 09:36:13
Our app skeleton
First things first. Before we start building our React application, let's get set up with the basic HTML and CSS--the skeleton of our application, if you will, upon which we will heap the React muscles:
- Open up your Terminal and switch to whichever directory you want to store your project in.
- Then, we'll make our app directory with mkdir chatastrophe. Let's go inside that folder, make another folder within it named public, and within public, touch index.html. If you're on Windows, use type nul > index.html instead of touch:
- Then, open up the whole chatastrophe folder in your text editor of choice. I'll be using Sublime Text 3 for this tutorial. Open up the index.html file, and let's write some HTML!
- Let's start with the basic HTML elements. Create a <html> tag, and within that, <head> and <body>.
- This wouldn't be a programming tutorial without a hello world, so within the body, let's put Hello world! within an <h1> tag.
- Then, open up index.html within your browser:
Our goal by the end of the chapter is to display the exact same as the preceding illustration, but using React to render our <h1>.
Why did we put our index.html inside the public folder? Well, our HTML is the first thing our users will download when they hit our page. They will download it exactly as we see it here. This is in sharp contrast to our React JavaScript, which will be transpiled (more on that in the next chapter) before being served to the client. Our React code, as we write it, will be private. Our HTML, as we write it, will be public.
This is a distinction that will make more sense as we move into the React world, but for now, just know that the convention is to put HTML and static assets in the public folder.