Advanced React and Redux
-
Welcome! Let’s Get Started!
-
TestingRequired Boilerplate – DO NOT SKIPProject Generation0sOur First Test0sIntroduction to Jest0sApp Overview0sInstalling Dependencies0sReact and Redux Design0sWhat Do We Test?0sStarting from Scratch0sRendering the App0sShowing Components in the App0sValid Test File Names0sTest Structure0sTricking React with JSDOM0sVerifying Component Existence0sTest Expectations0sLimiting Test Knowledge0sEnzyme Setup0sEnzyme Renderers0sExpectations for Component Instances0sExercise Time!0sExpecting the Comment List0sAbsolute Path Imports0sCode Reuse with BeforeEach0sComment Box Component0sTextArea Implementation0sCommentBox Test File0sAsserting Element Existence0sAfterEach Statements0sSimulating Change Events0sProviding Fake Events0sForcing Component Updates0sRetrieving Prop Values0sForm Submit Exercise0sExercise Solution0sDescribe Statements0sRedux Setup0sThe Provider Tag0sThe SaveComment Action Creator0sBonding React with Redux0sRedux Test Errors0sAdding a Root Component0sTesting Reducers0sHandling Unknown Types0sTesting Action Creators0sComment List Wireup0sGetting Data Into Redux0sRedux Initial State0sCheerio Queries0sOne More Feature0sFetching a Remote Resource0sParsing Comment List0sIntegration Tests0sIntegration Tests in Action0sFixing a Broken Test0sSimulating Button Clicks0sWhy the Failure?0sFaking Requests with Moxios0sThe Reason for Failure0sIntroducing a Pause0sMoxios’s Wait Function0sApp Wrapup0s
-
Higher Order ComponentsAn Introduction to Higher Order Components0sConnect – A Higher Order Component0sApp Overview0sAdding React Router0sAdding Routes0sAuth Reducer0sRendering a Header0sWiring Up State0sChanging Auth State0sSteps for Building a HOC0sForced Navigation with React Router0sCreating the HOC0sPlacing Reusable Logic0sPassing Through Props0s
-
Middlewares with ReduxIntroduction to Middlewares0sThe Purpose of Redux Promise0sHow Async Middlewares Work0sCrazy Middleware Syntax0sForwarding Actions0sWaiting for Promise Resolution0sObserving the Middleware0sState Validation Middleware0sJSON Schema0sGenerating JSON Schema0sMiddleware Creation0sEmitting Warnings0s
-
Server Setup – AuthenticationIntroduction to Authentication0sCookies vs Tokens0sScalable Architecture0sServer Setup0sMore Server Setup0sExpress Middleware0sExpress Route Handler0sMongoose Models0sMongoDB Setup0sInspecting the Database0sAuthentication Controller0sSearching for Users0sCreating User Records0sEncrypting Passwords with Bcrypt0sSalting a Password0sJWT Overview0sCreating a JWT0sInstalling Passport0sPassport Strategies0sUsing Strategies with Passport0sMaking an Authenticated Request0sSigning in with Local Strategy0sPurpose of Local Strategy0sBcrypt Full Circle0sProtecting Signin Route0sSigning Users In0sServer Review0s
-
Client Side AuthRequired Boilerplate – DO NOT SKIPClient Overview0sLib Installs0sThe App Component0sCreating the Header0sWiring Up React Router0sScaffolding the Signup Form0sIncluding Redux0sReduxForm for Signup0sHandling Form Submission0sWiring Up Middleware0sBasics of Redux Thunk0sCalling the API0sCode Cleanup with Compose0sCORS in a Nutshell0sSolution to CORS Errors0sDispatching Actions0sDisplaying Auth Errors0sRedirect on Signup0sFeature Component0sThe Require Auth HOC0sReference – HOC CodePersisting Login State0sSigning Out a User0sAutomatic Sign Out0sThe Signin Component0sThe Signin Action Creator0sUpdating the Header0sHeader Styling0sAuth Wrapup0s
-
Important – OLD VERSION OF COURSE – React v14Note on the Following LecturesNoteProject Setup0sA First Spec0sCore Testing – Describe, It, Expect0sPurpose of Describe, It, and ExpectTest Reporting0sTest StructureFeature Mockups0sTest Structure Setup0sComment Box Tests0sTesting Class Names0sUsing beforeEach to Condense Tests0sExpecting Child Elements0sSimulating Events0sTesting Controlled Components0sForm Submit Event0sStub Comment List0sExpectations on Content0sAssertions with Lists0sTesting Action Creators0sAction Creator Shortcuts0sTDD Comments Reducer0sSpec Failures After Code Change0sPurpose of Chai and Mocha0sApp Review0sTest Helper From Scratch0sJSDom Setup0sMore JSDom Setup0sTestUtils Library0sDefining RenderComponent0sFinishing RenderComponent Helper0sSimulate Helper0sTest Helper Review0sWhat is a Higher Order Component?0sConnect and Provider0sAuthentication HOC Overview0sHeader Setup0sReact Router Setup0sAuthentication Reducer0sAction Creator Hookup0sAuthentication Higher Order Component0sHOC Scaffold Code0sNesting Higher Order Components0sAccessing React Router on Context0sClass Level Properties0sHandling HOC Edge Cases0sHigher Order Components Review0sMiddleware Overview0sApp Building Plan0sUsers Reducer0sStatic Users Action Creator0sRendering a List of Users0sCSS Cleanup0sPains Without Middleware0sMiddleware Stack0sMiddleware Internals0sHandling Unrelated Actions0sHandling Promises0sMiddleware Review0sClient Setup0sApp Architecture0sComponent and State Design0sHeader Component0sScaffolding the Signin Form0sAdding Signin Form0sAction Creator with Many Responsibilities0sIntroducing Redux Thunk0sSignin Action Creator0sCORS In a Nutshell0sServerside Solution for CORS0sProgrammatic Navigation0sUpdating Auth State0sBreather and Review0sLocalStorage and JWT0sAuth Error Messaging0sDisplaying Errors0sHeader Logic0sSignout Component0sSignout Action Creator0sSignup Component0sSignup Form Scaffolding0sRedux Form Validation0sImplementing Validation Logic0sMore On Validation0sSignup Action Creator0sFinish Up Signup0sSecuring Individual Routes0sRoot IndexRoute0sAutomatically Authenticating Users0sMaking Authenticated API Requests0sHandling Data from Authenticated Requests0sAuthentication Wrapup0s
Knowledge of React + Redux is 100% required! If you are familiar with reducers and action creators you will be fine.
This is the tutorial you’ve been looking for to take your React and Redux skills to the next level.
Authentication with Express/Mongo? Yes! Middleware/Higher Order Components? We got it. Testing with Mocha/Chai? It’s here!
This course wastes no time diving right into interesting topics, and teaches you the core knowledge you need to deeply understand and build React components and structure applications with Redux.
Mastering React and Redux can get you a position in web development or help you build that personal project you’ve been dreaming of. It’s a skill that will put you more in demand in the modern web development industry, especially with the release of Redux and ReactNative.
There are dozens of great tutorials online for React and Redux, but none of them teach the challenging, core features of these two fantastic libraries. I created this course to push you beyond “just getting started.”
Learn how to thoroughly test React and Redux code, including tests for action creators and reducers
Get familiar with Higher Order Components. Don’t know what they are? No problem, you have been using them without even knowing it!
Rewrite a popular Redux Middleware from scratch to handle asynchronous actions
Become a master of the trickiest topic in Javascript: authentication. You will write a server with enterprise-grade authentication from scratch that can scale to hundreds of thousands of users. No shortcuts, no dummy data.
I have built the course that I would have wanted to take when I was learning React and Redux. A course that explains the concepts and how they’re implemented in the best order for you to learn and deeply understand them.
What's included
- 21 hours on-demand video
- 8 articles
- 3 downloadable resources
- Access on mobile and TV
- Closed captions
- Certificate of completion