Creating our first Create React App project

You should begin by picking a primary Development directory that you want all of your development work for this book to take place in. Wherever that directory is (I'm always a fan of a Development directory somewhere in my home folder or Documents folder), you'll then create a new project. This will be a throwaway project, since we're going to instead focus on playing around with Create React App and getting comfortable with starting from a blank project. Let's create a new project, which we will call homepage.

For this throwaway project, we'll pretend we're writing a fancy homepage replacement. You can actually pick whatever sort of project you want, but we will be throwing this preliminary project away after this chapter. After you build your project, you should see the following output:

    $ npx create-react-app homepage

    Creating a new React app in [directory]/homepage.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts...
    
    [... truncating extra text]
    
    Done in 13.65s.

    Success! Created hello-world at [directory]/homepage
    Inside that directory, you can run several commands:
    
      yarn start
        Starts the development server.
    
      yarn build
        Bundles the app into static files for production.
    
      yarn test
        Starts the test runner.
    
      yarn eject
        Removes this tool and copies build dependencies, configuration files
        and scripts into the app directory. If you do this, you can't go back!
    
    We suggest that you begin by typing:
    
      cd homepage
      yarn start
    
    Happy hacking!

Those instructions that we see after successfully creating a project are critical to our workflow in Create React App. By default, there are four main commands (and a large number of options) bundled into Create React App. Also, if you are using npm instead of Yarn, note that a lot of the comments and output in the Create React App CLI help pages refer to Yarn primarily. Now, these commands (start, build, test, and eject) are relatively self-explanatory, but it is still important to dive a little further and learn a bit more about them.