Start a new React project with `create-react-app`

Simon Vrachliotis: [0:00] Let's create a new React App with npx create-react-app. We'll name this one react-baby-names. It'll take a little while to install the required dependencies. Here we go. Everything is ready.

[0:14] Before we look at the code, let's go in our react-baby-names directory and run yarn start. We can now see our App on localhost:3000. It's inviting us to edit src/App.js. Let's open our code editor and have a look at what we've got.

[0:33] You can see we have an src folder here which is where the App development files live. There is also a public folder which is where the App is compiled. Let's see how things are structured here. We have a main entry point, index.js, which, as you can see, imports React and ReactDOM. We won't be using the serviceWorker, so I'll remove the import and this bit here.

[0:58] Don't worry too much about this React.StrictMode here. What is important to get here, is that we are importing an App component from App.js, and then we use ReactDOM to render this App to the DOM. The App will be rendered in the elements that has an id of root.

[1:15] If we look in our public folder, there is an index.html file, which will be the page rendered in the browser. If we scroll down, we can see this <div> here, with the id of root. This is where our entire React app will be injected.

[1:29] What is this app component? Let's have a look at it. In app.js, you can see we import React and a few things, and then we have this function App, which is a React component, which return some stuff that looks a lot like HTML. Well, this is not HTML. This is not a templating language. This is JSX, a special syntax that compiles to JavaScript.

[1:51] Before we dive in, let's remove a bunch of things we don't need for this project. We'll remove App.css. We'll remove our tests, our serviceWorker. We'll actually remove everything, except the two files we've looked at, index.js and App.js.

[2:08] Let's go and remove the logo here in our App, as well as the imports for files that now don't exist anymore.

[2:14] Finally, we'll bring in some pre-built styles for the App. This is a series on React, not CSS. We want our App to look good, but we're not going to focus on writing CSS. We'll also bring a CSS reset from normalize-css and add it to our project with yarn add normalize-css.

[2:34] Last but not least, we'll add some data for our App. I'll create an index.js file in a data folder, and drop an array of 200 name objects in there that we'll be working with.

[2:45] All right. We are ready to get started now.