Join Carl Peaslee for an in-depth discussion in this video Project overview, part of React: ES6, ES2016, and Beyond.
- [Instructor] During this course, we're going to put our new ES 2016 skills to work on a practice project, which I'm calling Plot.Cool. In my free time, I also like to do some creative writing and I've always thought it's really neat the way IDEs, like Atom or Sublime Text, highlight the scripts and syntax, in this kind of colorful, but easy-to-understand way. I think it would be neat if we brought some of that to creative writing. So, I've come up with a project where we're going to make a web-based, interactive development editor, but for maybe poems or short stories.
Let's take a second to look at what our final project's going to be like. You can see here on my desktop. I've downloaded the exercise files and I've navigated here, into the FinalProject directory. Now, in my terminal, I'm going to install all the dependencies and remember, in this course, we're going to be using YARN, but if you have a Windows and you can't get YARN to work, NPM will work the same. You can just say npm install. They do the same thing. Right now, we're installing all of our dependencies.
I got a small error warning, while installing my dependencies. But I can see here that it was for an optional dependency, so it shouldn't actually affect my program. Now, we'll start up with yarn start. You can also do npm start. The page should open up in my browser. And here you can see a preview of our plot.cool app. On the right side, I have a text editor. And I also, on the left, have some rules.
I can make a new rule. And maybe on this rule I want to say whenever I have the words, text editor, I want the color to be red and you can see that my text changes. I could make new rules. And then we're also working with a remote API, so maybe I like to make the rules and I think that's fun, but I'm having a hard time coming up with text. I can just fill some in. And we'll just go to our remote Shakespeare API and it'll put in a nice poem for us.
So, now that we know what we're working towards, let's get our project set up. I'm going to go into my terminal. And I'm going to shut down my YARN server. I'm going to cd out of this file. And now I'm in my user root directory. I'm going to clear the terminal. All right, we've seen what our project looks like and, in the next video, we're going to set it up, using Create React App and get to work on our application.
- Using const and let
- Importing and exporting modules
- Arrow functions
- Destructing assignments
- Arguments and template literals
- Extended parameter handling with the spread operator
- Generating custom styles
- Classes, getters and setters