1. 1
    Bootstrap a React Application with Yarn & Create React App
    2m 18s

Bootstrap a React Application with Yarn & Create React App

Andy Van Slaars
InstructorAndy Van Slaars

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

Pratibha Najbile
Pratibha Najbile
~ 5 years ago

when I run yarn create react-app command I get error: An unexpected error occurred: "spawn UNKNOWN".

lior
lior
~ 5 years ago

Me 2: "spawn UNKNOWN"

lior
lior
~ 5 years ago

I solved it with: $ yarn global add create-react-app $ create-react-app my-app

Pratibha Najbile
Pratibha Najbile
~ 5 years ago

thanks

VentureDevs
VentureDevs
~ 5 years ago

what ATOM theme are you using? It's beautiful :)

Andy Van Slaars
Andy Van Slaarsinstructor
~ 5 years ago

what ATOM theme are you using? It's beautiful :)

I'm using the Atom Material UI and Material Syntax themes here. You can find out more about my setup here: https://vanslaars.io/tools

Aron
Aron
~ a year ago

Small tip: if bootstraping the project in 2021 or later replace the css in your App.css with the css from Andy's github repository found under the </> Code tab.