React Newsletter #102

React.Fragment, dragging React performance forward, and hot reloading in Create React App without ejecting


Articles

React.Fragment and Semantic HTML

React.Fragment is a new feature and it's pretty rad. This post walks through why it's useful and how to use it.

Dragging React performance forward

A recent release of react-beautiful-dnd improved the library's performance by 99%. This blog goes over the techniques they used to achieve their drastic improvements.

Hot Reloading in Create React App Without Ejecting

Create React App is great, but the projects it generates don’t have Hot Module Replacement (HMR) set up by default. This article walks through how to get it working.


Tutorials

URL Parameters with React Router

URL parameters are a fundamental aspect of React Router and a fundamental aspect of building web applications. In this post, we’ll break down the “URL Parameters” example on the React Router documentation to learn how you to effectively leverage URL parameters in your React app.

A guide to building a React component for npm

Building and publishing a React component on NPM is very different from building a normal React web application. There are a lot of things to take into account, so Markus made this brief guide to help you get the important things right.

Handling 404 pages (catch all routes) with React Router v4

Often time when building an app with React Router, you want to have a ‘catch all’ route which will render if none of the other routes match. In this post, we’ll learn how to do just that by breaking down the ‘No Match (404)’ example from the React Router docs.


Sponsor

Get Going with Kendo UI & React: A GIF Guide

Take this GIF-guided tour with developer advocate Tara Manicsic to create a React app using Kendo UI components. Learn how to add Kendo UI Material styling and implement a Kendo UI Datepicker component. To the GIF guide.


Projects

React-tabtab: 💃 Make your react tab dance🕺

A mobile support, draggable, editable and api based Tab for React! If you've ever tried to build tabs into an app, you know how crazy things can get. React-tabtab simplifies this process and enables you to build even more interactive tabs.

React Apollo Redux

This library wraps the graphql function from react-apollo function by also dispatching redux actions when a mutation is called.

Create React Native apps with TypeScript and Ignite

Get up and running with TypeScript React Native development in minutes. A batteries-included, opinionated starter project, and code generators for your components, reducers, sagas and more. Originally based on a port of the Ignite IR Boilerplate to TypeScript.

React Javascript to Typescript Transform by Lyft

Convert React JavaScript code to TypeScript with proper typing.

after.js

Next.js-like framework for server-rendered React apps built with React Router 4.


made with ❤️ by ui.dev