Let's explore the created project

Finally, we should take a little time to see what precisely gets created and thrown into your project.

Create React App will start off by generating a README for your project called README.md. This is a markdown-formatted file that tells other people how to use your project effectively (or, if you're like me, it reminds you a few months down the line how to use all of the tools and tricks you've implemented in the project down the line).

You will also get a favicon, which is that little icon that shows up next to your website path in the address bar, and is used for any bookmarks to your application down the line. Next, we have the public or index.html file, which is the primary workhorse that includes all of your fancy React code, and more importantly, tells the web browser where to render your React application to; in our case, we have a div element that acts as the main target for React to render to. The source of the file is, by default, as follows:

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
         fit=no">
        <meta name="theme-color" content="#000000">
        <!--
          manifest.json provides metadata used when your web app is added to the
          homescreen on Android. See 
          https://developers.google.com/web/fundamentals/web-app-manifest/
        -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
        <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder during the build.
          Only files inside the `public` folder can be referenced from the HTML.
    
          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
          work correctly both with client-side routing and a non-root public URL.
          Learn how to configure a non-root public URL by running `npm run build`.
        -->
        <title>React App</title>
      </head>
      <body>
        <noscript>
          You need to enable JavaScript to run this app.
        </noscript>
        <div id="root"></div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.
    
          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.
    
          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
      </body>
    </html>

I mentioned a div element that acted as the main React render target: the div with an id of root acts as our primary render target and is the critical component to make your application function. Remove this and your application will not render correctly in the browser anymore! Following that, there is the package.json manifest file. This stores all of the dependencies that your project uses, plus some of the metadata used to describe your project (which might include the name, the version, the description, or some other pieces of metadata). We also have a yarn.lock file if you're using Yarn, which locks down the list of libraries and dependencies that your project is using in a way that prevents your project from randomly breaking when one of those libraries updates.

All of your project's dependencies, libraries, and things that make it tick behind the scenes live in the node_modules directory. This also brings us into the src directory, which is arguably the most important directory in our entire project structure! It is where all of the work that we're going to be doing—all of the source code—will live.

Inside of that directory, we have our index.js file, which handles our main render call for React, supported by a package called ReactDOM. This takes in our App.js component, which is our primary root-level component, and tells React where that needs to get rendered to back in that index.html file I showed you earlier.

We also get a little bit of style by default with an index.css file. This is the base-level style sheet that our project will use and we'll be configuring on top of.

In terms of our non-test code, App.js is the final component that we get through Create React App by default. What is in there is not particularly important to us, because we're just going to remove all of the code in that file and start over anyways! App.css stores the style sheet for that component, which allows us to make sure that any style included for each component can be stored and configured independently of each other. We're also given the React logo in the form of a Scalable Vector Graphics (SVG) file, which is the React logo (logo.svg). We don't need that, so feel free to delete it!

serverWorker.js is a file that tells our app how to exist/function as a service worker for a Progressive Web App, but we'll dive into this in a later chapter where we focus specifically on progressive web applications!

Finally, we have the only pre-built test for us. The App.test.js file contains the suite (not a suite, I suppose, since it's only one test, but it will become a suite over time) of tests just for our App.js component. That's it! That's the default project structure for our Create React App project!

上一章目录下一章