FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

6.1 Tools for Everyday Development

One of the great things about React is the lively ecosystem of tools and components. To make use of them, you’ll use NPM—the Node Package Manager. In this lesson, I’ll show you how to get started with NPM and then how to install and configure some other important tools for React app development.

Related Links

6.1 Tools for Everyday Development

Before we look at our final example, we need to go over the tools that you need for react development. And it's really not just for react developments because these tools are something that you would use for doing any type of client side developments, just because that's the way that things have evolved. So the first thing you want to do is point your browser to nodejs.org. Now if you have nodejs installed on your machine then you should be good to go. It doesn't hurt to update to the latest version if you don't have that already. But if you don't, then you need to install this, even if you don't plan on writing node applications. If you use PHP or ASP.NET or some other server side technology, you still need to install node on your dev machine. Because in doing so you get a tool called NPM, Node Package Manager. And you can use that to get your dependencies as well as other tools to make writing code for React a little bit easier. Because what we want to do is add a build step to our whole process. Because we have been using the in browser version of Babel. And that's been great for quick prototypes, but for real development, it's just not gonna cut it. You need something that's going to work for you before you load it in the browser. So we're going to write our code, we're going to build, and then we're going to run. And that's a lot like conventional development, where you write your code, you compile and then run. We're just building now instead of compiling. So you need to install Node js, and when you do you will be asked if you want to include NPM. Now by default that is included, do not uncheck that or disable it. You want NPM, that is the whole idea behind the installing node js, at least for JavaScript purposes. So install NodeJS, it's a very straight forward installation. The hardest thing you will have to is choose which version you want. I typically always go for the LTS, which stands for Long Term Support. But you could go with the current version if you wanted to do that. So, once you have NPM installed, we are going to create a project. And I'm just going to do that right here inside of the same folder that I've been working in. This entire course I just have it called practical-react. We're going to say npm init -y. This is going to create a file called package.json, and this is going to allow us to pull in all the dependencies that we want. Now you could just say, npm init and then you would have to answer all of these questions here, but if you say dash y it's just going to say yes to everything and just give the default values. Now from here, I begin to cheat, because you could come in here and you could install every dependency one at a time. Or, if you already have your dependencies defined inside of another project's package.json, you could just paste those in. And that's what I'm going to do here. Because now, we can install these all at the same time. Instead of installing individually we just say npm install, it's going to install all of the dependencies. So while it's doing that, let's briefly go over what we are using. Now if you're not familiar with npm, we have two types of dependencies. We have dev dependencies, which are used for development purposes and then we have dependencies. These are things that will be used by our application or by our project. So dev dependencies are just tools to make our lives easier. Dependencies are things that we actually need to run our code. So you can think of it like that. So as far as our devDependencies, we have four babel components. Now, whenever we have used babel in the browser we just loaded one file. Well, here we're going to load four. We need babel core, that is as its name implies, the core of babel. Then there's a loader so that we can use standard es2015 modules. And it will load those modules for us, so that we don't have to reference all of the different files through script elements. We just import what we need through the module system and babel-loader will load those. We also have a preset for es2015, so that we can use es2015 features. Then we also have one for react, so that's, we can use react stuff. So that's the pieces of babel that we are going to be using for Webpack. Webpack is a bundler. We can tell it to bundle all of our Java script, we can tell it to bundle all of our CSS. We can also have in minified and things like that, so web pack is a very useful tool. And so we are pulling in web pack, we are also pulling in a web server for dev pack which is really nice. Because as we run the dev-server it will watch our files and as we make changes it will automatically reload the page so that's nice as well. And then for our dependencies, the things that we are actually going to be using to run our application, we have react and react-dom. Now there's a couple of things here, this scripts, we can define scripts that we can then run from the command line. The first one, we're just gonna call webpack, and that's going to run a command called web pack. The second is going to be named start, and that is going to run a command called web pack dev server. Now we need some config files. One for Babel, one for web pack. And once again I typically cheat here, I just files from one project to another. So that I don't have to worry about typing this stuff, or even copying and pasting. But I'm going to copy and paste, in this case. The first is called babel or .babelrc, this is the settings for Babel. And basically we're just saying that we have some presets here. We have es2015, and react. And that's it. It's a json file but it's called .babelrc. So that's our first file. The second is for web pack. We want to create a new file called webpack config.js. And this is going to be the default file. Whenever we run web pack it's going to look at this file for our configuration settings. So we have an entry point that is inside of a folder called Source. So my projects typically have two files. The first is called Source, that's where I put all of the source files. And then I will have a folder called, Public. That's where all of the files I would put on the web server, so any of the files that are going to be bundled together with Webpack and transpiled with Babel, that's going to be put inside of the public folder. So the source files are files just for development purposes. The public folder is for what I would put on the server. So we have a entry point, it's going to look for a file called app.js and it's going to use that as the entry point. And it's just going to start loading and bundling from there. Then I have an output which is public/js. So for all of the JavaScript stuff it's going to bundle all of the files and then put them inside of a file called app.js inside of public/js. Then there are the settings for the loaders. I just have babel-loader. It's going to load everything except the stuff from node_modules because that would be rather large. If you're not familiar with node and node_modules, well we have this folder called node modules and there's a ton of stuff here. All of the packages that you install and all of their dependencies get put here. So, that's what those are, that's why we are excluding them. And then there's the settings for the dev server. Now here's where things get a little interesting. We have whats called a content base. This is where we are going to put our html files and other things that we would want to access from the web server. So, that is set as public. This public folder. But then there's this public path. So it's going to create a virtual file called app.js and it's going to put it inside of the path of /js/app. We can reference that inside of the index HTML file and it's going to serve that. And so that's pretty nice there. And as far as our configuration, that's it. Now, other projects may have other configuration option sets. But for the most part, that's what I typically start with. And if you want to learn more about WebPack, there's a lot of information available. We're just not going to go into it. So let's take our index HTML file, let's put that inside of our public folder. And we're going to get rid of our script elements that are pulling in the resources from the CDM. We don't need those anymore. Because we're going to bundle everything and then reference our own. So the next thing we need to get rid of is this type="text/babel". We don't need that anymore. In fact, we can take all of this code that we have. And we are going to cut it and inside of our source folder we're going to create a new file called ap.js, and we're going to put that there. And let's format it so that it's nice and clean. And then we will need to import some resources, because we are using ES2015 features, we're using ES2015 modules now. So instead of referencing the react files inside of our HTML, we are going to import them inside of our java script file, so that Babel is going to load those, Webpack is going to bundle everything together. So that's React, React.dom and then our code here are going to be complied into a single file. So we're going to say import, react, and that doesn't need to be a string. React from react. We wants to import react Dom, from react dom. Now if you're not familiar with modules, we are importing themes from a module. So we have import react, from the react module, we are importing ReactDOM from the react dom module. If we wrote our own modules then we could say Import. And if our menu was inside of another module, we could say import Menu from, and then wherever that file is menu, and then it would import that. But we're not gonna do that we're just gonna import React and React DOM. So now inside of our index html we just need to reference the end result. That was going to be inside of js/app.js, and that's it. So, let's go to the command line. I'm going to say npm. We can run Webpack. That's going to run our webpack script, which is going to compile our code, and we have an error. And it says that it cannot find the configuration file. Well, webpack.config.js, we created that and it's right, that's not named correctly. That is webpack.config.js. Now let's run that command again, and it should compile everything without errors. And it will tell us, yes, that is the case. And now we can just run it. Now we could actually just run it first, and it will compile for us. But I just wanted to see if it was actually going to compile. So this is going to run our application. It's at localhost port 8080. So let's hop on over to the browser. And we should see our component. There it is. So we are now using Babel and Webpack as part of our build process to build our code. And we are using that in the browser as opposed to the resources from the CDM. And if we look at the source code here, we can see that we are indeed referencing that file. If we look at at .js, we are going to see a lot of code here, but let's do a search for menu items. And if you look long enough you're going to see code that looks somewhat familiar. If we do a search for menu item, here we see var menu item equals function react component. So it took all of our ES 2015 code, transpiled it into something that would run within the browser. And we don't have to do anything else as far as referencing other files. Everything is here. You can see that the code is going to be somewhat similar, because the concepts are still going to be there. But there are definitely going to be some changes. But that's okay, we don't care about that. As long as it works in the browser, it's fine. So, in the next lesson, we are going to use these tools to write our final example. We're going to incorporate ajax and use the data from a HTTP request in a component.

Back to the top