Bootstrap a new React project with npx and create-react-app
Getting started with a new frontend project can be daunting. Sometimes, configuring Babel, webpack, eslint, Jest and all the other tools common to most frontend applications, just holds you back from building something. The React team has built and maintains create-react-app so you can start a project quickly without having to worry about setting up all the tooling. You get everything pre-configured with a lot of really sensible defaults. In this lesson, we'll bootstrap a project with npx and create-react-app so we can get right into building apps with React.
Instructor: [00:00] I'll start by typing npx create-react-app, and I'll give it a directory name to create the app in, and I'm going to call this studyDeck, because we're building a flashcard application, and I'll press enter.
[00:23] With that installed, I'll clear out my terminal and I'm going to cd into the directory that we installed that app into. From here, I'm going to run yarn start, just to see it run the default application in a browser.
[00:39] I'll switch over to a browser, and we'll see that it's running the default create-react-app codebase. We know the defaults work. I'm going to go back to the terminal and I'm going to stop this. I'm going to open the project up in my editor, which in my case is Visual Studio Code.
[00:58] I just want to do a little bit of clean-up here to get rid of some of the defaults that we're not going to use. I'm going to go in here, and I'm going to start with app.css, and I'm going to select all and delete. We're going to replace this with our own CSS.
[01:09] Leave the file, empty the contents, and then in app.js, I'm just going to come in here and I'm going to remove all the code between these opening and closing DIVs, get rid of this class name app, and just write, "Hello world," just to we can verify our changes are working. I'm going to delete this app.test file. We'll add test in different files.
[01:32] I'm going to scroll up here, and I'm going to remove this import of this logo.svg, but I'm going to leave the import for React and the import for that CSS file that we just emptied out. I'll save that, and now we can verify that our changes haven't broken anything, so I'll go back to the terminal and I'm going to type in yarn start.
[02:00] When this is done reloading, we should see our changes reflected in the browser. Now we have a blank page with the message Hello world. If I switch back to the code real quick with that running, I should be able to come in here, add some punctuation, save it, and then if I go back to the browser, our changes will be reflected. The live reload is also working with create-react-app.
Hi Andy, I watched your course completely and I think it's great. But I have one question. I noticed that for components export you are not using default. Is there a reason for that or just a personal preference?
It's largely preference. I like to know that naming will be consistent across the project. While you can alias the imports, the named exports make it far more likely that components will be exported and imported using consistent naming. You can also have multiple named exports from a single module (think an index.js file in a directory that imports and re-exports all the components), you can get nice hints in VSCode via the TypeScript language server.
Hi Andy, I watched your course completely and I think it's great. But I have one question. I noticed that for components export you are not using default. Is there a reason for that or just a personal preference?