CF

Laravel with React JS - Build Twitter Like Real Time Web App

4h 56m 37s
English
Paid

Discover the power of combining React Js with Laravel to create dynamic and interactive web applications. In this course, you'll learn to build a Twitter-like real-time web app while delving into Modern JavaScript and React Js from the ground up. Ready to take your development skills to the next level? Dive in and start your journey!

Course Overview

Key Topics Covered

  • Core Modern JavaScript/EcmaScript basics
  • React Js fundamentals
  • Ajax with axios for asynchronous requests
  • Theoretical and practical explanations
  • Integration of React with Laravel for seamless development
  • Adding real-time functionality using Laravel Echo and Pusher Js
  • Implementing follow/unfollow functionality
  • Utilizing BelongsToMany relationships
  • Working with custom database tables
  • Leveraging Accessors methods and more

Learning Outcomes

  • Master Modern JavaScript/EcmaScript
  • Gain proficiency in React Js
  • Learn to integrate Laravel with React Js to build modern web applications
  • Start creating reusable React Components
  • Make Ajax GET and POST requests from a React frontend to a Laravel backend
  • Integrate real-time features by broadcasting events using Pusher Js and Laravel Echo
  • Advance to intermediate Laravel techniques
  • Explore React Js as an alternative or complement to Vue Js

Project You Will Build

By the end of this course, you will build a Twitter-like real-time web app featuring follow/unfollow functionality using Laravel as the backend and React Js as the frontend.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 46 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 46 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Modern JavaScript
All Course Lessons (46)
#Lesson TitleDurationAccess
1
Modern JavaScript Demo
01:54
2
Creating variables using const
04:06
3
Creating variables using let
03:48
4
Template strings
05:10
5
Default parameters
03:25
6
Arrow functions
05:58
7
Arrow function and this keyword
10:11
8
Destructuring object
08:14
9
Destructuring an array
02:09
10
Restructuring
04:57
11
Spread and rest operator
07:32
12
Classes constructor and super
14:23
13
Installing react
05:24
14
React files and folders introduction
06:23
15
Storing data in component state via ajax call
10:59
16
Rendering state data using map
05:48
17
Conditional rendering
04:18
18
Imports exports props
09:36
19
Handling click events
07:40
20
Destructuring inline styling and keys
04:24
21
Installing Laravel and database setup
06:06
22
Implement username
06:20
23
Route group, controllers and views
07:05
24
React js scafffolding
07:33
25
Create form in react component
03:40
26
Post model, migration and relationships
05:29
27
Handling form events in react
07:16
28
Make a post request to laravel backend
05:32
29
Create post and response json
05:50
30
Show the tweets in timeline
11:54
31
Merging tweets in the state and render
02:56
32
Render tweets
02:58
33
User avatar
05:47
34
User profile
08:39
35
Follow functionality
08:42
36
Show follow or unfollow
03:18
37
Implement follow functionality
06:48
38
Implement unfollow functionality
03:19
39
Showing the list of following
05:53
40
Showing the list of followers
04:58
41
Json response of posts
11:05
42
Loading component
05:36
43
Making it real time using setInterval
07:21
44
Real time setup with pusher and laravel echo
05:16
45
Event Broadcasting for real time updates
11:34
46
Real time posts to specific user based on following
09:23
Unlock unlimited learning

Get instant access to all 45 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling in the course, students should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with PHP and the Laravel framework is beneficial but not mandatory, as the course covers Laravel installation and setup. A fundamental grasp of React Js is also helpful, though the course includes React Js fundamentals for those new to the framework.
What kind of project will I build during this course?
During the course, you will build a Twitter-like real-time web application. This project includes implementing user profiles, follow/unfollow functionalities, and real-time updates using Laravel Echo and Pusher Js. The focus is on integrating React Js with a Laravel backend to create a dynamic and interactive user experience.
Who is the target audience for this course?
The course is designed for web developers who want to enhance their skills by integrating Laravel with React Js. It's suitable for those interested in building modern web applications with real-time functionalities, particularly individuals who have worked with Vue Js and are looking to explore React Js as an alternative or complement.
How does this course compare in depth and scope to other web development courses?
This course offers a unique combination of React Js and Laravel, focusing on building a real-time application similar to Twitter. Unlike many courses that only cover front-end or back-end development, it provides comprehensive coverage of both through the integration of React Js with Laravel. Students will learn intermediate Laravel techniques and delve into Modern JavaScript/EcmaScript basics, which distinguishes it from other courses that might focus solely on either React Js or Laravel.
What specific technologies and tools will I learn to use?
The course covers a variety of technologies and tools, including Modern JavaScript/EcmaScript basics, React Js, and Laravel. You'll learn to make asynchronous requests using Ajax with axios, and integrate real-time features using Laravel Echo and Pusher Js. The course also teaches how to handle database interactions and relationships using Laravel, and how to create reusable React components.
What topics are not covered in this course?
The course does not cover advanced Laravel features beyond intermediate techniques. It also doesn't delve into server-side management or deployment processes, which means topics like server configuration or continuous integration and deployment are outside the scope. Additionally, the course focuses on React Js, so developers looking for in-depth Vue Js content will need to look elsewhere.
How much time should I expect to dedicate to this course?
The course consists of 46 lessons, each varying in duration. While the total runtime is not specified, students should expect to dedicate several hours per week to complete the lessons, assignments, and project work. The course is designed to be flexible, allowing students to learn at their own pace, but consistent effort will be required to successfully build the real-time web application project.