Your Choice JavaScript News

React News Friday, March 30 Typescript, Typescript syntax, Redux & more…

React News TLDR / Table of Contents

  • How we gradually migrated to TypeScript at Unsplash
    • When I joined Unsplash, I frequently watched as bugs inevitably slipped into the codebase due to human error. Having worked extensively with TypeScript in my prior work and side projects, I…
    • TypeScript, TypeScript syntax, static types, new type errors, type annotations
  • Redux – Not Dead Yet!
    • Some clarification on what’s going on with Redux
    • Redux, Redux maintainer, Redux core library, Redux maintainers, Redux DevTools
  • React Authentication in Depth Part 2 –
    • In Part 1, we looked at how to wire up a React application with with an identity provider. In this part, we will use React Router to add a routing and auth flow that will only allow logged in users…
    • React Router, user, final project code, routes, component
  • It would have been a lot of work to add TypeScript to our compilation pipeline, so we decided to use TypeScript simply as a type checker instead.
  • This is possible by running TypeScript with the noEmit compiler option: run tsc –noEmit to type check your app.
  • We then added type checking as a build step, and everyone in the team enabled TypeScript in their IDEs (or just switched to VSCode;-)) so they could see the type errors whilst developing.
  • Again, this meant we could start to get a feel for TypeScript and using types in our application but without committing to any changes in our compilation pipeline.
  • Gradually migrating from JS to TypeScript syntaxAfter awhile of using JSDoc and TypeScript in this way, we wanted the true power of TypeScript syntax to define our types, instead of JSDoc.

Tags: TypeScript, TypeScript syntax, static types, new type errors, type annotations

  • That’s one of the reasons why some people have chosen to use Redux, and so there’s been claims that the new context API will replace Redux.
  • Context also doesn’t give you anything like the Redux DevTools, the ability to trace your state updates, middleware to add centralized application logic, and other powerful capabilities that Redux enables.
  • The Apollo team has been doing some pretty neat work, and while I don’t like seeing people switch away from Redux, ultimately we all want to build great apps that help our users.
  • Unfortunately, shortly after the talk, a site known for writing misleading and poorly-written articles about React put up a post claiming that Dan Abramov announced a new ‘future-fetcher’ library that replaces Redux, and linked a tweet by Kent C Dodds with that statement as evidence.
  • We have an open issue for discussion of how Redux will work with async React, and I created a proof of concept PR that updates to use the new context API.

Tags: Redux, Redux maintainer, Redux core library, Redux maintainers, Redux DevTools

  • In this part, we will use React Router to add a routing and auth flow that will only allow logged in users to view the application while redirecting users who are not logged in back to the sign up / sign in page.
  • The application routes that need user authentication before being allowed to view will be private route components (taken from the React Router documentation).
  • HomeHome is a component with only two real pieces of functionality: a componentDidMount method that calls the Auth.currentUserInfo method to get and store the users username so we will be able to greet the user by name, and a Link component that links us to another route.
  • We are initializing a couple of pieces of state in this component: loaded isAuthenticated which are both set to the component is first loaded we want to check if the user is currently logged in, and if so allow them to see the route, and if not redirect them to…
  • The flow should be like this: – User signs up, default MFA type is SMSUser signs in, and somewhere in the application (usually in some type of settings area) we give them the option to enable TOTP.User enables TOTP, show them QR code, and enable TOTP with their app of…

Tags: React Router, user, final project code, routes, component

Top React Courses

Modern React with Redux (86,762 students enrolled)

By Stephen Grider
  • 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

Learn more.


The Complete React Native and Redux Course (53,888 students enrolled)

By Stephen Grider
  • Create real-world native apps using React Native
  • Make truly reusable components that look great
  • Understand the terminology and concepts of Redux
  • Prototype and deploy your own applications to the Apple and Google Play Stores
  • Get up to speed with React design principles and methodologies
  • Discover mobile design patterns used by experienced engineers

Learn more.


Advanced React and Redux (35,016 students enrolled)

By Stephen Grider
  • Build a scaleable API with authentication using Express, Mongo, and Passport
  • Learn the differences between cookie-based and token-based authentication
  • Figure out what a Higher Order Component and how to use it to write dramatically less code
  • Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
  • Set up your own testing environment with Mocha and Chai
  • Realize the power of building composable components

Learn more.


React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)

By Leonardo Daniel
  • Building your amazing web applications with React JS and Redux
  • Getting a high-paying job as a front-end developer
  • Getting experience through doing many exercises. Re-enforcing your knowledge of ES6, advanced JavaScript, Redux, React through attempting a lot of quizzes. Practice makes perfect.
  • Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.

Learn more.


React Native: Advanced Concepts (16,058 students enrolled)

By Stephen Grider
  • Make compelling applications using expert-level features of React Native
  • Create amazingly smooth and performant animations
  • Build new React Native apps with Expo
  • Understand the latest Navigation options for new React Native apps
  • Add logic to your Firebase backend with Google Cloud Functions
  • Update your users with cross platform Push Notifications
  • Handle your users going offline with Redux Persist

Learn more.


React JS and Redux - Mastering Web Apps (54,299 students enrolled)

By David Katz
  • Develop entire React JS and Redux applications from scratch.
  • Build applications that deal with APIs and web requests.
  • Discuss ES6 and advanced JavaScript.
  • Create web apps with full authentication, and real-time database.

Learn more.


React basic in just 1 hour (22,331 students enrolled)

By Leo Trieu
  • Taste of how to build your very first React component.
  • How to handle event in components.
  • Understand two key concepts of React: State and Props.
  • How to reuse and nest components.
  • How to transfer data between Parent, Child components.
  • How to work with Array, Form

Learn more.


Meteor and React for Realtime Apps (7,889 students enrolled)

By Stephen Grider
  • Create interactive web apps amazingly fast
  • Build amazing single page applications with Meteor and React JS
  • Master fundamental concepts behind structuring Meteor applications
  • Learn the true purpose of Meteor in a modern application
  • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
  • Build and prototype interesting personal projects in a weekend

Learn more.


GraphQL with React: The Complete Developers Guide (14,683 students enrolled)

By Stephen Grider
  • Build amazing single page applications with React JS and GraphQL
  • Master fundamental concepts behind structuring GraphQL servers
  • Realize the power of building flexible data schemas
  • Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
  • Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay

Learn more.


Essentials in JavaScript ES6 - A Fun and Clear Introduction (40,155 students enrolled)

By David Katz
  • Create ES6 applications from the ground up.
  • Use the terminal/command-line application and a code editor to code.
  • Look at ES6 code and understand keyword and concepts.
  • Create live development servers with Webpack.

Learn more.


The Full JavaScript & ES6 Tutorial - (including ES7 & React) (55,808 students enrolled)

By David Katz
  • Code in JavaScript like a pro.
  • Code in es6 comfortably, using all the new features.
  • Build es6 projects from the ground up using tools like webpack and babel.
  • Create a basic ReactJS application from scratch.

Learn more.