React
How to Use Formik
Formik has just released the version 2.x, which is a major release that has some breaking changes in its API. It offers some additional features like checkboxes support, select multiple fields, and most importantly, React Hooks integration 🎉.
In this tutorial, we’re going to learn how to use this awesome library that helps you to easily build your forms in React without tears ðŸ˜.
Getting Started
First, you need to have a React application. You can use an existing one, or create a new one with create-react-app by running this command.
How to Fetch Data with React Suspense
A while ago, React introduces a new set of features called “Concurrent Mode”. And its basically allows you to interrupt the rendering process of your React components. And, with this feature comes the React Suspense.
Traditionally, data fetching in React looks like this:
import React from "react"
class Example extends React.Component {
componentDidMount() {
const data = fetchSomething() // Fetch data here
}
// ...
}
It’s very obvious that the request happened whenever this component is being rendered or mounted. Suspense allows us to “wait” until we get the data that being fetched asynchronously before we render our component.
How to Fetch Data with React Hooks
In this tutorial, we’re going to learn about new React feature called “Hooks”. Well, I have written a lot of tutorials about React Hooks itself, but in this practicular post, we’re going to learn how we can send an HTTP request asynchronously with this awesome React feature.
Getting Started
First, you obviously need a React application!
If you don’t have it already, you can easily use create-react-app by running this command below.
Build Quotes App with React Native in 5 Minutes
Three days ago, I just give my first tech talk about “How to Get Started as a Mobile Developer” in Jakarta. I talk about what’s going on with React Native this year, the good and bad things about it, what will change in the future, and how to get started with it. It was a very great experience and pretty much successful.
In the live coding session, I decided to build a quotes app with React Native, so that you can be inspired everyday with popular quotes. It’s not a tutorial, but I just want to demonstrate people that they can build an app very fast (five minutes) with React Native.
A Brief Guide to Test React Components with Hooks
Testing is a fundamental skill for every web developer to build high quality and stable web applications. But, it’s also intimidating especially for those who just getting started with web development. But it turns out: with modern frameworks and libraries, testing is not that hard.
A lot of developers avoid to test their applications, and you shouldn’t!
Getting started
To get started with this tutorial, you need to have a good understanding about the basics of React and React Hooks (e.g. useState and useEffect).
Global State with React Hooks
React Hooks let you use state and other React features in functional components. On the other hand, React Context provides a way to pass data around components tree having without pass props down manually.
With both features combined, we can now build our very own state management without using third-party libraries. Besides making our web applications lighter, our code is much more efficient and readable.
Disclaimer
First disclaimer, these methods are not the best practice to manage global state (use Redux instead). Second, there some third party libraries out there that are similar to what we are doing in this tutorial. If those are what you’re looking for, definitely check out something like Unstated Next or Easy Peasy.
How to Optimize React Hooks Performance
Hooks are one of React’s most influential features that redefine the way we write components in React. They let you use the majority of class-based component features within a functional component, which leads us to smaller boilerplate and easier to test.
To get the most out of this feature, let’s take a look at how we can optimize our React apps performance that uses hooks.
Getting started
Let’s get started by initializing a React application with Create React App.
Build Server Rendered React App from Scratch
If you have played around with React for a while, and you are planning to build a production web app, you may need to consider the performance and SEO for your web app. And that problem can be solved by server-side rendering. Even there are many different approach to achieve better performance on client-side rendering, it might not be a good solution for low-powered devices such as an old phone.
What makes it so fast?
On the client-side rendering, also known as single page app, A typical response sent by the server when requesting a React site will look something like this: