Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Blender
2021-01-01 11:16:50
30-Day Money-Back Guarantee

This course includes:

  • 22 hours on-demand video
  • 26 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
Development Web Development React

React JS- Complete Guide for Frontend Web Development [2021]

Become an expert React JS Developer. Learn HTML, CSS, JavaScript, ES6, React JS and jQuery.
Rating: 4.3 out of 54.3 (1,131 ratings)
86,741 students
Created by EdYoda Digital University, Qaifi Khan, Mavludin Abdulkadirov
Last updated 4/2020
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Learn to create basic web pages using HTML5
  • Learn to style and add animations to bring those basic web pages to life using CSS3
  • Learn the Javascript language from basic to advanced along with the Next Gen JS - ES6
  • Learn to create responsive and interactive web pages using Javascript and jQuery
  • Create user-friendly, beautiful, light and fast websites using React JS
  • Become an expert front end developer using ReactJs

Course content

6 sections • 202 lectures • 21h 57m total length

  • Preview01:54
  • Preview05:23
  • Preview03:33
  • HTML - Adding Heading in a Webpage
    02:41
  • HTML - Adding Paragraph in a Webpage
    04:13
  • HTML - Adding Images in Web Pages
    06:09
  • HTML - Creating Ordered and Unordered Lists
    06:55
  • HTML - Adding Styles and Formatting HTML Elements
    10:23
  • HTML - Block and Inline Display Values
    06:51
  • HTML - Adding group styles using Class attribute
    06:06
  • HTML - Adding HyperLinks in Webpages
    04:16
  • HTML - Using links to connect Webpages
    03:16
  • HTML - Uniquely Identify HTML Element by using ID attribute
    04:34
  • HTML - Mini-Project 1: Favorite Foods Webpage
    00:47
  • HTML - Mini-Project 1: Solution
    12:18
  • HTML - What makes HTML5 Better?
    02:09
  • HTML - New Elements & Attributes in HTML5
    00:52
  • HTML - Design Page Structure Using Semantic Elements
    09:38
  • HTML - New Semantic Elements: <details> and <summary>
    03:24
  • HTML - Introduction to Tables
    06:25
  • HTML - Span table rows and columns
    02:55
  • HTML - Design layouts using Tables
    05:49
  • HTML Tables - Practice Problem 1
    00:41
  • HTML Tables - Practice Problem 1: Solution
    13:31
  • HTML - Introduction to Forms
    04:03
  • HTML - Form Input Types
    08:15
  • HTML - Adding Styles to Forms
    05:41
  • HTML - Form Methods: GET and POST
    05:17
  • HTML - New Form Elements
    03:46
  • HTML - New Form Input Types
    05:50
  • HTML - New Form Input Attributes
    03:53
  • HTML - Form Validation
    05:08
  • HTML - Forms Practice Problem 1
    00:48
  • HTML - Forms Practice Problem 1 - Solution
    10:25
  • HTML - Adding Videos in a Webpage
    03:33
  • HTML - Adding Audio in a Webpage
    03:13
  • HTML - The <embed> element
    01:48
  • HTML - Embed Youtube Videos in a Webpage
    02:57
  • HTML - Introduction to SVG
    08:53
  • HTML - Create circle using SVG
    07:00
  • HTML - Create a rectangle using SVG
    05:48
  • HTML - Final Project
    01:43

  • CSS - Introduction
    02:29
  • CSS - How to use CSS?
    11:33
  • CSS - Styling Text
    11:13
  • CSS - Adding Borders
    05:48
  • CSS - Margin and Padding
    05:15
  • CSS - Styling Lists
    05:17
  • CSS - Styling Links
    05:11
  • CSS - Styling Buttons
    06:54
  • CSS - Adding Icons
    05:44
  • CSS - Working with Display Values
    04:04
  • CSS - Display value: Inline-Block
    06:50
  • CSS - Positioning HTML Elements Part-1
    08:20
  • CSS - Positioning HTML Elements Part-2
    03:20
  • CSS - Handling Content Overflow
    03:27
  • CSS - Floating HTML Elements
    03:38
  • CSS - Box Model
    03:57
  • CSS - Box Sizing
    03:53
  • CSS - Adding Shadows
    04:54
  • CSS - Combinators Part-1
    05:23
  • CSS - Combinators Part-2
    06:20
  • CSS - Pseudo Classes Part-1
    06:18
  • CSS - Pseudo Classes Part-2
    07:48
  • CSS - Pseudo Elements
    07:30
  • CSS - Adding Backgrounds
    05:21
  • CSS - Gradients
    07:43
  • CSS - Handling Text Overflow
    04:01
  • CSS - Practice Problem-1: Create Google.com Look-Alike
    00:59
  • CSS - Practice Problem-1: Create Google.com Look-Alike Solution
    31:49
  • CSS - Introduction to Responsive Web Design
    01:19
  • CSS - Viewport
    04:55
  • CSS - Dynamic Size
    04:31
  • CSS - Introduction to Media Queries
    03:27
  • CSS - Responsive Webpage Design using Media Queries
    13:00
  • CSS - Flex Layout
    02:42
  • CSS - Flex Container Properties
    07:21
  • CSS - Align Flex Items
    07:41
  • CSS - Flex Item Properties
    05:26
  • CSS - Design Topbar using Flex
    03:52
  • CSS - Responsive Grid using Flex
    04:20
  • CSS - Transform Property
    07:38
  • CSS - Align Elements using Transform Property
    03:01
  • CSS - Transition Property
    07:01
  • CSS - Animation Property
    08:47
  • CSS - Flying Rocket Animation using Animation Property
    02:50
  • CSS - Introduction to Grid Layout
    02:31
  • CSS - Grid Container Properties
    08:28
  • CSS - Grid Item Properties
    08:36
  • CSS - Final Project Problem Statement
    02:48

  • JavaScript - Introduction
    02:53
  • JavaScript - Introduction to Variables, Operators and Expressions
    07:42
  • JavaScript - Variables
    08:04
  • JavaScript - Numbers
    07:10
  • JavaScript - In-Built Number Functions
    08:14
  • JavaScript - Strings
    07:20
  • JavaScript - In-Built String Functions Part-1
    11:13
  • JavaScript - In-Built String Functions Part-2
    13:47
  • JavaScript - Null and Undefined Values
    03:27
  • JavaScript - Conditional Statement: If-else
    04:12
  • JavaScript - Conditional Statement: Switch
    06:45
  • JavaScript - Arithmetic Operators
    06:37
  • JavaScript - Assignment Operators
    05:08
  • JavaScript - Comparison and Logical Operators
    07:07
  • JavaScript - Implicit Type Coercion
    08:23
  • JavaScript - Explicit Type Coercion
    05:28
  • JavaScript - Objects
    05:11
  • JavaScript - Arrays Part 1
    06:33
  • JavaScript - Arrays Part 2
    06:11
  • JavaScript - Introduction to Loops
    01:54
  • JavaScript - While Loop
    02:07
  • JavaScript - For Loops
    04:54
  • JavaScript - Functions
    05:39
  • JavaScript - Function Arguments
    08:31
  • JavaScript - Scope and Environment
    09:05
  • JavaScript - Variable Hoisting
    03:45
  • JavaScript - Function Hoisting
    04:55
  • JavaScript - Introduction to DOM
    06:05
  • JavaScript - Select HTML Elements
    08:30
  • JavaScript - Query Selectors
    04:58
  • JavaScript - Update HTML Elements
    12:31
  • JavaScript - Updating Styles
    12:43
  • JavaScript - Intro to Events
    13:46
  • JavaScript - Add and Remove Classes from HTML Elements
    10:21
  • JavaScript - Getting Styles
    14:06
  • JavaScript - Form Events
    12:37
  • JavaScript - Keyboard Events
    07:50
  • JavaScript - Mouse Events
    14:07
  • JavaScript - Create HTML Elements - Part 1
    15:08
  • JavaScript - Create HTML Elements - Part 2
    10:26
  • JavaScript- Update and Delete HTML Elements
    08:32
  • JavaScript - Introduction to Browser Object Model
    09:51
  • JavaScript - Screen and Navigator Object
    05:04
  • JavaScript - History and Location Object
    05:03
  • JavaScript - Mini-Project 1: Smartwatch Showcase
    01:05
  • JavaScript - Mini-Project 2: Calculator App
    00:50
  • JavaScript - Introduction to Regular Expressions
    05:22
  • JavaScript - Meta-characters and Character Classes
    09:59
  • JavaScript - Regex Quantifiers
    10:09
  • JavaScript - Using Regex inside JavaScript
    07:17
  • JavaScript - Regex Groups
    10:36
  • JavaScript - Form Validation using Regex
    08:37
  • JavaScript - Introduction to Object Oriented Programming
    04:32
  • JavaScript - The "this" Keyword
    04:56
  • JavaScript - Constructor Functions
    06:08
  • JavaScript - Inheritance and Prototype Chain
    04:29
  • JavaScript - Prototype Implementation
    08:45
  • JavaScript - Understanding Frontend and Backend
    02:08
  • JavaScript - HTTP Request and Response
    04:21
  • JavaScript - Introduction to JSON
    08:03
  • JavaScript - Introduction to AJAX
    05:56
  • JavaScript - Handling HTTP Response
    04:52
  • JavaScript - Working with HTTP Response Data
    05:14
  • JavaScript - Making HTTP Post Requests
    08:52

  • jQuery - Introduction
    02:42
  • jQuery - Selectors and Filters
    10:24
  • jQuery - Add/Update HTML Elements
    06:03
  • jQuery - Add/Update Styles
    07:22
  • jQuery - Handling HTML Events
    07:11
  • jQuery - Making AJAX Calls
    05:01

  • ES6 - Introduction
    04:10
  • ES6 - Variable Creation using "let" and "const"
    04:13
  • ES6 - Template Strings
    06:12
  • ES6 - Arrow Functions
    03:39
  • ES6 - Rest Operator
    03:55
  • ES6 - Spread Operator
    05:27
  • ES6 - Destructuring
    07:52
  • ES6 - Array Functions: map()
    08:40
  • ES6 - Arrow Functions: reduce()
    05:14
  • ES6 - Arrow Functions: filter()
    04:17
  • ES6 - Arrow Functions: find() and findIndex()
    04:01
  • ES6 - Introduction to Classes
    04:24
  • ES6 - Inheritance in ES6
    07:20
  • ES6 - Callbacks and Promises
    05:17
  • ES6 - Working with Promises
    06:30
  • ES6 - Chaining Promises
    07:43

  • ReactJS - Introduction
    03:11
  • ReactJS - Understanding SPAs and MPAs
    03:24
  • ReactJS - Creating our First React App
    06:31
  • ReactJS - Project Structure created by CRA
    03:45
  • ReactJS - Introduction to JSX
    11:46
  • ReactJS - JSX Behind the Scenes
    07:53
  • ReactJS - Adding Styles to React Elements
    07:34
  • ReactJS - Create React Elements Dynamically
    04:38
  • ReactJS - Creating our First React Component
    06:40
  • ReactJS - Passing Data to Components using Props
    06:49
  • ReactJS - Import and Export of Modules
    09:04
  • ReactJS - Introduction to CSS Modules
    06:21
  • ReactJS - Creating Mobile Responsive Components
    01:36
  • ReactJS - Stateful vs Stateless Components
    02:44
  • ReactJS - Creating Class-based Components
    09:43
  • ReactJS - More about setState() Method
    05:39
  • ReactJS - Passing Props to Class-based Components
    11:01
  • ReactJS - Passing Function as Props
    10:20
  • ReactJS - Practice Problem: Product Details Page
    01:31
  • ReactJS - Practice Problem: Product Details Page [Solution] - Part 1
    31:37
  • ReactJS - Practice Problem: Product Details Page [Solution] - Part 2
    27:21
  • ReactJS - Practice Problem: Product Details Page [Solution] - Part 3
    15:49
  • ReactJS - render() method - Behind the scenes
    02:57
  • ReactJS - Component Lifecycle - Creation
    05:52
  • ReactJS - Component Lifecycle - Updation
    06:39
  • ReactJS - shouldComponentUpdate() Lifecycle Method
    05:38

