Watch udemy, inc. modern react with redux

React app with redux, hooks, Google Auth, OBS Streaming

From coding along with Stephen Grider in his Udemy course //www.udemy.com/react-redux (and code here //github.com/StephenGrider/redux-code)

• if you are new or kind of new to React I highly recommend it, at least read the description to see what's in it, I did learn some stuff
• and it was really nice to code along and have the structure and requirements as I built my app with the new (new in 2019) hooks system and only functional components, where Stephen builds the app with class components. I could fokus on what it should look like and how it should function and not be destracted by designing and feature creeping =)

the App consists of

streams\api - where we fetch and save data (very simple)

streams\client - the UI where we can create and view streams (note: the Google authorization only handles access to Create, Edit and Delete - without the authorization you can still run the client and watch a stream)

streams\rtmpserver - hosting the stream from OBS Studio

and is dependent on (besides the node modules)

OBS Studio - open source for video streaming and recording

Google APIs - only for signin with 'gapi.auth2'

To enable the client with Google login

Create a new project at console.developers.google.com or use an existing one if you have Set your client id at property "clientId" (found at the beginning of the GoogleAuth component ~row 37)

I use Yarn package manager but npm would work also.

Run 'yarn install' to fetch node modules Then 'yarn start' to run the project

Use Chrome and the add on "redux dev tools" to debug the redux state

To enable the api (saving and fetching data)

Start the api server (json-server) in a console : streams\api> yarn start (there are some streams in the "database" already, you can remove them by editing the file api\db.json )

To enable streaming

Start the rtmp server (node-media-server) in a console : streams\rtmpserver> yarn start

If not installed, Install OBS Studio - //obsproject.com/ Create a streaming scene

• then a Source for display
• and audio if you want

Change settings for stream - File/Settings/Stream

• URL = rtmp://localhost/live
• Stream key = 1 -- note, the stream key must match the id of the stream in the client, example: //localhost:3000/streams/1 would match on stream key 1

Start streaming (note, you must have started the media server)

This course is over 50 hours in length and covers the process of building single page applications with React and Redux. It aims for mastery of the covered concepts, rather than cursory familiarity.

Created by: Stephen Grider

Produced in 2022

What you will learn

• Build amazing single page applications with React JS and Redux
• Master fundamental concepts behind structuring Redux applications
• Realize the power of building composable components
• Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
• Become fluent in the toolchain supporting React, including NPM, Webpack, Babel, and ES6/ES2015 Javascript syntax

Quality Score

Course Depth & Coverage

/

Live Chat with CourseDuck's Co-Founder for Help

Need help deciding on a reactjs course? Or looking for more detail on Stephen Grider's Modern React with Redux [2020 Update]? Feel free to chat below.

Course Description

reactjs Awards Sponsored

Course Last Updated for React v16.6.3 and Redux v4.0.1! All content is brand new! Update includes detailed videos on the new React Hooks system.
Congratulations! You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux!
Thousands of other engineers have learned React and Redux, and you can too. This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.
The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.
React is the most popular Javascript library of the last five years, and the job market is still hotter than ever. Companies large and small can't hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high. It's a great time to learn React!
----------------------
What will you build?
This course features hundreds of videos with dozens of custom diagrams to help you understand how React and Redux work. No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using React.
Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You'll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.
My guarantee to you: there is no other course online that teaches more features of React and Redux. This is the most comprehensive resource there is.

Below is a partial list of the topics you'll find in this course:

• Master the fundamental features of React, including JSX, state, and props
• From square one, understand how to build reusable components
• Dive into the source code of Redux to understand how it works behind the scenes
• Test your knowledge and hone your skills with numerous coding exercises
• Integrate React with advanced browser features, even geolocation API's!
• Use popular styling libraries to build beautiful apps
• Master different techniques of deployment so you can show off the apps you build!
• See different methods of building UI's through composition of components

Besides just React and Redux, you'll pick up countless other tidbits of knowledge, including ES2015 syntax, popular design patterns, even the clearest explanation of the keyword 'this' in Javascript that you'll ever hear.
This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

Who this course is for:

• Programmers looking to learn React
• Developers who want to grow out of just using jQuery
• Engineers who have researched React but have had trouble mastering some concepts

Pros

Cons

• • Course has been completely updated for 2020.
  • Covers a good range of concepts. Students will be able to work with Redux when they’re done.
  • Hands-on practice is paired well with theory for a rounded working knowledge.
• • Even in this course, Redux is still hard and a prohibitive part of the experience.
  • Instructor explains mistakes before the preferred method, and it gets confusing.
  • Instructor speech is a little slow.

Instructor Details

Stephen Grider

• 4.7 Rating
• 100 Reviews

Stephen Grider has been building complex Javascript front ends for top corporations in the San Francisco Bay Area. With an innate ability to simplify complex topics, Stephen has been mentoring engineers beginning their careers in software development for years, and has now expanded that experience onto Udemy, authoring the highest rated React course. He teaches on Udemy to share the knowledge he has gained with other software engineers. Invest in yourself by learning from Stephen's published courses.

Reviews

5 star 4 star 3 star 2 star 1 star