2.1 Set Up the Project

In this lesson, we're going to begin by setting up the basic scaffolding for our application. Now in a lot of React and Redux tutorials, you may find that there is a huge amount of tooling to set up before you begin your application. Now this can kind of bog you down when you're trying to learn React and Redux, and it can also be a little bit confusing. You might be left wondering what really is the bare minimum that you need for building a React application. Jack Franklin is a JavaScript developer and in his post, Misconceptions of Tooling in JavaScript, he shows a really basic project setup that is an excellent way to learn to React from scratch. And of course, this will work for Redux as well. So we're going to take a lot of cues from this article. And we're gonna create a very, very simple project setup to begin with, where all of our code is going to go in a single JavaScript file and all of the libraries that we're going to use, which will be very minimal to start with here, are all going to be linked as script tags in our HTML file, just like you may have done it in the old days. Now of course, as our application grows, we're going to find that it's actually much easier to work on a large application when you have a little more of this tooling in place. But we'll start simple with both the tooling and the code, and as our application grows we will adjust our tools to fit the project. So we're here on the terminal and I'll begin by making a project directory. And we'll just call this flashcard-app and then we'll move into that folder and now let's create our package.json file. I just want to do the default for all of those so I'll just sing npm init --yes. And now we have our basic package.json file. Okay, so now it's time to start installing a couple of packages. Now we're gonna try and keep this to a minimum, but there are a couple of things that we need. So let's do npm install --save. And now what exactly do we need? Well, you might think that we're gonna need React and Redux, but for starters we're not actually going to use the NPM versions of those tools. We're just gonna grab them from a CDN, which will make it much, much easier to set up. However, if you looked at much React code before, you know that it's very common practice to use JSX, which is almost like HTML literals inside, which is almost like literal HTML tags inside your JavaScript. It's not quite that simple, but that's what it looks like. And of course, you know that we can't actually write HTML inside our JavaScript, and so we need some way to convert that to actual JavaScript function calls before we can send it to the browser. And so to convert from JSX to actual JavaScript, we're going to use a Babel package and this is called babel-preset-react. Now if we're going to be using Babel, we may as well enjoy some of the ECMAScript 6 syntax, so we'll also include the babel-preset-es2015. Now if we're using these Babel presets, we of course need Babel itself, but we're not gonna use just raw Babel. Instead we're going to use watchify. Now watchify is a browserify wrapper that will watch your file and automatically recompile it. And so if we're using watchify, then we'll also use babelify. Now I realize that already this is looking like a lot of tooling, but this is all the packages we need to convert our JSX React code into code that our browser can run, into actual function calls, instead of the JSX syntax. And we're just throwing in es2015 for good measure. All right, now that's all the tooling we'll need to write our actual JavaScript. However, for starters we're not going to have a back-end to this application. At the very end of this course we'll write a super simple back-end, but until then we can use another and NPM package which will act as our server. npm i --save, and this is called live-server. And this will just reload our code every time we make a change to our JavaScript file. And this package will just make our development workflow a little bit easier. All right, now to use all these packages that we've installed, let's add a few scripts to our package.json file. So we'll open that up, and inside the script block here let's add two scripts. First we'll have the build script. So the build script will run watchify, and what file do we want to watch? Well, that will be in the source directory src/app.js. Then -o will be our output. We wanna output to public/bundle.js. Now we need to run some transforms, of course. This is what will actually transform the JavaScript that we write into the JavaScript the browser will actually run. So we have the -t flag for transforms. And then inside a set of curly braces here, we want to run the babelify transform. Now the babelify transform has some options of its own, so let's do --presets. And inside another set of square brackets we will have the two presets that we want to run here. The first one is the react and the second one is the es2015. All right, now hopefully this setup wasn't too complex. If it was, don't worry. That one line there is all the build tooling that we're going to need. All right, now let's create our server here, so let's add another script called server. And this is gonna be really simple, we'll run live-server. And actually, before we run that, let's cd into the public directory. We'll assume this command will be run from the root of our project, and then we'll call live-server in that directory. Let's give it a --port-1234 will work for me, but you can do whatever you want. And then let's add --entry-file, and that is going to be equal to index.html. And we don't actually have to do this by default. Of course, it will assume that the index.html is the default page to display in the public directory, as you might expect. However, the nice thing about this is that if live-server gets a request that it doesn't have a file for, then it will display index.html by default. So this makes it great for our front-end routing system, right, because we can then build whatever routes we need our front-end application to have, and whenever we refresh the page, this server will automatically send us the index.html file, which is exactly what we want. All right, so let's save and close this, and we have a few other things we need to create. Let's make the public directory, and we also need a source directory. And let's make our src/app.js file. And we also need a public index.html file. We'll start with the most basic code here. I'm going to add a link element here to a stylesheet. Now I should mention at this point, we won't actually be writing any CSS at all in these lessons. Of course, the demo app that you saw did have plenty of styling. However, we're going to focus just on the actual JavaScript code for this. If you want, you can look at the style.css, which will be available in the downloadable source. Now inside the body element here, let's have a div of with an id='root'. And we're gonna have our whole application go in here. Of course, we have our build script creating a public/bundle.js file, so of course, we'll go ahead and add a script tag for that. Now if we go over to the React website, currently the latest version is React v0.14.8. This was actually just released today, I believe, as of this recording. And so for now, let's go ahead and just grab these CDN links here. And I will go ahead and paste those in. Now we also need the latest version of Redux, so let's go to cdnjs.com, and I will search for Redux. Right here, and let me grab the latest version of Redux. And we'll go ahead and create a new script tag here. And of course, if you want, you could download these three libraries and just throw them in your public directory. That reminds me, we don't actually need the word public in there, it's just /bundle. But yeah, you could just take these JavaScript files and download them into your public directory for a little bit of a faster development workflow. However, eventually we're going to be getting rid of these script tags because we're going to bundle everything with bundle.js when our application goes a little bit and we want to start bundling everything together. Okay, so we should be able to see this in action. Why don't I open up our app.js file and for now we'll just console.log('hello react'). All right, so I'm gonna create another terminal tab here and I'll move into our project directory. And now to start our build script, I can just do npm run build. And you can see this will be watching that file now. I'm gonna open up another terminal tab here. Let's do nmp run server. And as you can see, right away our application is opened up in the browser. And if I pop open the terminal, you can see hello react. And notice also that we have live reload available. This is really neat, because our server, here, we're using the live-server package, which will actually reload when anything in this public directory gets changed. So if we come back to our project here, and I change 'hello react' to 'hello react & redux'. I save it, come back to the browser, and you can see the network console logging hello react & redux, which is great and I do not refresh this page. What happened was our app.js file was rebundled because we have watchify working here. It rebundles it and puts it into the public/bundle.js file and then we have our server here. Notice we have file change detected in the bundle.js file, and so it reloads the server for us. All right, so now we've set up a super simple development environment for us to begin building our React application in.