This article will review how to publish React components as an npm package with Babel 7 (the latest version at the time of writing) and common errors.

I found myself copy-pasting my React components from project to project and wanted to create an npm package so I could import them easily. To do that, I had to learn how to publish an npm package. It was hard to find much updated info online about publishing React components with Babel 7, and I was getting plenty of build errors, so I decided to write this as a reference. …


With a reusable hook and useRef

Detecting a click outside a React component is useful for closing dropdowns, modals, and dialogue boxes. It’s a common pattern that clicking outside the body of those components will close them:


This tutorial will walk through the steps for sending Draft.js data to a server using a POST request, and then how to retrieve and display that data using a GET request.

I’m using an Express backend, a MongoDB database, and a React frontend. This will assume some basic knowledge of Draft.js—there are a lot great setup guides out there.

Dependencies: react , axios , draft-js

Structure:

  • AddPost component with Draft.js Editor → useSubmit() hook to handle the POST request.
  • PostGallery component to display posts → usePosts() hook to handle fetching the posts.

Pre-requisite setting up the GET and POST routes

First, make sure that you have an established…


Airtable is a spreadsheet app with a free, public API. That allows its spreadsheets to be read and written to from the browser, making it usable as a simple database. This article will show how to fetch, create, update, and delete data from Airtable. The API calls will be handled by Axios, the popular library for handling HTTP requests.

Dependencies:

npm i axios — the Axios library for calling Airtable from the browser

npm i airtable — the package for configuring an Airtable base in React

Steps covered:

  1. Set up an Airtable base.
  2. Authenticate the base in React.
  3. Fetch data…


The forwardRef hooks allows React users to pass refs to child components. The ref can be created and referenced with useRef or createRef and then passed in a parent component. Using forwardRef instead of useRef is useful when a ref needs to be accessed in a parent component.

Using forwardRef

Refs cannot be passed as props to functional components.

This will fail:

import React, {useRef} from 'react';//DON'T DO THIS
export function ParentComponent() {
const nodeRef = useRef(null);
return (
<ChildComponent ref={nodeRef}
)
}export function ChildComponent(props) {
return (
<div ref={props.nodeRef}>
<p>Don't pass refs like this</p>
</div>
)
}

This will…


This guide is a template to using JWT authentication in React with a MERN app. This code can be used as a template and adjusted as needed for React apps with JWT authentication. The full codebase is here.

This template is for storing user data in an HTTP-only cookie (not localStorage) and accessing the user’s JWT token through that cookie. We can’t read the cookie directly in the browser, so we will have to get the JWT info from the backend, using this recipe with React custom hooks, React frontend components, and a server calls:

  • React custom hook: The frontend…


To err is human, to create error handling middleware is divine. This article will explore how to catch and handle errors in Express using Mongoose and then display the errors to the end user using React.

All code used in this article is in this repo.

This diagram shows the modules we’ll discuss in the article. This app is using the MERN stack. The server is running through an Express app, and is connected to a MongoDB database. The frontend is a React app. These are the files we’ll be using for error validation:


Dynamically creating children and giving them each an event listener is common. These event listeners should be handled individually—for ex. if each child has a toggle, we only want to flip the toggle we clicked, not every toggle.

I had difficulties figuring out how to do this with hooks in React, so I decided to write this guide.

Set initial state within child components

We are often creating child components dynamically. In this case, I am importing objects from an API call that I will populate in React.

Each of my children is an note object that looks like this:

{
author: "Name"…


This article will go over how to fetch data with Axios in React, save it to state, and then display it in a React component.

I route my data using an Express backend and store it in MongoDB, but this article won’t be about that. It assumes that you have a known endpoint and a datasource. The method described can be done with any API, but I am using an endpoint I created in Express, so my url will be my local host.

We will use two components here: a parent component to get the data, and then a child…


Lifting state in React passes the state from a child component to its parent. The parent is the central controller for state. Once the state is stored in the parent, it can be passed to other child components, including the original child. In this article, we will explore passing it to a different child.

This is a very simple example to show why you may want to lift state up: You have a website that allows a user to click a brush icon to draw on a canvas. You have three components: App.js (the parent component), Brush.js (child), and Canvas.js…

JB

React guides

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store