In this video, Emmanuel Henri shows you how to get the base project started, what the pieces are, and about the project's directories and files.
- [Instructor] The base project we will use is a three year old simple webpage using Bower and Grunt as the dependencies and task runner and Bootstrap as the fronted framework. So feel free to use your own vanilla project to convert, but if you don't have one, it's in the folder resources. Okay, so let's go into the Exercise Files click on resources, then copy the LegacyStart, and paste is on your Desktop or wherever you want to work on that project.
And I'll just rename it Legacy, okay perfect. So before we move on, let's make sure that you have Node installed. If you don't have Node installed on your system, go to Nodejs.org/english or whichever language you speak, and then click on the LTS download and then install that file. I already have it in my system so I'm not going to do that. And then go inside of your Editor is our case its VS Code and let's load the particular folder we just added to our Desktop, like so.
And then let's open the integrated terminal in VS Code or use whatever terminal you have available to you. And we are already in the right folders, so the first thing I need you to do is make sure that we have Bower installed. So we'll do this by doing: install, npm install, and when you do a global install you may need to do a sudo, so I'm going to do that just so you don't forget. If you don't do sudo and you get an error, that means you need to do sudo.
Let's install globally, we'll install Bower, enter your password, once you have Bower installed, let's do an npm install in that particular directory. So we install all the dependencies that we have in our package: .json. Then let's do a Bower install. So this is definitely something that you may need to install if you don't have it. This is a fresh new system, when we do courses, so definitely, I need to install this before I continue.
And let's make sure we install that, so if you get that warning, do install it. If you don't then fast forward to the next step and we'll continue. Okay. So this is done, let's go back to our VS Code. And let's do a Bower install again. Good, now we need to do an: npm sudo because we'll install this globally: grunt-cli. Oh, I didn't do npm. Okay, so let's redo that. Perfect.
So make sure that you are in the Directory of our project and once you are in then do: grunt server, and this will start our little project. And this is the Vanilla Project before we start working on it, on the react side. So let's quickly explore what's inside of that project. So, all the main files are in the app here, so we got our index.html here. We've got our styles in this folder, we got some scripts here, so nothing much happening here.
So if you add any scripts that you wanted to run with this projects, this is where you would do it. The bower_components, the node_modules, the tests, and then you have all the config files that comes with the projects. So, now it's running as it should. So as you can see this project is showing it's age. You know, using Grunt and Bower, this is something that has been going out of style recently. So, and this will be the project we'll convert it to a React one piece by piece.
- Creating a new React project
- Installing and working with React Developer Tools
- Dissecting a project into components
- Setting up the state with static data
- Adding and finalizing CSS in components
- Setting up and leveraging Firebase
- Standard code best practices
- Installing and setting up Flow for type checking