Requirements

  • Should have basic knowledge of operating Computer

Description

What's this course about?
This course is a complete guide to become an expert front-end web developer. It contains all the tools and technologies that you should be proficient in work as a React Developer.

  • We will go through the journey of learning HTML5, CSS3, Javascript, ES6, jQuery, and React JS.

  • Each of these course modules has a project which you can work on.

  • Along with the project problem statement video, you will also find the solution video for that project. It is advised to first try working on the project by yourself.

  • Once you have completed working on it,  you can see the solution video to know what are the best practices and the most optimized way to complete it.

  • As you keep on creating new projects, start adding them to your GitHub repository so that by the end of the course you will be having a place to showcase all your work.

  • You will definitely enjoy the journey while completing the course!

Who's teaching you in this course?

I am a Computer Science graduate highly rated instructor with a rating of 4.3 and more than 200k students on Udemy, I have been part of the corporate circle since his college days. In his early days, I was part of a startup team delivering production grid android apps. Currently, I am a lead developer at EdYoda. I’m responsible for the entire front-end development & integration with the back-end. React, Python, Django is my areas of expertise. I have been delivering corporate training for Android, React, Javascript, Python & Django. I have eyes for details & that makes him suited for delivering a finished product. I’m a fitness freak & working out is his favorite thing to do in his spare time.

