Bootstrap a React Application with Yarn & Create React App
In this lesson we’ll bootstrap and React application using Yarn and Create React App through the yarn create command.
[00:00] We'll start by bootstrapping our React application using the create-react-app CLI. We can take advantage of yarn's create command by typing yarn create react app followed by the name of the directory we want to put our application in.
[00:18] This will both install the create-react-app tool, and run it to create our project. Once that's finished running, well see that we have this application ready to go. We can cd into our directory, and if we run ls we'll see that we have a readme, node modules, a package.json, two directories called public and source, and a yarn.block file.
[00:47] I'm going to open this in an editor. If we look at our project, we're going to have a source directory that's going to contain all of our source code. I'm going to open up app.js, and well see here that we have an app component that has a render method that's just going to spit some markup out onto the page.
[01:05] Then we can open up our index.js file, and we'll see that index is importing app, and then using it with ReactDOM's render method to get it onto the page. I'm going to jump down to package.json and we'll take a look at some of the scripts we have.
[01:18] We have a start script that's going to run react-script-start. We also have build, test, and inject scripts. We're not going to worry about inject at all, but we are going to use start to get this application to get this application running in the browser and see what it does.
[01:30] I'm going to jump back into the terminal, and I can just issue a command yarn start, and yarn start should build our application and open up a browser pointing to localhost:3000.
[01:45] Once that's started up, I'm going to switch back so we can see the browser, and we should see our application running in the browser with some instructions to get started, edit source app.js to save and reload.
[01:57] Let's do that, I'm going to open app.js. I'm just going to update this welcome message, say, "Welcome to React with Redux." Then I'm going to get rid of these instructions, save my file, and we'll see the browser reload with our updates.