React and React Native (spring 2020)Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Dive in and learn React.js from scratch! Learn Reactjs, Hooks, Redux, React Routing, Animations, Next.js and way more!

Beginner 0(0 Ratings)
Created by Rehan Riaz Last updated Thu, 04-Jun-2020
What will i learn?
  • Build powerful, fast, user-friendly and reactive web apps
  • Provide amazing user experiences by leveraging the power of JavaScript with ease
  • Apply for high-paid jobs or work as a freelancer in one the most-demanded sectors you can find in web dev right now
  • Learn React Hooks & Class-based Components

Curriculum for this course
300 Lessons
Getting Started
16 Lessons
  • Sending a POST Request
  • Module Introduction
  • class Component Lifecycle Overview
  • Optimizing Functional Components with React.memo()
  • Another Form of HOCs
  • React Native Alternatives
  • Introduction
  • What is React?
  • Real-World SPAs & React Web Apps
  • Writing our First React Code
  • Why Should we Choose React?
  • React Alternatives
  • Understanding Single Page Applications and Multi Page Applications
  • Course Outline
  • How to get the Most out of This Course
  • Useful Resources & Links
  • Module Introduction
  • Setup & App Planning
  • Adding a Custom Header Component
  • Adding a Custom Header Component
  • Adding a Screen Component
  • Working on the Layout
  • Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
  • Extracting a Card Component (Presentational Component)
  • Color Theming with Constants
  • Configuring & Styling a TextInput
  • Cleaning User Input & Controlling the Soft Keyboard
  • Cleaning User Input & Controlling the Soft Keyboard
  • Cleaning User Input & Controlling the Soft Keyboard
  • Showing an Alert
  • Time to Finish the "Confirmation Box"
  • Adding Random Number Generation
  • Switching Between Multiple "Screens"
  • Adding Game Features: Hints & Validation
  • Checking the "Win" Condition with useEffect()
  • Finishing the Game Logic
  • Finishing the Game Logic
  • Adding Custom Fonts
  • A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
  • Adding Local Images
  • Styling Images
  • Working with Network (Web) Images
  • A Closer Look at the "Text" Component (and what you can do with it)
  • Building a Custom Button Component
  • Adding Icons
  • Exploring UI Libraries
  • Managing Past Guesses as a List
  • Styling List Items & Lists
  • ScrollView & Flexbox (Yes, that works!)
  • Module Introduction
  • What To Debug & How To Debug?
  • Running the App on a Real Device & Debugging
  • Handling Error Messages
  • Understanding Code Flow with console.log()
  • Using the Remote Debugger & Breakpoints
  • Working with the Device DevTools Overlay
  • Debugging the UI & Using React Native Debugger
  • Finishing the Modal Styling
  • Module Introduction
  • How to work with React Native Components
  • Setting Up A New Project
  • Planning the App
  • Planning the App
  • Working with Core Components
  • Getting Started with Styles
  • Flexbox & Layouts (Intro)
  • React Native Flexbox Deep Dive
  • Inline Styles & StyleSheet Objects
  • Working with State & Events
  • Outputting a List of Items
  • Styling List Items
  • Making it Scrollable with ScrollView!
  • A Better List: FlatList
  • Splitting the App Into Components
  • Passing Data Between Components
  • Working with Touchable Components
  • Deleting Items
  • Adding a Modal Overlay
  • More Flexbox Styling
  • Closing the Modal & Clearing Input
  • Welcome!
  • What is React Native?
  • How React Native Works
  • Expo vs React Native CLI
  • Expo vs React Native CLI
  • Creating Our First React Native App
  • Working on Our First App
  • React Native Apps Are Hard Work!
  • React Native Alternatives
  • Course Requirements
  • Running the App on an Android Emulator
  • Running the App on an iOS Simulator
  • Course Outline
  • Course Outline
  • How to get the Most out of This Course
  • Module Introduction
  • Routing and SPAs
  • Setting Up Links
  • Setting Up Links
  • react-router vs react-router-dom
  • Preparing the Project For Routing
  • Setting Up and Rendering Routes
  • Rendering Components for Routes
  • Rendering Components for Routes
  • Switching Between Pages
  • Using Links to Switch Pages
  • Using Routing-Related Props
  • The "withRouter" HOC & Route Props
  • Absolute vs Relative Paths
  • Absolute vs Relative Paths (Article)
  • Passing Route Parameters
  • Module Introduction
  • Firebase & The Right Database
  • Firebase & The Right Database
  • Creating the Firebase Project
  • Creating the Axios Instance
  • Displaying a Spinner while Sending a Request
  • Handling Errors
  • Retrieving Data from the Backend
  • Removing Old Interceptors
  • Handling Errors Locally
  • Adding Interceptors to Execute Code Globally
  • Adding Interceptors to Execute Code Globally
  • Removing Interceptors
  • Removing Interceptors
  • Setting a Default Global Configuration for Axios
  • Creating and Using Axios Instances
  • Module Introduction
  • Understanding Http Requests in React
  • Understanding our Project and Introducing Axios
  • Understanding our Project and Introducing Axios
  • Creating a Http Request to GET Data
  • Creating a Http Request to GET Data
  • Rendering Fetched Data to the Screen
  • Transforming Data
  • Making a Post Selectable
  • Fetching Data on Update (without Creating Infinite Loops)
  • POSTing Data to the Server
  • Sending a DELETE Request
  • Fixing a Bug
  • Module Introduction
  • Planning an App in React - Core Steps
  • Planning our App - Layout and Component Tree
  • Planning the State
  • MUST READ: Enabling CSS Modules
  • Setting up the Project
  • Creating a Layout Component
  • Starting Implementation of The Burger Builder Container
  • Adding a Dynamic Ingredient Component
  • Adding Prop Type Validation
  • Starting the Burger Component
  • Starting the Burger Component
  • Outputting Burger Ingredients Dynamically
  • Calculating the Ingredient Sum Dynamically
  • Adding the Build Control Component
  • Outputting Multiple Build Controls
  • Connecting State to Build Controls
  • Removing Ingredients Safely
  • Displaying and Updating the Burger Price
  • Adding the Order Button
  • Creating the Order Summary Modal
  • Showing & Hiding the Modal (with Animation!)
  • Implementing the Backdrop Component
  • Adding a Custom Button Component
  • Implementing the Button Component
  • Adding the Price to the Order Summary
  • Adding a Toolbar
  • Adding a Toolbar
  • Using a Logo in our Application
  • Adding Reusable Navigation Items
  • Creating a Responsive Sidedrawer
  • Working on Responsive Adjustments
  • Working on Responsive Adjustments
  • More about Responsive Adjustments
  • Reusing the Backdrop
  • Reusing the Backdrop
  • Adding a Hamburger Icon
  • Improving the App - Introduction
  • Prop Type Validation
  • Improving Performance
  • Using Component Lifecycle Methods
  • Changing the Folder Structure
  • Changing the Folder Structure
  • Module Introduction
  • A Better Project Structure
  • Splitting an App Into Components
  • Comparing Stateless and Stateful Components
  • Comparing Stateless and Stateful Components
  • Class-based vs Functional Components
  • Component Creation Lifecycle in Action
  • Component Update Lifecycle (for props Changes)
  • Component Update Lifecycle (for state Changes)
  • Using useEffect() in Functional Components
  • Controlling the useEffect() Behavior
  • Cleaning up with Lifecycle Hooks & useEffect()
  • Cleanup Work with useEffect() - Example
  • Using shouldComponentUpdate for Optimization
  • When should you optimize?
  • PureComponents instead of shouldComponentUpdate
  • How React Updates the DOM
  • Rendering Adjacent JSX Elements
  • Windows Users Must Read
  • Using React.Fragment
  • Higher Order Components (HOC) - Introduction
  • Passing Unknown Props
  • Setting State Correctly
  • Using PropTypes
  • Using Refs
  • Refs with React Hooks
  • Understanding Prop Chain Problems
  • Using the Context API
  • contextType & useContext()
  • Wrap Up
  • Module Introduction
  • Understanding Error Messages
  • Finding Logical Errors by using Dev Tools & Sourcemaps
  • Working with the React Developer Tools
  • Using Error Boundaries (React 16+)
  • Wrap Up
  • Outlining the Problem Set
  • Setting Styles Dynamically
  • Setting Class Names Dynamically
  • Adding and Using Radium
  • Using Radium for Media Queries
  • Introducing Styled Components
  • More on Styled Components
  • Styled Components & Dynamic Styles
  • Working with CSS Modules
  • CSS Modules & Media Queries
  • Module Introduction
  • Rendering Content Conditionally
  • Handling Dynamic Content "The JavaScript Way"
  • Outputting Lists (Intro)
  • Outputting Lists
  • Lists & State
  • Updating State Immutably
  • Lists & Keys
  • Flexible Lists
  • Wrap Up
  • Wrap Up
  • [OPTIONAL] Assignment Solution
  • Useful Resources & Links
  • derstanding Component Basics
  • derstanding Component Basics
  • Understanding JSX
  • JSX Restrictions 03:09
  • Creating a Functional Component
  • Components & JSX Cheat Sheet
  • Working with Components & Re-Using Them
  • Outputting Dynamic Content
  • Outputting Dynamic Content
  • Working with Props
  • Understanding the "children" Prop
  • Understanding & Using State
  • Props & State
  • Handling Events with Methods
  • To Which Events Can You Listen?
  • Manipulating the State
  • Manipulating the State
  • Function Components Naming
  • Using the useState() Hook for State Manipulation
  • Stateless vs Stateful Components
  • Passing Method References Between Components
  • Adding Two Way Binding
  • Adding Styling with Stylesheets
  • Working with Inline Styles
  • [OPTIONAL] Assignment Solution
  • Module Introduction
  • The Build Workflow
  • Using Create React App
  • Understanding the Folder Structure
  • Module Introduction
  • Arrow Functions
  • Exports and Imports
  • Understanding Classes
  • Classes, Properties and Methods
  • The Spread & Rest Operator
  • Destructuring
  • Reference and Primitive Types Refresher
  • Refreshing Array Functions
  • Wrap Up
  • Wrap Up
  • Next-Gen JavaScript - Summary 03:51
  • JS Array Functions
  • Module Introduction
  • Finding Improvement Opportunities
  • Working with More Flexible Styling Rules
  • Introducing the Dimensions API
  • Using Dimensions in "if" Checks
  • Calculating Sizes Dynamically
  • Problems with Different Device Orientations
  • Controlling Orientation & Using the KeyboardAvoidingView
  • Listening to Orientation Changes
  • Rendering Different Layouts
  • Fixing the GameOver Screen
  • Expo's ScreenOrientation API
  • Introducing the Platform API
  • Working with and Platform in "if" Checks
  • Using Platform-specific Code Files
  • Using the SafeAreaView
  • JavaScript + HTML + CSS fundamentals are absolutely required
  • You DON'T need to be a JavaScript expert to succeed in this course!
  • ES6+ JavaScript knowledge is beneficial but not a must-have
  • NO prior React or any other JS framework experience is required!