I want everyone should enjoy learning and I have shared my knowledge that gonna be helpful for React developers.

Why ReactJs?

You know Companies Worldwide Require React JS Developers.

React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing ReactJs. Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, eBay, Airbnb, and more. Why are businesses so interested in React.js implementation? Here are the benefits of adopting the framework:

  • Increased app development speed. The framework accepts HTML code input and has excellent subcomponent rendering support. Development teams can benefit from JSX as well — it’s an extension with a range of shortcuts that cuts the amount of code writing time.

  • Improved code stability. React.js reduces the impact of change in the code file since the changes in parent components don’t affect the children. Such a data binding approach facilitates software testing and helps ensure stable app performance after update deployments.

  • SEO-friendliness. React.js deals with the inability of search engine crawlers to process JS-heavy pages. Even a beginner with an entry-level react developer salary can deploy React on a server and use the virtual DOM to view the code as a regular web page in a browser.

  • Robust toolkit. React.js has a wide range of debugging and interface design tools.

  • Strong user community and an affordable remote react developer salary. Since a large number of teams are deploying the framework, the tool is regularly updated. There’s no shortage of user-generated content either — you can find dozens of helpful React tutorials and case studies to make the most out of the framework.

Asking for a Senior react developer salary. It’s one of the most in-demand frameworks at the moment — that’s why business owners are willing to find professionals with a moderate mid-level react developer salary within and beyond their home regions.

