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

Using Create React App

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Installing and Using Create React App

6:10 with Guil Hernandez

Create React App lets you create a modern build setup for your React apps in no time. You install the tool and focus on just building your actual app.

Update

It is no longer necessary (or recommended) to install Create React App globally. Instead, you should use the npx command to create the "search-app" project used in this workshop with a single command:

npx create-react-app search-app

If you have previously installed Create React App globally you should uninstall it as recommended in this documentation.

NPX is a package runner that is included with NPM, as of version 5.2. It makes it easy to install and run packages, especially command-line tools like Create React App.

Learn more about npx here, or see npx in action in this Treehouse video.

Resources

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

    With create-react-app, you create a modern build setup for 0:00
    your React apps in no time. 0:03
    You install the tool and focus on just building your actual app. 0:05
    To get started, you'll need to install create-react-app globally. 0:09
    So open your terminal or console and 0:12
    run npm install -g followed by create-react-app. 0:15
    Once it's installed, you create a new react project with the command 0:42
    create-react-app, followed by the name of your project. 0:46
    So I'll navigate to my desktop and run create-react-app. 0:50
    And I'll name my project search-app. 0:57
    Running the command installs the dependencies needed to build your project. 1:01
    It also generates the initial project structure. 1:05
    Now, it may take a couple of minutes to complete the installation. 1:07
    And once it's complete, you'll see the success message in the console, 1:11
    letting you know that your project was successfully created at this location. 1:15
    And it says that inside the directory, you can run several commands. 1:19
    These instructions list four important commands for create react app, start, 1:24
    build, test, and eject. 1:28
    Npm start starts the development server and 1:31
    auto reloads the page anytime you make edits. 1:34
    Npm run build bundles the app into static files for production. 1:38
    Npm test starts the test runner, and 1:42
    this will let you start testing your app with Jest as you build it. 1:44
    And npm run eject takes your app out of the create-react-app setup, 1:49
    which lets you customize your project configuration. 1:53
    You'll learn more about these commands in a later video. 1:57
    But now create-react-app suggests that we navigate to our new search app folder and 1:59
    run npm start to start the development server. 2:04
    So let's do that now. 2:07
    Starting the server automatically launches your app in the browser on 2:17
    localhost port 3000. 2:21
    In addition to the localhost address, the console output displays a LAN address so 2:22
    that you can access the app from a mobile device on the same network. 2:27
    Now in the browser, 2:31
    you can see the template create-react-app provides to help you get started. 2:32
    An app lets us know that to get started building out the App, 2:37
    edit the app.js file in the source directory. 2:40
    And save the file to reload in the browser. 2:43
    So now open the project in your text editor, I'm using Atom, and 2:46
    let's explore the project structure and files. 2:49
    Create-react-app generates only the files you need to start your React project. 2:53
    And if you've built react apps before, you're not going to see or have access to 2:56
    configuration files for Webpack, Babel, ESLint, or even see a bundle.js file. 3:01
    Most of the files you are going to be working with are located in 3:06
    the src folder. 3:09
    For example, App.js is currently the main wrapper component of the app. 3:10
    Its importing App.css which contains style specific to the app component. 3:15
    And the logo.svg you see at the top of the page. 3:20
    Now, index.js is the entry file for the app. 3:24
    It imports index.css, the apps-based style sheet. 3:28
    And imports and renders the app component into the DOM via the root 3:32
    div located in the index.html file inside the public folder. 3:37
    So this is the app's HTML template file. 3:42
    In the previous video, I mentioned that create-react-app sets up a fully 3:46
    functional offline first progressive web app by default. 3:50
    Progressive web apps, or PWAs, 3:53
    are web applications that use a collection of modern web technologies to 3:55
    provide native app-like experiences on all types of devices. 4:00
    What they do is they take advantage of the latest browser features, 4:04
    to make your apps more performant, reliable, and safe. 4:07
    Even send push notifications and work when there's no Internet connection available. 4:10
    So, progressive web apps rely on special scripts called service workers to give 4:14
    users that app-like experience. 4:19
    An index.js imports and enables a service worker created for 4:21
    you here in the file registerServiceWorker.js. 4:26
    So, this file caches your static assets and 4:30
    serves them from local caching production, 4:33
    ensuring that your web app is reliably fast even on a slower, unreliable network. 4:35
    Another key feature in progressive web apps is the web app manifest. 4:41
    The manifest is a JSON file containing metadata associated with your app, 4:46
    like the app's name, author, description, and more. 4:49
    So create-react-app sets up a manifest,json file for 4:53
    you that describes the configuration of your app. 4:56
    The main purpose of the manifest is to install the app to the home screen of 5:00
    a device, providing your users with quicker access and a richer experience. 5:04
    Manifest.json also contains information about the icon to 5:09
    display on a device's home screen. 5:13
    And by default sets the app to display in standalone mode 5:15
    when launched from the home screen. 5:18
    This will make the application look and feel like a standalone native app. 5:21
    You'll customize this file with details specific to your web application. 5:24
    For example, the icons, names, and 5:28
    branding colors to use when the web app is displayed. 5:31
    You can learn a whole lot more about progressive web apps and 5:34
    the resources posted in the teacher's notes. 5:36
    Finally, the Jest testing framework is already configured when you 5:40
    use create-react-app. 5:43
    So the file App.test.js runs a simple test 5:46
    that checks if the app component renders to the DOM without crashing. 5:48
    And you'll learn more about running tests in a later video. 5:53
    So just like that, we have a React project running on our computer. 5:56
    And we didn't have to install any extra dependencies, configure a build tool or 6:00
    module bundler and create the project structure. 6:04
    In the next video, I'll teach you how to customize and build out your project. 6:07

    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