Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:42 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Set Up a React Project

In this lesson, you’ll get up and running with a basic React app and local development server.

Related Links

2.1 Set Up a React Project

So the quickest and easiest way to create a react app in my opinion is to use this tool here create react app. This will basically generate our app structure and ultimately create little hot loading dev server for us. All we have to do is go where we want our project to be in the command line and type NPM install create-react-app. And we'll add a -g here so we can run the command from anywhere in our system. Great, then all we need to do is write create-react-app and dot, because you want to create it in the current directory. Right, so you may see this error here, as you can see, the tool is telling us that we require a newer version of Node. To use a more up-to-date version of Node, I recommend using NVM, which allows us to switch between installed versions really easily. By typing NVM LS, I can see what I've already got installed, and I can just see NVM use 6.2.2. Great, if you don't have NVM already installed, you can use this simple script to get going quickly. Okay, now if I try and run create-react-app dot again, Here we go. Okay, this all looks good, now all we have to do is run npm start, and we're off! Perfect, our own little dev server okay, open this directory in your favorite code editor. What you see here is the basic skeleton of a working app. If we open the SRC folder we see both JS and CSS files, so let's open up index.js cuz that's a good place to start. This is as basic as it can be, all this is saying is, render the app component in the element with the ID of root. So let's look at that component, again it's just a basic component with a render function retarding some GSX. Let's get rid of everything we don't need Let's get rid of everything inside the component. We also don't need to know the component styles, as we'll [INAUDIBLE] everything in the index CSS file, and this logo and clip too. Go back to the browser, and you'll see it's already updated for us. Perfect, an empty React project ready for us to get to work. In the next lesson, we'll get started in that to do the app.