We’ll go from an empty directory to a solid foundation for an application by running a single command. The create-react-app tool handles all of the complicated setup for us so we can focus on building our application.
[00:00] I'm going to start by installing the create-react-app CLI globally on my computer. I'll do that by typing npm install-g create-react-app. With that installed, I can use it to create my application. I'll type create-react-app and I'm going to pass it the directory that I want my application to go in.
[00:21] Since I'm already in that directory, I'll just use a dot. After a couple of minutes, we have an application that we can start building on top of. You'll see that create-react-app comes preinstalled with a few npm commands.
[00:35] The first one is start, which will start the development server. Then, we have build so that we can build so that we can build this for production. We have test to start the test-runner.
[00:44] That's all preconfigured within create-react-app. Then, we have an inject option that will basically break us out of the create-react-app tooling setup and give us flexibility, but for now, we're going to leave it as is and we're going to use everything that comes pre-bundled with create-react-app.
[01:00] We get these handy instructions to CD into our directory, which we happen to already be in, and then run npm start. We'll run npm start and that'll spin up our development server, and we'll see that our app is currently running at localhost:3000. You'll see that a browser window has been opened with that localhost:3000 location and we have the boilerplate for our react-app.
[01:25] I've also opened the code directory in ADAM so we can take a look at the code. You'll see that the page that opened up is telling us to get started at its source/app.js and save to reload, let's do that.
[01:37] In my editor, I'll expand out the source directory, find app.js and open it up, and you'll see that at the top of the file we have a few imports to pull in our logo, our CSS, and of course, react and component from react.
[01:53] Then, we have this react component called app-defined with a render function that returns a bunch of JSX, and that's what we're seeing rendered on the page. Let's update the page by changing this paragraph to say "hello react."
[02:08] When I save this file this is going to be automatically rebuilt and the browser's going to refresh to reflect our changes. This automatic reload is going to make development time much faster, because every time we make a change, we'll be able to see it in the browser and see if it's what we want.
[02:22] Not only that, but it'll also point out our mistakes. If I come up here and I break my JSX and save the file, we'll see that I have a very friendly and helpful error message right in the browser. I can put that back and save it again and I'm back to a working state.
[02:41] Let's take a look at a couple of the other files that come out of the box with create-react-app. First off, we have index.js, which is actually the entry point for our application. You'll see here it imports app and it actually uses that in a call to ReactDOM.render to render this out to an element with the ID root on our HTML page.
[03:00] That root element lives under the public directory in index.html. I'll open that up and you can see that root element right here. You also notice placeholder text and some notes in the comments.
[03:13] This file is a template and the build process is going to use this to replace some of these values and load the bundled scripts in for our production distribution when we run npm build. We don't have to worry too much about this file.
[03:29] Back in our source directory you'll see that alongside app.js we have app.css, which is styles that are specific to the app component and we have app.test.js, so let's take a look at that.
[03:41] Create-react-app comes pre-bundled with the Jest test-runner. When you first create your app, you get this one simple test that just makes sure you can render your app component. Let's take a look at that.
[03:52] I'm going to jump into the terminal, and in a new tab, I'm going to run npm test and we'll see that our one test passed. This is actually going to sit here and watch for changes in our test files. As we write more tests, this'll rerun and let us know if they're passing or not.
[04:08] With a single command in the terminal, we've set up an entire react application with all the tooling we need to reload the browser as we make changes, to run unit tests, and to build for production deployment.
If trying to run this on Linux (Ubuntu 16.04) , I had issues with watchman not running the jest test. Had to install watchman https://medium.com/@vonchristian/how-to-setup-watchman-on-ubuntu-16-04-53196cc0227c#.fdbzp4zbe
Sorry you ran into issues. Thanks for sharing the fix!
This is great so far!
Mind if I ask what theme you're using for Atom?
Glad you're enjoying it! I'm using the Atom Material theme for both UI and syntax. I have some more details here: https://vanslaars.io/tools/
How about that font that's being used for attributes and such? Man that's nice.
Just finished the course, really awesome. I'm glad you went to into the depth that you did.
The font is operator mono.
Glad you enjoyed the course!!
Hey Andrew great course so far! Quick question: What terminal plugins are you using to get that nice syntax highlighting?
Glad you're liking it so far, thanks for the feedback!
For the terminal, I'm running iTerm with the nova theme and colors enabled with these lines in my
export CLICOLOR=1 export TERM=xterm-256color
For my Atom setup, you can read more here: https://vanslaars.io/tools/
Hope this helps!
Hi there. I am having trouble figuring out how this github repo works with the bootstrap create react thing. I have cloned the repo...but then what? I know how to create a project from scratch, but can't I just skip to the latest master or the last lesson and start from there? running npm install does not work. Can you just spell it out as to how this works? I understand this is probably an easy thing, but I am horrible at configuration stuff. Thanks.
I've updated the README on the repo with some instructions. You need to have both the mock API server running as well as the application, so you need
json-server installed and running and then
npm start in another session will run the app (assuming you've run
npm install first to install dependencies).
Take a look at that updated README and give it a shot. If you run into any problems, let me know and I'll try to help you get it sorted out.
Great thanks a bunch! Really appreciate it! I have another questions for you now...I put it under Lesson 14...it concerns the pipe function...