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