+ View more

This course is fully up-to-date with the latest version of React and includes React Hooks! Of course it will be kept up-to-date in the future :-)


What's this course about?

Learn React or dive deeper into it. Learn the theory, solve assignments, practice in demo projects and build one big application which is improved throughout the course: The Burger Builder!

More details please!

JavaScript is the major driver of modern web applications since it's the only programming language which runs in the browser and hence allows you to provide highly reactive apps. You'll be able to achieve mobile-app like user experiences in the web.

But using JavaScript can be challenging - it quickly becomes overwhelming to create a nice web app with vanilla JavaScript and jQuery only.

React to the rescue! 

React is all about components - basically custom HTML elements - with which you can quickly build amazing and powerful web apps. Just build a component once, configure it to your needs, dynamically pass data into it (or listen to your own events!) and re-use it as often as needed.

Need to display a list of users in your app? It's as simple as creating a "User" component and outputting it as often as needed.

This course will start at the very basics and explain what exactly React is and how you may use it (and for which kind of apps). Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like react-router and Redux. 

By the end of the course, you can build amazing React (single page) applications!

A detailed list with the course content can be found below.

Who's teaching you in this course?

My name is Rehan , I'm a freelance web developer and worked with React in many projects. I'm also a 5-star rated instructor here on my website. I cover React's most popular alternatives - Vue and Angular - as well as many other topics. I know what I'm talking about and I know where the pain points can be found.

