Learn React JS Course with Internship
React.js is a front-end JavaScript library for building user interfaces based on UI components. Enroll to learn the fundamentals of React, including components, state and props, hooks, and so on. We will arm you with the essential knowledge, internship & certificate in React.js to prepare you to build your browser-based projects.
Overview
React.js is one of the most popular JavaScript libraries that uses reusable components, not templates, for UI development. Developed and maintained by Meta, it is widely used for building user interfaces and single-page web applications. It uses a virtual DOM (Document Object Model) to render components without reloading the page, which optimizes the process of updating the user interface. This way, it makes developers more efficient and users more satisfied.
React also includes features such as event handling and component lifecycle methods that include mounting, updating, and unmounting. Additionally, it can be used with other libraries like React Native and frameworks such as Redux and Router. Its ability to handle complex user interfaces and dynamic data makes it a popular choice for web and mobile app development projects.
Our React.js course covers the fundamentals of React with all the latest patterns and best practices you need. It includes components, state and props, hooks, and how to work with React Router and Redux. You will also learn how to fetch data from APIs and how to build and deploy a complete React application. The course includes projects and examples to apply the concepts learned in a real-world setting.
This course will equip you to build a career in web development by learning this valuable and demanding skill. By completing this course, you will have the knowledge and experience needed to build complex and dynamic applications, and you’ll be well on your way to land your dream job in web development.
So, why wait? Enroll in the React.js course with Enrollers today to take your web development skills to the next level!
Curriculum
- 30 Sections
- 477 Lessons
- 8 Weeks
- Getting Started11
- 1.1Introduction10 Minutes
- 1.2What is React?
- 1.3Join our Online Learning Community
- 1.4Real-World SPAs & React Web Apps
- 1.5Writing our First React Code
- 1.6Why Should we Choose React?
- 1.7React Alternatives
- 1.8Understanding Single Page Applications and Multi Page Applications
- 1.9Course Outline
- 1.10How to get the Most out of This Course
- 1.11Useful Resources & Links
- Refreshing Next Generation JavaScript (Optional)13
- 2.1Module Introduction
- 2.2Understanding “let” and “const”
- 2.3Arrow Functions
- 2.4Exports and Imports
- 2.5Understanding Classes
- 2.6Classes, Properties and Methods
- 2.7The Spread & Rest Operator
- 2.8Destructuring
- 2.9Reference and Primitive Types Refresher
- 2.10Refreshing Array Functions
- 2.11Wrap Up
- 2.12Next-Gen JavaScript – Summary
- 2.13JS Array Functions
- Understanding the Base Features & Syntax28
- 3.1Module Introduction
- 3.2The Build Workflow
- 3.3Using Create React App
- 3.4Understanding the Folder Structure
- 3.5Understanding Component Basics
- 3.6Understanding JSX
- 3.7JSX Restrictions
- 3.8Creating a Functional Component
- 3.9Components & JSX Cheat Sheet
- 3.10Working with Components & Re-Using Them
- 3.11Outputting Dynamic Content
- 3.12Working with Props
- 3.13Understanding the “children” Prop
- 3.14Understanding & Using State
- 3.15Props & State
- 3.16Handling Events with Methods
- 3.17To Which Events Can You Listen?
- 3.18Manipulating the State
- 3.19Function Components Naming
- 3.20Using the useState() Hook for State Manipulation
- 3.21Stateless vs Stateful Components
- 3.22Passing Method References Between Components
- 3.23Adding Two Way Binding
- 3.24Adding Styling with Stylesheets
- 3.25Working with Inline Styles
- 3.26Time to Practice – The Base Syntax
- 3.27
- 3.28Useful Resources & Links
- Working with Lists and Conditionals13
- 4.1Module Introduction
- 4.2Rendering Content Conditionally
- 4.3Handling Dynamic Content “The JavaScript Way”
- 4.4Outputting Lists (Intro)
- 4.5Outputting Lists
- 4.6Lists & State
- 4.7Updating State Immutably
- 4.8Lists & Keys
- 4.9Flexible Lists
- 4.10Wrap Up
- 4.11Time to Practice – Lists & Conditionals
- 4.12
- 4.13Useful Resources & Links
- Styling React Components & Elements13
- 5.1Module Introduction
- 5.2Outlining the Problem Set
- 5.3Setting Styles Dynamically
- 5.4Setting Class Names Dynamically
- 5.5Adding and Using Radium
- 5.6Using Radium for Media Queries
- 5.7Introducing Styled Components
- 5.8More on Styled Components
- 5.9Styled Components & Dynamic Styles
- 5.10Working with CSS Modules
- 5.11CSS Modules & Media Queries
- 5.12More on CSS Modules
- 5.13Useful Resources & Links
- Debugging React Apps7
- Diving Deeper into Components & React Internals33
- 7.1Module Introduction
- 7.2
- 7.3Splitting an App Into Components
- 7.4Comparing Stateless and Stateful Components
- 7.5Class-based vs Functional Components
- 7.6Class Component Lifecycle Overview
- 7.7Component Creation Lifecycle in Action
- 7.8Component Update Lifecycle (for props Changes)
- 7.9Component Update Lifecycle (for state Changes)
- 7.10Using useEffect() in Functional Components
- 7.11Controlling the useEffect() Behavior
- 7.12Cleaning up with Lifecycle Hooks & useEffect()
- 7.13Cleanup Work with useEffect() – Example
- 7.14Using shouldComponentUpdate for Optimization
- 7.15Optimizing Functional Components with React.memo()
- 7.16When should you optimize?
- 7.17PureComponents instead of shouldComponentUpdate
- 7.18How React Updates the DOM
- 7.19Rendering Adjacent JSX Elements
- 7.20Windows Users Must Read
- 7.21Using React.Fragment
- 7.22Higher Order Components (HOC) – Introduction
- 7.23Another Form of HOCs
- 7.24Passing Unknown Props
- 7.25Setting State Correctly
- 7.26Using PropTypes
- 7.27Using Refs
- 7.28Refs with React Hooks
- 7.29Understanding Prop Chain Problems
- 7.30Using the Context API
- 7.31ContextType & useContext()
- 7.32Wrap Up
- 7.33Useful Resources & Links
- A Real App: The Burger Builder (Basic Version)42
- 8.1
- 8.2Module Introduction
- 8.3Planning an App in React – Core Steps
- 8.4Planning our App – Layout and Component Tree
- 8.5Planning the State
- 8.6MUST READ: Enabling CSS Modules
- 8.7Setting up the Project
- 8.8Creating a Layout Component
- 8.9Starting Implementation of The Burger Builder Container
- 8.10
- 8.11Adding Prop Type Validation
- 8.12Starting the Burger Component
- 8.13Outputting Burger Ingredients Dynamically
- 8.14Calculating the Ingredient Sum Dynamically
- 8.15Adding the Build Control Component
- 8.16Outputting Multiple Build Controls
- 8.17Connecting State to Build Controls
- 8.18Removing Ingredients Safely
- 8.19Displaying and Updating the Burger Price
- 8.20Adding the Order Button
- 8.21Creating the Order Summary Modal
- 8.22Showing & Hiding the Modal (with Animation!)
- 8.23Implementing the Backdrop Component
- 8.24
- 8.25Implementing the Button Component
- 8.26Adding the Price to the Order Summary
- 8.27Adding a Toolbar
- 8.28Using a Logo in our Application
- 8.29Adding Reusable Navigation Items
- 8.30Creating a Responsive Sidedrawer
- 8.31Working on Responsive Adjustments
- 8.32More about Responsive Adjustments
- 8.33Reusing the Backdrop
- 8.34
- 8.35
- 8.36Improving the App – Introduction
- 8.37Prop Type Validation
- 8.38Improving Performance
- 8.39Using Component Lifecycle Methods
- 8.40Changing the Folder Structure
- 8.41Wrap Up
- 8.42Useful Resources & Links
- Reaching out to the Web (Http / Ajax)18
- 9.1Module Introduction
- 9.2Understanding Http Requests in React
- 9.3Understanding our Project and Introducing Axios
- 9.4Creating a Http Request to GET Data
- 9.5Rendering Fetched Data to the Screen
- 9.6Transforming Data
- 9.7Making a Post Selectable
- 9.8Fetching Data on Update (without Creating Infinite Loops)
- 9.9Posting Data to the Server
- 9.10Sending a DELETE Request
- 9.11Fixing a Bug
- 9.12Handling Errors Locally
- 9.13Adding Interceptors to Execute Code Globally
- 9.14Removing Interceptors
- 9.15Setting a Default Global Configuration for Axios
- 9.16Creating and Using Axios Instances
- 9.17Wrap Up
- 9.18Useful Resources & Links
- Burger Builder Project: Accessing a Server10
- 10.1Module Introduction
- 10.2Firebase & The Right Database
- 10.3Creating the Firebase Project
- 10.4Creating the Axios Instance
- 10.5Sending a POST Request
- 10.6Displaying a Spinner while Sending a Request
- 10.7Handling Errors
- 10.8Retrieving Data from the Backend
- 10.9Removing Old Interceptors
- 10.10Useful Resources & Links
- Multi-Page-Feeling in a Single-Page-App: Routing34
- 11.1Module Introduction
- 11.2Routing and SPAs
- 11.3Setting Up Links
- 11.4Setting Up the Router Package
- 11.5react-router vs react-router-dom
- 11.6Preparing the Project For Routing
- 11.7Setting Up and Rendering Routes
- 11.8Rendering Components for Routes
- 11.9Switching Between Pages
- 11.10Using Links to Switch Pages
- 11.11Using Routing-Related Props
- 11.12The “withRouter” HOC & Route Props
- 11.13
- 11.14
- 11.15Styling the Active Route
- 11.16Passing Route Parameters
- 11.17Extracting Route Parameters
- 11.18Parsing Query Parameters & the Fragment
- 11.19Using Switch to Load a Single Route
- 11.20Navigating Programmatically
- 11.21Additional Information Regarding Active Links
- 11.22Understanding Nested Routes
- 11.23Creating Dynamic Nested Routes
- 11.24Redirecting Requests
- 11.25Conditional Redirects
- 11.26Using the History Prop to Redirect (Replace)
- 11.27Working with Guards
- 11.28Handling the 404 Case (Unknown Routes)
- 11.29Loading Routes Lazily
- 11.30Lazy Loading with React Suspense (16.6)
- 11.31Routing and Server Deployment
- 11.32Time to Practice – Routing
- 11.33Wrap Up
- 11.34Useful Resources & Links
- Adding Routing to our Burger Project14
- 12.1Module Introduction
- 12.2Building the Checkout Container
- 12.3Setting Up Routing & Routes
- 12.4Navigating to the Checkout Page
- 12.5Navigating Back & To Next Page
- 12.6Passing Ingredients via Query Params
- 12.7Navigating to the Contact Data Component
- 12.8Order Submission & Passing Data Between Pages
- 12.9Adding an Orders Page
- 12.10Implementing Navigation Links
- 12.11Fetching Orders
- 12.12Outputting the Orders
- 12.13Wrap Up
- 12.14Useful Resources & Links
- Forms and Form Validation17
- 13.1Module Introduction
- 13.2Analyzing the App
- 13.3Creating a Custom Dynamic Input Component
- 13.4Setting Up a JS Config for the Form
- 13.5Dynamically Create Inputs based on JS Config
- 13.6
- 13.7Handling User Input
- 13.8Handling Form Submission
- 13.9Adding Custom Form Validation
- 13.10Fixing a Common Validation Gotcha
- 13.11Adding Validation Feedback
- 13.12Improving Visual Feedback
- 13.13Showing Error Messages
- 13.14Handling Overall Form Validity
- 13.15Working on an Error
- 13.16Fixing a Bug
- 13.17Useful Resources & Links
- Redux24
- 14.1Module Introduction
- 14.2Understanding State
- 14.3The Complexity of Managing State
- 14.4Understanding the Redux Flow
- 14.5Setting Up Reducer and Store
- 14.6Dispatching Actions
- 14.7Adding Subscriptions
- 14.8Connecting React to Redux
- 14.9Connecting the Store to React
- 14.10Dispatching Actions from within the Component
- 14.11Time to Practice – Dispatching Actions
- 14.12Passing and Retrieving Data with Action
- 14.13Switch-Case in the Reducer
- 14.14Updating State Immutably
- 14.15Updating Arrays Immutably
- 14.16Immutable Update Patterns
- 14.17Outsourcing Action Types
- 14.18Combining Multiple Reducers
- 14.19Understanding State Types
- 14.20Time to Practice – Redux Basics
- 14.21
- 14.22Combining Local UI State and Redux
- 14.23Wrap Up
- 14.24Useful Resources & Links
- Adding Redux to our Project10
- 15.1Module Introduction
- 15.2Installing Redux and React Redux
- 15.3Basic Redux Setup
- 15.4Finishing the Reducer for Ingredients
- 15.5Connecting the Burger Builder Container to our Store
- 15.6Working on the Total Price Calculation
- 15.7Redux & UI State
- 15.8Adjusting Checkout and Contact Data
- 15.9Wrap Up
- 15.10Useful Resources & Links
- Redux Advanced16
- 16.1Module Introduction
- 16.2Adding Middleware
- 16.3Using the Redux Devtools
- 16.4Executing Asynchronous Code – Introduction
- 16.5Introducing Action Creators
- 16.6
- 16.7Handling Asynchronous Code
- 16.8Restructuring Actions
- 16.9Where to Put Data Transforming Logic?
- 16.10Using Action Creators and Get State
- 16.11Using Utility Functions
- 16.12
- 16.13An Alternative Folder Structure
- 16.14Diving Much Deeper
- 16.15Wrap Up
- 16.16Useful Resources & Links
- Redux Advanced: Burger Project22
- 17.1Module Introduction
- 17.2Installing the Redux Devtools
- 17.3Preparing the Folder Structure
- 17.4Creating Action Creators
- 17.5Executing Asynchronous Code
- 17.6Fetching Ingredients Asynchronously
- 17.7Initializing Ingredients in the BurgerBuilder
- 17.8Changing the Order of our Ingredients Manually
- 17.9Adding Order Actions
- 17.10Connecting Contact Data Container & Actions
- 17.11The Order Reducer
- 17.12Working on Order Actions
- 17.13Redirect to Improve UX
- 17.14Combining Reducers
- 17.15Handling Purchases & Updating the UI
- 17.16Resetting the Price after Purchases
- 17.17Fetching Orders (via Redux)
- 17.18Checking our Implemented Functionalities
- 17.19Refactoring Reducers
- 17.20Refactoring Reducers Continued
- 17.21Wrap Up
- 17.22Useful Resources & Links
- Adding Authentication to our Burger Project22
- 18.1Module Introduction
- 18.2Understanding Authentication in Single Page Applications
- 18.3Required App Adjustments
- 18.4Adding an Auth Form
- 18.5Adding Actions
- 18.6Getting a Token from the Backend
- 18.7Adding Sign-In
- 18.8Storing the Token
- 18.9
- 18.10Logging Users Out
- 18.11
- 18.12Updating the UI Depending on Auth State
- 18.13
- 18.14Forwarding Unauthenticated Users
- 18.15Redirecting the User to the Checkout Page
- 18.16Persistent Auth State with localStorage
- 18.17Fixing Connect + Routing Errors
- 18.18Ensuring App Security
- 18.19Guarding Routes
- 18.20Displaying User Specific Orders
- 18.21Wrap Up
- 18.22Useful Resources & Links
- Improving our Burger Project9
- Testing12
- Deploying the App to the Web6
- Bonus: Working with Webpack16
- 22.1Module Introduction
- 22.2DON’T SKIP: Webpack Versions
- 22.3Introducing Webpack
- 22.4How Webpack works
- 22.5Basic Workflow Requirements
- 22.6Project & npm Setup
- 22.7Creating a Basic Folder & File Structure
- 22.8Creating the Basic React Application
- 22.9Installing Production Dependencies
- 22.10Setting Up the Basic Webpack Config
- 22.11Adding File Rules & Babel
- 22.12Loading CSS Files
- 22.13Loading Images & Injecting into HTML Page
- 22.14Production Workflow & Wrap Up
- 22.15Adding babel-polyfill
- 22.16Useful Resources & Links
- Bonus: Next.js10
- Bonus: Animations in React Apps16
- 24.1Module Introduction
- 24.2Preparing the Demo Project
- 24.3Using CSS Transitions
- 24.4Using CSS Animations
- 24.5CSS Transition & Animations Limitations
- 24.6Using React Transition Group
- 24.7Using the Transition Component
- 24.8Wrapping the Transition Component
- 24.9Animation Timings
- 24.10Transition Events
- 24.11The CSSTransition Component
- 24.12Customizing CSS Classnames
- 24.13Animating Lists
- 24.14Alternative Animation Packages
- 24.15Wrap Up
- 24.16Useful Resources & Links
- Bonus: A Brief Introduction to Redux Saga13
- 25.1Module Introduction
- 25.2Installing Redux Saga
- 25.3Creating our First Saga
- 25.4Hooking the Saga Up (to the Store and Actions)
- 25.5Moving Logic from the Action Creator to a Saga
- 25.6Moving More Logic Into Sagas
- 25.7Handling Authentication with a Saga
- 25.8Handling Auto-Sign-In with a Saga
- 25.9Moving the BurgerBuilder Side Effects into a Saga
- 25.10Moving the Orders Side Effects into Sagas
- 25.11Why Sagas can be Helpful
- 25.12Diving Deeper into Sagas
- 25.13Useful Resources & Links
- React Hooks28
- 26.1Introduction
- 26.2What are “React Hooks”?
- 26.3The Starting Project
- 26.4Getting Started with useState()
- 26.5More on useState() & State Updating
- 26.6Array Destructuring
- 26.7Multiple States
- 26.8Rules of Hooks
- 26.9Passing State Data Across Components
- 26.10Time to Practice: Hooks Basics
- 26.11Sending Http Requests
- 26.12UseEffect() & Loading Data
- 26.13Understanding useEffect() Dependencies
- 26.14More on useEffect()
- 26.15What’s useCallback()?
- 26.16Working with Refs & useRef()
- 26.17Cleaning Up with useEffect()
- 26.18Deleting Ingredients
- 26.19Loading Errors & State Batching
- 26.20More on State Batching & State Updates
- 26.21Understanding useReducer()
- 26.22Using useReducer() for the Http State
- 26.23Working with useContext()
- 26.24Performance Optimizations with useMemo()
- 26.25Getting Started with Custom Hooks
- 26.26Sharing Data Between Custom Hooks & Components
- 26.27Using the Custom Hook
- 26.28Wrap Up
- Using Hooks in the Burger Builder15
- 27.1Introduction
- 27.2Converting
- 27.3Routing with React.lazy()
- 27.4Converting the Layout Component
- 27.5Converting withErrorHandler HOC
- 27.6Adjusting the Order & Checkout Containers
- 27.7
- 27.8Converting the BurgerBuilder Container
- 27.9Adjusting Auth & Logout Components
- 27.10Using React.memo() & More!
- 27.11
- 27.12Setting the right useEffect() Dependencies
- 27.13Working with useSelector() and useDispatch()
- 27.14Wrap Up
- 27.15Useful Resources & Links
- Bonus: Replacing Redux with React Hooks14
- 28.1Module Introduction
- 28.2Starting Project & Why You Would Replace Redux
- 28.3Alternative: Using the Context API
- 28.4Toggling Favorites with the Context API
- 28.5Context API Summary (and why NOT to use it instead of Redux)
- 28.6Getting Started with a Custom Hook as a Store
- 28.7Finishing the Store Hook
- 28.8Creating a Concrete Store
- 28.9Using the Custom Store
- 28.10Custom Hook Store Summary
- 28.11Optimizing the Custom Hook Store
- 28.12Bonus: Managing Multiple State Slices with the Custom Store Hook
- 28.13Wrap Up
- 28.14Useful Resources & Links
- Bonus: Building the Burger CSS1
- Next Steps and Course Roundup10
- 30.1Module Introduction
- 30.2React Rocks! Where to find more Examples
- 30.3More Inspiration: Real-World Projects Built with React
- 30.4Static React Apps with Gatsby.js
- 30.5Introducing React Native
- 30.6Component Libraries (Example: Material UI)
- 30.7Smaller Apps with Preact
- 30.8Comparing React with Preact
- 30.9Congratulations
- 30.10Bonus: More Content!
Instructor
Requirements
- Bootstrap Course
Features
- Certificate of Completion
- State of the Art Classrooms
- Dedicated Support to Every Individual
- Lectures with Practical Examples
- Internship
- Job Prospects