All language subtitles for 3. Course Overview

Now that you understand a little bit more about material UI and why we're going to be learning it I

want to talk a bit about some of the other topics we're going to be covering in this course we really

are going to be covering a lot of topics which I'm really excited for because these are things that

I really haven't seen covered in other react courses.

And I know you guys are gonna be interested in them so let's just start off with of course material

UI is the main topic of this course.

So we're going to be learning about all of the different components that they provide to us along with

all of the different functionality that's built into those components as well as all of their different

styles and variants and the different ways and options that you have of controlling those.

And then of course customizing it to your own styles and then centralizing those styles with their theming

system.

And we're going to cover even more than that going into server side rendering and media queries and

all sorts of the different functionality and advanced features that material UI has to offer.

So we're going to cover all of that.

And it's really going to prepare you with everything you need to build applications in the future as

well as the ability to understand the documentation when any updates come out in the future for new

components or new functionality responsive design is going to be a another very big topic in this course

and that is something I think is going to be really interesting to you guys because I feel like that

isn't really touched on as much in react courses when you're really just focused on learning the core

of how we react actually works.

But now I'm really going to walk you through how to make sure that the applications that you build look

exactly how you want and perfectly flow for any screen size and orientation.

And it's really going to be a lot easier than you guys think because material UI provides such a good

framework for setting this up and you can actually see on the screen right now the screenshots of that

Web site.

That is my company Web site which will be the project of this course that is going to be the main project

where we're going to learn almost all of the material UI components animations Google Analytics search

engine optimization all the rest of the things that we're going to be covering and the topics I'm going

to cover throughout the rest of this video are going to be learned from building this real production

Web site.

So I hope you guys are super excited for that because I think you're gonna love having this project

on your resumé and is something that you know you can say you've built and I'm really excited to help

show you guys how to do it.

Image optimization is a somewhat smaller topic that you may not have thought of right off the bat when

you start thinking about building applications but it's one that is really important especially in projects

where you do end up with a lot of icons or images you have to make sure that you're properly taking

care of those so that you're not having too large a file sizes which can really cause delays for your

users.

There are a lot of really interesting best practices out there and the little tips and tricks that you

can use to minimize those file sizes.

So I'm going to go over the ones that I have found to be useful and how to integrate those within our

Project Search Engine Optimization is another really hot topic that I'm excited to get into with you

guys because S E O is a buzzword that's thrown around about 10 times a day.

And I'm sure everyone's tired of hearing about it but it really is an important subject and making sure

that your applications can be found properly passed and all the pages can be located for search engines.

That's really important and is going to have an impact on the business of your clients.

So I think the that really isn't talked about enough in react and I'm going to walk you through exactly

what the best practices for that are along with how to precisely integrate that with our live production

react application create react app is something that almost all of you I'm sure are familiar with because

I do expect you to understand basic react to take this course.

But next J.S. might be something that you're not familiar with.

You may have been hearing it here and there in the last year or so and you may be vaguely aware that

it's something new but you may not have the exact idea or understanding of what it really is why people

are using it and what it can really do for you and your react applications.

So I'm going to walk you through that why we use it and why it's so helpful and we're actually going

to migrate our project from create react app to Next j s so we're gonna go through and start the project

with create react app build the whole thing and you'll get to a point where you'll see why next J.S.

is so important and how it solves a problem that arises and I think that that's gonna be really interesting

for you guys and actually showing the process of changing a live project from create react app to Next

j s it's not as hard as you think and I think that that's going to be beneficial for you guys as well.

Google Cloud functions is one of the coolest things I have learned in the last few years because it

really allows you to get rid of all the heavy lifting that's necessary to set up an entire back end

and server setup for react applications when you may only need a very small amount of functionality

out of all of that.

So essentially what Google Cloud functions allow you to do is to store that functionality that code

that function in the cloud at a U.R.L..

The then calls the function every time that you are rel is accessed.

As long as it's accessed in the correct way or with the correct parameters that really enables some

interesting and powerful behavior.

And I really just think makes it a lot more convenient for us as developers and makes our applications

is just a lot more lightweight and easy to understand.

So I'm excited to get into that and how to set that up with Firebase and how easy it really actually

is to host a Google Cloud function Google Analytics is another topic I'm really excited to talk to you

guys about because I really feel like it isn't shown very often.

A full live production integration with a react project and I actually found that that is much easier

to do than I would have expected.

But there were still some caveats and some just interesting things to be aware of.

I'll definitely be explaining to you guys as we go.

I actually am Google Analytics certified and so is part of the integration with react.

I'm also going to give you an overview of Google Analytics itself and kind of the basic core things

you need to know to get started using that and to start analyzing data from your users and making smarter

decisions with your applications using Google Analytics information integration is another important

topic because it really can add a professional look and feel to your react applications that really

is unique and that you don't get out of just out of the box code that you'll find online.

So that's a great way to personalize your designs but I found when I went to implement this I wasn't

really sure of some of the best practices and optimizations for including animations in react so I'm

going to teach you guys the workflow that I've found and fine tuned to really streamline that process

all the way from exporting to rendering your animations within your react application in a performance

optimized manner.

Cross browser support is another great topic to cover in this course because when you see other courses

it's rare that the instructor opens up the project in another browser or on a different device.

And I think that that's very important especially in real world applications is you have to make sure

it looks great in every browser while react does out of the box come with good optimizations that do

help it mostly look correct on other browsers.

There are some considerations to have in mind and little tricks that I found while building these projects

that I'm going to be sharing with you guys.

Finally deployment.

This is where we're actually going to ship out our application put it online and make it live so that

people can interact with it.

I'm going to walk you guys through a handful of the most popular hosting solutions for react so that

no matter what your preferences before this or even if you have no preference you'll understand exactly

how to deploy a live production react application so we're gonna be learning all of these topics across

to complete projects in this course.

So you already caught a glimpse of the first one we're going to be working on my startup Web site and

the other project is going to be more of a web application not a website that is geared towards the

other topics.

They actually weren't covered while building my Web site.

So by building these two real projects you're gonna see every component that there is in material UI.

All of the functionality that has to offer as well as all of these other topics integrated with that

so that you have the complete picture of how to really actually build full scale reactor applications

not cookie cutter applications not default out of the box thrown together in and our applications but

beautiful hi fi Delucchi designed react applications

if that seems like a lot of stuff to cover.

Don't worry we're going to take it just step by step and it's just going to flow.

And by the end of it you're not even going to realize how much you've actually learned.

So if you're excited for that then let's just jump on it for the next video.