React practice course, learn by practicing
Loại khoá học: Web Development
Including three full practice project, a landing page, a Firebase project and a fullstack with Mongo DB and Node.
Mô tả
Do you want to practice your React coding or just to learn it by creating webpages ?. This is the course for you.
Because sometimes the best way to learn its by practicing and because most of the courses teach you the just the basics and give you a todo app, I wanted to create something different. We will create Three real life projects, so we can practice our react coding in a more real environment.
If you don’t know much of React, no worries. We will start simple with a static landing page , then we will go to a much more compete project with authentication and DB and last but not least we will create am e-commerce style project with user cart, PayPal, not only that we will create our own server to handle all the requests.
If you know nothing about React, don’t worry, I added a bonus section with a tiny React course so you can understand the basics and how react works. So you can start from there and then go to the practice projects.
To sum everything up, this what we will be creating in this course:
Project one ”The venue”:
How to create a project with React CLI
Creation of components
Using third party libraries
Creating transitions on reveal and carrousel.
Using parts of Material UI to make our app better.
Deployment of a static webpages to SURGE.
Project two “M City”:
Creating of routes to navigate our project
More complex animations and transitions
Rendering components using data from a server
We will use authentication and create an Admin endpoint
Firebase uploads and storage
Add a database on a server to work with
Deployment of the project to Firebase
Project three “Waves”:
E-Commerce style application
Creation of dynamic routes
Using REDUX as store.
Authentication, user dashboard and admin dashboard
Create a server with Node JS and express
Add database to our Project with Mongo DB
Creating different routes to process the requests
Add cart items to user account
Complete checkout with Paypal
Deployment to Heroku
And as a bonus just like tiny React course, you will get additional React components to the projects.
Bạn sẽ học được gì
Gain more knowledge to build better or more complex websites.
Yêu cầu
- A little bit of ES5 and ES6.
Nội dung khoá học
8 sections
intro
02:02
The venue - Project preview
02:06
M City - Project preview
02:51
Waves - Project preview
06:27
IDE
02:08
Installing NODE
02:08
Starting a fresh project
11:02
Creating the header
11:29
The sidedrawer
16:26
Toggling header state
08:16
Creating the footer
07:38
Adding a carrousel
17:43
Creating the countdown
15:48
Finishing the countdown
09:35
The venue NFO
11:24
Creating the highlights
22:01
Reusable button
11:35
Pricing section
13:28
Gmaps component
05:19
Adding the scroll to
08:16
Installation
13:38
The Header
16:41
Creating the footer and the logo
10:41
The sign in form
21:46
Sign in users
20:31
Log out and toasts
16:12
Auth guards
21:32
Creating the dashboard layout
21:11
Starting with React-move part one
17:48
Starting with React-move part two
07:53
Animating the stripes
13:16
Finishing animations
17:54
Importing data to firestore
16:09
Home matches part one
21:52
Home matches part two
13:42
Meet the players part one
17:49
Meet the players part two
14:18
Email promotion form
17:50
Finishing the Email promotio
11:58
Admin players list part 1
21:32
Admin players list part 2
14:05
Add/edit player part 1
17:11
Add/edit player part 2
21:22
Add/edit player part 3
13:27
Uploading player images part 1
16:32
Uploading player images part 2
19:29
Uploading player images part 3
18:30
Creatiing 'the team' section
19:33
Finishing 'the team' section
09:34
Admin matches list
16:26
Add/edit match part 1
15:18
Add/edit match part 2
20:38
Add/edit match part 3
17:05
Add/edit match part 4
07:55
Creating the league's table
20:06
Filter matches part 1
21:24
Filter matches part 2
17:36
Not found
04:33
Changing the rules
09:11
Deploying
09:57
Overview and installing
17:58
Creating the server
17:29
Creating the routes
23:35
Creating the user model
20:02
Connecting to Mongo DB
15:49
Adding users to the DB
19:05
Hashing password and generating tokens
22:25
Handling errors part 1
15:13
Handling errors part 2
08:12
Sign in users
19:50
Using passport part 1
14:48
Using passport part 2
21:04
Creating roles
21:55
GET user profile
20:21
PATCH user profile
13:56
PATCH user email
13:59
Sending emails part 1
19:52
Sending emails part 2
18:06
Sending emails part 3
12:44
POST brands
19:45
GET and DELETE by id
18:43
GET all brands
10:57
Creating a product model
18:52
POST product
13:02
Using express validator
13:44
GET, PATCH, and DELETE products
19:38
Get ALL products
10:19
Paginate products part 1
17:05
Paginate products part 2
19:43
Paginate products part 3
15:15
Adding site args
16:47
GET and PATCH site args
09:03
Preparing the client
15:39
Starting routes
08:42
Connecting to redux
20:58
Creating the header and the footer
15:51
Adding the slider
17:07
Reusable BTN and promotion block
17:31
Redux intro (skip is you know redux)
16:13
Getting by sold and by date products
20:22
Loading by sold and by date from store
11:06
Creating the cards
18:53
Finishing home cards
13:27
Creating a notification system
20:42
Clearing notifications
05:36
Register users part 1
19:00
Register users part 2
21:03
Sign in users
03:49
Auto sign in users
20:21
Log out users
11:19
Creating the dashboard layout
16:59
Route guards
17:29
Patching user profile part 1
17:50
Patching user profile part 2
10:52
Creating the edit email part 1
18:21
Creating the edit email part 2
18:07
Creating the edit email part 3
12:52
Admin products - index page part 1
17:39
Admin products - index page part 2
19:28
Admin products - index page part 3
09:08
Admin products - index page part 4
22:04
Admin products - index page part 5
11:12
Add product page part 1
18:13
Add product page part 2
23:46
Add product page part 3
15:41
Uploading product image part 1
20:02
Uploading product image part 2
17:55
Uploading product image part 3
17:33
Editing products part 1
15:40
Editing products part 2
15:41
Shop - getting products part 1
20:35
Shop - getting products part 2
18:58
Shop - keyword search
12:35
Shop - checkbox filters part 1
19:43
Shop - checkbox filters part 2
11:27
Shop - range filters
15:12
Product detail part 1
21:49
Product detail part 2
09:50
Product carrousel
10:32
Add to cart modal
18:32
Dispatching the cart
11:31
Showing cart items
19:22
Client Paypal button - part 1
21:52
Client Paypal button - part 2
12:04
Paypal on the server - part 1
20:48
Paypal on the server - part 2
16:30
Showing the user history
11:51
Getting site vars
12:02
Updating site vars
22:52
Deploying
23:50
Read this first !!!
00:15
Project setting up
05:47
Creating the Header
11:42
Header sidedrawer
16:02
Finishing the Header
06:36
Important about next section !!
00:07
Slider section
12:33
Adding a countdown
07:59
Finishing countdown
09:44
Venue NFO component
09:58
Highlight section
15:52
Button reusable component
08:07
Adding prices
14:34
Footer and Location section
07:42
Adding a Scroll To
10:20
Deployment to Surge
05:55
Get it from Github !!
00:03
Read this first !!!
00:12
Project setting up
08:03
Adding a Header
13:56
Finishing Header, adding Footer
13:02
Home: featured Animation
11:52
Home: featured Animation...continued
17:44
Home: Finishing featured Animation
17:01
Tags RC
13:05
Adding Firebase
13:27
Home: Adding the Match blocks component
14:53
Home: Finishing the Match blocks component
12:48
Home: Meet the players component
11:42
Home: Finishing player card
12:04
Home: Finishing player card...continued
07:07
Home: Enroll reveal component
07:22
Home: Enroll, starting with form fields
16:42
Home: Enroll and form fields 2
18:12
Home: Enroll and form fields 3
14:57
Home: Finishing Enroll and form fields
15:17
Auth: Login component
11:52
Auth: Finishing Login
06:34
Auth: Creating a Dashboard
16:49
Auth: Private Routes
16:38
Auth: Public Routes
08:50
Admin: Matches endpoint
18:44
Admin: Edit Match - creating the form
14:10
Admin: Edit Match - creating the form 2
19:16
Admin: Adding functions
18:38
Admin: Finishing Edit matches
10:37
Admin: Add Match
05:45
Admin: Players Endpoint
09:37
Admin: Add players - creating the form
17:42
Admin: Players fileuploader
20:22
Admin: Players fileuploader ..continued
14:05
Admin: Finshing add players
14:14
Admin: Edit player
15:40
Creating The Team component
23:35
The matches: Creating the component
18:18
The matches: Adding transitions
16:42
The matches: Filters
14:44
The matches: Finishing filters
04:50
Adding a 404 PAGE
04:57
DEPLOY to production.
10:51
Get it from Github !!!
00:03
Installing Mongo DB - MAC
07:27
Installing Mongo DB - WINDOWS
08:24
installing Robo 3T - MAC
03:07
Installing Robo 3T - WINDOWS
03:10
Read this first !!
00:14
SERVER: initial setup
10:58
SERVER: .env and middleware
07:54
SERVER: User model
08:50
SERVER: Registering users
08:32
SERVER: Hashing passwords
09:53
SERVER: Login users and creating tokens
22:10
SERVER: Auth route
17:47
SERVER: Logout
05:02
SERVER: Brand model and routes
15:57
SERVER: Woods model and routes
08:35
SERVER:Adding products
19:55
SERVER: Getting products by ID
12:35
SERVER: Getting product by order.
10:03
Read this first !!!
00:22
CLIENT: Starting with the client
13:36
CLIENT: Header anf footer
19:21
CLIENT: Setting Redux up.
13:00
CLIENT: Adding a Register login component
13:06
CLIENT:Creating the login
13:59
CLIENT:Creating the login 2
20:09
CLIENT:Creating the login 3
10:09
CLIENT: Finishing the login
14:43
CLIENT: Creating the Register
15:19
CLIENT: Finishing register
16:17
CLIENT: Creating the dashoard
12:49
CLIENT: Preventing routes
25:32
CLIENT: Header links
16:52
CLIENT: Finishing Header links
13:47
CLIENT:Home slider promotions
18:53
CLIENT:Home cards
13:36
CLIENT: Home cards 2
17:00
CLIENT: Finishing home cards
12:38
CLIENT: Startting the Shop component
17:51
CLIENT: Shop checkboxes
20:19
CLIENT: Finishing checkboxes
24:14
CLIENT: Adding Radio options
22:02
SERVER: Crating the shop route
21:15
SERVER: Finishing the shop route
07:06
CLIENT: Showing Shop cards
11:08
CLIENT: Shop loadmore button
11:56
CLIENT: Shop grids
06:28
ADMIN: Add products form
09:12
ADMIN: Add products form 2
15:17
ADMIN: Add products form 3
18:49
ADMIN: Finishing the Add products form
21:18
ADMIN: Adding the File Upload
19:36
ADMIN: Adding the File Upload 2
19:20
ADMIN: Finishing the File Upload
14:30
ADMIN: Manage Brands component
22:25
ADMIN: Finish Manage Brands.
15:37
CLIENT: Adding the Product Detail component
22:08
CLIENT: Product Info detail
11:34
CLIENT: Product detail, images section
17:59
CLIENT: Finishing the detail, adding Lightbox
16:23
CLIENT: Quick fix to Prod detail
02:34
CLIENT: Adding items to Cart
22:35
CLIENT: Finish the add to cart
12:43
ADMIN: Cart component
20:14
ADMIN: Creating the cart blocks.
13:50
ADMIN: Calculating the total.
10:55
ADMIN: Removing cart items.
19:34
ADMIN: Adding the Paypal btn
21:11
ADMIN: Finishing Paypal.
10:43
ADMIN: Creating the SUCCESS BUY route
17:00
ADMIN: Finishing the SUCCESS BUY route
16:21
ADMIN: Creating the Action and dispatching
12:39
ADMIN: User History
06:57
ADMIN: Updating personal info
15:43
ADMIN: Finishing Update personal info
12:56
ADMIN: Creating the Site Info
16:09
ADMIN: Getting the Site Info
17:06
ADMIN: Finishing Site info
14:41
Get it from Github !!!
00:03
GIT and GITHUB
16:53
Adding SSH keys - MAC USERS
07:16
Adding SSH keys - WINDOWS USERS
07:15
Adding Heroku to the mix
05:10
Deploying the project
15:44
Deploying the project 2
23:34
EMAILS: Using Nodemailer
11:35
EMAILS: Sending a welcome Email
16:31
NOT FOUND: Adding not found route.
03:43
ORDER ID: Adding custom PO
12:09
ORDER ID: Sending email with PO
13:38
FILE UPLOAD: Uploading files
19:36
FILE UPLOAD: Uploading files 2
13:25
FILE DOWNLOAD: Downloading files
04:04
PASSWORD: Adding forgot password 2
14:37
PASSWORD: Adding forgot password
17:02
PASSWORD: Adding forgot password 3
15:39
PASSWORD: Finishing forgot password
08:30
Boilerplate
05:26
Bundle and structure
06:50
Rendering
09:38
JSX
06:51
Structure and exporting
09:45
Dynamic data
04:49
Functional and class based components
07:46
Adding some style
10:21
Events
13:38
A little bit more of classes
07:12
React state
10:59
Using props
10:12
Using props 2
04:40
Using props 3
06:48
Children props
04:15
More on styles
15:36
Using CSS modules
13:50
Filtering state
17:44
Routes: installing it
06:25
Routes: Adding routes
13:46
Routes: Linking
08:27
Routes: Params and URL's
12:25
Routes: Switch
04:43
Routes: Redirections
08:02
React Lifecycles
07:05
React Lifecycles ..continued
13:33
Conditional rendering
07:40
Pure components
05:09
Returning arrays
06:25
HOC's
10:44
HOC's ...continued
09:53
important...Read this !! i
00:08
React transitions
16:25
React transitions 2
09:28
CSS transitions
07:41
Transition group
10:13
Proptypes
18:18
Proptypes 2
03:58
Refs
05:16
Controlled and uncontrolled
18:29
Form template
18:29
Form template 2
14:55
Form template 3
15:49
Adding textarea and select
11:44
Validation
15:58
Validation 2
14:20
REDUX: Installing and connecting
12:26
REDUX: Reducers
17:33
REDUX: Action creators
15:46
REDUX: Dispatch
10:05
REDUX: Containers
05:18
REDUX PRACTICE: Intro and setup
11:43
REDUX PRACTICE: Adding redux to home
17:02
REDUX PRACTICE: Finishing home and adding the artist view
19:38
REDUX PRACTICE: Fixing issues
05:01
Viết Bình Luận
Khoá học liên quan
Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!
Get khoá học giá rẻ ngay trước khi bị fix.
Đánh giá của học viên
Bình luận khách hàng