Setting up with Create React App

All right, let's get started by setting up our tools. 0:00 You learned that two common ways to install and 0:03 to get set up with React is with a tool called Create React App, and 0:06 its hosted CDN or content delivery network links. 0:10 We started to build a scoreboard app using the CDN links to help you focus on just 0:13 learning React, without having to worry about installing and running any tools. 0:17 Developers normally use Create React App for developing react applications because 0:21 it lets you quickly create and run React apps with no configuration. 0:26 It sets up your development environment with tools like Babble 0:30 to compile JSX to JavaScript, and Webpack to process and 0:34 bundle your JavaScript files and project assets. 0:37 Create React App is well-suited for projects of any size and often used for 0:39 developing production-ready apps, so 0:43 that's what we're going to use in this course. 0:45 To get started, you should have Node and NPM, or Yarn, installed on your computer. 0:48 They're only required for development and not in production, and 0:53 if you don't have them installed, be sure to check the teacher's notes for 0:56 links to Treehouse videos and resources that will get you all set up. 0:59 We also have content entirely dedicated to using Create React App. 1:02 You'll find the link to it in the teacher's notes, as well. 1:06 With Create React App, you run one command to set up the tools and 1:09 files you need to start your React project. 1:12 To save you a little set up time, and to make sure that your files are the same 1:15 as mine, I suggest that you download the starter files I prepared for you and 1:19 work from there. 1:23 I created the project using the npx command, 1:23 followed by create-react-app, and the name of the project, scoreboard. 1:27 NPX is a tool that's included with NPM, as a version 5.2, that makes it easy to 1:34 install and run packages, especially command-line tools like create-react-app. 1:39 If you need to use a global package that's not installed on your computer, 1:44 running npx will download and execute the package you specify all in one command. 1:48 For example, 1:54 without npx, you have to make sure that you have Create React App installed 1:54 globally on your machine before you're able to run the create-react-app command. 1:58 The best part is that npx makes sure that you're always using the latest version of 2:04 a package without having to upgrade it each time you're about to use it. 2:08 So it offers a pretty big productivity boost. 2:11 After downloading the provided project files, open your terminal or 2:14 console, navigate inside the scoreboard folder, and 2:18 make sure to run npm install to install the project's dependencies. 2:23 Then to run the scoreboard app in the browser, run npm start. 2:28 Now, open the project in your favorite text editor. 2:34 I'm using Visual Studio Code, which has an integrated terminal. 2:36 I brought over all the code we wrote in React Basics to the new project files. 2:40 If you open the file App.js, located inside the src and 2:44 components folder, you'll see the header, counter, player, and app components. 2:49 You'll find the CSS for the app in index.css. 2:55 And over in index.js, you'll see the familiar ReactDOM.render method, 2:58 which is rendering or mounting the app component into the root element. 3:04 An HTML file containing this root element is inside the public folder. 3:09 All right, we're all set up to continue building our app. 3:14 In the next video, you'll learn how to break up your components into modules. 3:18