Enroll now!! see you in class.


Happy learning
Team Edyoda

Who this course is for:

  • Beginners who want to learn Web Development from scratch
  • Freshers who want to become a React Frontend Developer
  • Programmers who want to learn Javascript language
  • Developers who want to learn React JS

Instructors

EdYoda Digital University
Visit us at www.edyoda.com
EdYoda Digital University
  • 4.2 Instructor Rating
  • 11,494 Reviews
  • 422,983 Students
  • 15 Courses

EdYoda is re-imagining skill based education, educating on job-relevant real world skills.

Edyoda courses are on job-relevant technical skills. We have professional team of instructors, some of the courses we specialize in are Web development, Mobile App Development, Cloud & DevOps, Machine Learning, Artificial Intelligence and Big Data.

We believe that access to education and opportunities is the biggest enabler and we are on a mission to enable the same for everyone across the world.

Qaifi Khan
Trainer at EdYoda
Qaifi Khan
  • 4.3 Instructor Rating
  • 5,949 Reviews
  • 263,922 Students
  • 8 Courses

Qaifi is a Computer Science graduate. He has been part of the corporate circle since his college days. In his early days, he was part of a startup team delivering production grid android apps. Currently, he is a lead developer at EdYoda. He is responsible for the entire front-end development & integration with the back-end. React, Python, Django are his areas of expertise. He has been delivering corporate training for Android, React, Javascript, Python & Django. He has eyes for details & that makes him suited for delivering a finished product. He is a fitness freak & working out is his favorite thing to do in his spare time.

Mavludin Abdulkadirov
Mavludin Abdulkadirov
  • 4.3 Instructor Rating
  • 1,533 Reviews
  • 108,880 Students
  • 2 Courses

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.