It's my goal to get you started with React as quick as possible and ensure your success. But I don't just focus on students getting started. I want everyone to benefit from my courses, that's why we'll dive deeply into React and why I made sure to also share knowledge that's helpful to advanced React developers. 

Is this course for you?

This course is for you if ...

  •'re just getting started with frontend/ JavaScript development and only got the JS basics set (no prior React or other framework experience is required!)

  •'re experienced with Angular or Vue but want to dive into React

  • ...know the React basics but want to refresh them and/ or dive deeper

  • ...already worked quite a bit with React but want to dive deeper and see it all come together in a bigger app

What should you bring to succeed in that course?

  • HTML + CSS + JavaScript knowledge is required. You don't need to be an expert but the basics need to be set

  • NO advanced JavaScript knowledge is required, though you'll be able to move even quicker through the course if you know next-gen JavaScript features like ES6 Arrow functions. A short refresher about the most important next-gen features is provided in the course though.

What's inside the course?

  • The "What", "Why" and "How"

  • React Basics (Base features, syntax and concepts)

  • Managing state with class-based components and React Hooks

  • How to output lists and conditional content

  • Styling of React components

  • A deep dive into the internals of React and advanced component features

  • How to access Http content from within React apps (AJAX)

  • Redux, Redux, Redux ... from basics to advanced!

  • Forms and form validation in React apps

  • Authentication

  • An introduction to unit testing

  • An introduction to Next.js

  • React app deployment instructions

  • ...and much more!

Who this course is for:
  • Students who want to learn how to build reactive and fast web apps
  • Anyone who's interested in learning an extremely popular technology used by leading tech companies like Netflix
  • Students who want to take their web development skills to the next level and learn a future-proof technology
+ View more
Other related courses
About the instructor
  • 5 Reviews
  • 3 Courses
+ View more
Well don't know what to say about you self my students can describe about my expertise better after watching me delivering the lecture and about your understandings. If you know more about myself directly please feel free to contact me on Facebook link in my profile

Rehan Riaz, BSCS in Computer science studying MSCS currently is a computer science teacher and developing web and desktop systems using

  • HTML
  • CSS
  • JavaScript
  • Jquery
  • Angular Js
  • PHP & MySql
  • Laravel
  • Code ignitor
  • React and React Native
  • Java
  • Android Application Development
  • and many other tools that are using in the world of web design and development
Student feedback
Average rating
  • 0%
  • 0%
  • 0%
  • 0%
  • 0%