Dissecting React JS Course Introduction
Hi and welcome to this Dissecting React.js course. I'm really excited to start going through the course material with you and before we do that, I want you to see the application we're going to build by the end of it.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

Now the application I have right here is the real app that we're going to build, this isn't a prototype.

large

I have actually finished filming the entire course, so I'm kind of traveling back in time, is what it feels like, to show you exactly what you are going to have built out by the end of this course and it's pretty exciting, all of the features that you are going to have.

The end goal with this is that you as a developer, you as a student, by the end of this, are going to have the full skillset you're going to need in order to get a React development job, to work on freelance projects that are based on React, or build your own applications. You're gonna have all of the skillsets you need in order to do that and so, let's walk through the application you're going to build out.

Starting off on the homepage, you're gonna have a full portfolio where you can showcase each one of the projects that you build as you go through the curriculum or maybe that you've built before or passion projects, anything like that and as you go along your development journey, you can add on to these.

And a very cool thing about this is this application is communicating with outside API's, so you're gonna learn how to perform tasks, such as logging in and having authentication with an API, building in the ability to create records, to update records, to delete records.

So all of the data that you're seeing here on the homepage, none of this is hard coded, this is all coming in from an API, so you'll be able to have this really nice user interface, showcase all of the image, all of the projects that you've created and it all has a really nice UI.

You'll learn how to work with filters and so, if you click on one of these filters, you'll see here at the top that each one of your portfolio items will be categorized and users will be able to filter through them and see what types of projects you like to build.

large

You'll also have content pages, such as an About page, and a Contact page, and then a full Blog page, so this is where you can showcase the things that you're learning or that you want to write about. Showing you the authentication side, you're gonna have a full login form here where you login and the application's gonna be fully dynamic.

If you notice here at the nav bar at the top, now that we're logged in, we have links that were not there before.

large

You learn how to log out of an application and here we have a full portfolio manager, so all of those portfolio items that you'll see on the homepage, you have access to edit all of those.

large

So right here you can either create a new one from scratch or you can edit them just like this,

large

and you can have the same type of behavior with your blogs. So if you come down here, now you'll see this little icon on the bottom-right, this is a sticky icon you might see in a lot of other popular applications.

large

You can click on this and you're gonna learn how to work with modals, so without even leaving the page, you'll have the ability to add your own blog posts, you're gonna learn about rich text editors.

As you can see right here, we have the ability to create fully-formatted, what you see is what you get, text editing with formatting and different fonts and even the ability to add images.

large

You'll learn how you can implement the ability to click and drag images from the file system right into your application with content and then be able to save those. You'll be able to do the same thing with featured images, like I'll show right here.

large

So if I click save now, now we've created this new post in a matter of moments and you're gonna build all of this completely from scratch and then you'll have blog posts that showcase each one of those skillsets and all of this is live data stored on the server where you've communicated with an API in order to make that happen.

One final thing that's really cool, you're also going to learn how to click to edit or build a click to edit feature. So if you're logged in as an admin and you click on the title, you'll automatically convert into a form.

large

These are features that you will not see in a traditional introduction to React course. I didn't want to build another intro to React course, I don't really like those that much, because what I've seen is that they only will take you so far, they don't really give you the skillsets you need to become a true professional developer and that's what I have, that's the goal I have for this course is by the end of it, I want you, not just to be able to build this portfolio application.

My goal is, by the end of this course, you'll be able to build any React application that you want to build. So I'm very excited to start building this out with you, so with all of that being said, let's start to get into the code.

Resources