Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
React Hooks: Optimizing for performance

If you have been using React hooks for a while, you might have already fallen in love with them. Almost all developers are now using them and changing their class based components into functional components as much as possible. This is good and is advocated by the React team. Functional components are just easy to understand and there is a lot less boiler plate code that needs to live in your code base.

If you have been using React in general for a while, you are well aware of the fact that, in production, developers try to optimize their components as much as possible. Components should not be rendered unnecessarily, so in class based components, lifecycle methods such as `shouldComponentUpdate()` were used to check some piece of state for a change. If the piece of state has changed, then React re-renders the component, otherwise it leaves it be.


Read more
 
8 Practices In React That Will Crash Your App In The Future

A lot of us have fallen in love with the React library for several reasons. It can be incredibly painless to create complex interactive user interfaces. The greatest feature is being able to compose components right on top of one another without breaking other composed components.

And it’s amazing that even social media giants like FacebookInstagram, and Pinterest made heavy use of them while creating a seamless user experience with huge APIs like Google Maps.

If you’re currently building an application using React or thinking of its use for upcoming projects, then this tutorial is for you. I hope to help you on your journey, too, in making great react applications by exposing a few code implementations that you ought to think twice about.


Read more
 
Tech Regrets at Spectrum
Spectrum is an open source chat app for large online communities and was recently acquired by GitHub. We are a team of three with a predominantly frontend and design background and have worked on it for close to two years. With the benefit of hindsight, let's talk about the technology choices I regret and the lessons I have learned.

Watch video
 
How to use HTML5 form validations with React

You’re probably getting tired of reinventing the wheel like me whose always coding a validation check in each field whether it follows the correct format like emails, or whether first and last names have values in it. What’s worse when you’re using React and you’re just a first-timer in the ecosystem, you have the tendency to think of form validations the React way. We don’t want verbose, lengthy implementations as much as possible for basic functionality.

So, for those who were still having trouble in setting up their form validations in cleaner, elegant way, I hope you may find this article helpful in your use-case as I got into the same painful situation of looking for an elegant way to validate my form inputs.


Read more
 
Uploading Files in React While Keeping The UI Completely In Sync

Building a file upload component is a very important skill to learn as it allows users to select and send files outside of their local environment.

With that said, this post is putting a heavy focus on the native file api in JavaScript. If you want to know a little more about how the file api works, click here.

At first, building a file upload component can be an awkward concept to grasp especially if you want to customize the look and feel of it. (We can go over custom designing file input components in a future tutorial). But once you get a good understanding of the concepts, it actually isn’t that bad!

I mean, you can just create a file input element, pass in an onChange and call it a day from there. But are you going to take care of your users by presenting them the current state of the process each way? Or are you just going to let them sit there and hope that they see the end of it without any visual updates in between?

What if the user’s internet disconnects? What if the server doesn’t respond with anything? What if file 8 of 14 is big for them? What if the user was waiting for the upload process to finish for 10 minutes and wanted to see how far it has gotten from there? Or which files have already been uploaded?

You have to keep the user consistently updated with what’s going on in the background if you want the UX to stay consistent. A professional, consistent user interface helps to establish trust with your app in a technological point of view. If you plan on having an app where users sign up and pay for some service of yours, they have to trust the technology that you are offering them and that your technology is better than everyone else. You’re developing in React, you have all the power to go up and beyond!


Read more
 
GraphQL - The Pros and the Cons
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API as well as gives clients the power to ask for exactly what they need and nothing more.

It makes it easier to evolve APIs over time and enables powerful developer tools. At least that's what we all know it to be. In this post, we'll look at all the wonderful things about GraphQL and also look at the unpopular "not so good" things about it. Let's kick it off with the good parts :)

Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2019 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp