Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Components

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Setting up with Create React App

2:33 with Laura Coronel

Developers often use Create React App for developing React applications because it lets you quickly create and run React apps with no configuration. Create React App is well-suited for projects of any size and is often used for developing production-ready apps.

Related content

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Let's get you all set up to code along with me. 0:00
    In the industry, you'll work with existing React apps, so 0:03
    I've created a base scoreboard app for you to work off of. 0:06
    I created this app using the crew Create React App tool. 0:10
    Shortly after the release of this course, React Updated is documentation and 0:14
    no longer recommends using the Create React App tool for 0:20
    setting up a new React project. 0:23
    I've added a link in the teacher's notes to another workshop 0:26
    which covers how to set up a React App. 0:30
    Download the project files from the teacher's notes below. 0:33
    Since we're in Stage 1, open up the Stage 1 folder. 0:36
    This video is called Setting Up With Create React App, so 0:39
    open that folder, too. 0:43
    Finally, open the BEGIN folder since this is the beginning of the video. 0:45
    If you're on a Mac, you can open up the folder by just clicking and 0:50
    dragging the folder to the Visual Studio Code application. 0:53
    Or you can open a new window in Visual Studio Code and 0:57
    then drag and drop the folder. 1:01
    When working with an existing React app, 1:04
    first we need to make sure all the dependencies are installed. 1:06
    To do that, we'll open up the terminal. 1:09
    Make sure you're in the scoreboard directory because it contains our app and 1:12
    the package.json file, which tells NPM which dependencies to install. 1:17
    Now run npm i, which is short for NPM install. 1:22
    The dependencies will start installing. 1:26
    All right, let's start the scoreboard app by running npm start in the terminal. 1:28
    In our starter files, we have a Scoreboard app where we're able to increase 1:37
    someone's score, decrease someone's score, and remove players. 1:42
    Let's take a look at the App.js file. 1:46
    Open up the source folder and open up components. 1:49
    That's where you'll find App.js. 1:52
    App.js file contains four components, a header component, 1:54
    a player component, a counter component, and an app component. 1:59
    The CSS for the scoreboard app is saved in the Index.css file. 2:04
    Over in Index.js, you'll see a familiar ReactDOM.createRoot method, 2:09
    which is rendering the app component into the root element. 2:14
    The HTML file containing this root element is inside the public folder. 2:19
    All right, we're all set up to continue building our app. 2:24
    In the next video, you'll learn how to break out components into modules. 2:27

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up