Join Ray Villalobos for an in-depth discussion in this video Using the exercises, part of React.js: Building an Interface (2016).
- [Voiceover] Since we're using React's JSX language, all the files need to be processed in order for the project to work. Now I've created a build process for this course and placed all the files in a GitHub repo. In GitHub you'll see that the project is organized in branches. Each branch corresponds to a video in the course. You can clone this repo in to your local hard-drive if you want to follow along. The best way is to clone all the branches. In order to do that you're gonna need both git, which you can get from this URL, as well as node.js, which you can get from here.
When you install git, make sure that you add the git BASH terminal in Windows. It makes running the command a lot more consistent. Let me show you how to pull all the branches of this project at once. I'm gonna click right here and copy the link for the repo to the clipboard. First, I'm gonna make sure that I am in the desktop so I will do a cd ~/desktop then I'm going to create a directory for my repo, so I'll do mkdir and then the name of the directory. I'm gonna call it reactInterface.
I'm gonna switch to that directory with the cd command, and then I'll issue a git clone command. Now I want to pull a special version of my repository called a bare version. It's essentially just a .git folder. So I'll type in git clone --bare and then paste the URL from git, and add an additional .git at the end. So there should be two .git's Once that's done we need to convert this to a regular repository, I'll use the git config command to change this from a bare repository to a regular repository.
Then I'll issue a git reset hard command, and if I do it a git branch command, you'll see all of my branches. Now I also need to run an NPM install command to install all of the node modules for this project. If I'm on a Mac, depending on my permissions, I may need to add the word sudo at the beginning of this and type in my password. Once that's done you can run the gulp command to run the adimation for this project.
This will open up a finished version of the application. If I want to switch to a specific branch, I'm gonna hit ctrl + c to cancel the current running application and then do a git checkout, and then the branch name. Lets say that I want to go to the second chapter and pull the third video and I want the code at the beginning of that video, so I'm gonna put a b in front of this. If I want the code at the end of the video, I can use an e but lets do the code at the beginning of the video.
If you get this message you can do a git stash command and just run the git checkout command again. Now we're at the second video, the third movie and the code is at the beginning of our application. You can open the project in your favorite text editor. I'm using Atom and at the beginning of each video, I'll already have my gulp process running. I've created a special course if you want to learn more about setting up this type of process, called Up and Running with Git and GitHub.
So now that you know how to get to the code lets get started building an interface with ReactJS.
- Using components and subcomponents
- Working with state
- Handling events
- Creating subcomponents
- Using references
- Sorting and updating views, events, and search results