Posts tagged with react

Introducing React Suspense

At the Zeit conference React core member Andrew Clark showed off an upcoming React feature named Suspense. It can automatically pause the render process of a component if it hasn't got all its data. In can be used to avoid things like spinner showing up too quickly.

Async rendering in React gives us a powerful new set of primitives for addressing longstanding problems in UI development. I'll discuss React's vision for how async rendering can improve data fetching, code delivery, prefetching, view transitions, and more.

Read more

Join thousands of developers

Every two weeks, I share practical tips, tutorials, and behind-the-scenes insights from maintaining 300+ open source packages.

No spam. Unsubscribe anytime. You can also follow me on X.

Beyond React 16

Today at the JSConf in Iceland, React core developer Dan Abramov demonstrated some very cool features that will soon land in React.

We’ve built a generic way to ensure that high-priority updates don’t get blocked by a low-priority update. We call this time slicing. If my device is fast enough, it feels almost like it’s synchronous; if my device is slow, the app still feels responsive. We’ve also built a generic way for components to suspend rendering while they load async data. We call this feature suspense. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic.

https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html

Read more

What is snapshot testing, and is it viable in PHP?

In a new blogpost at Sitepoint Christopher Pitt talks about snapshot testing. He first explains how snapshot testing can help test React components. Then he demonstrates how you can use our home grown package to use snapshot testing in PHP. Finally he shows pretty cool use cases for snapshot tests.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it.

For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

https://www.sitepoint.com/snapshot-testing-viable-php/

If you want know more about snapshot testing, check out this blogpost by my colleague Sebastian, or watch this video where I refactor some tests to use snapshots.

Read more

Building a GIF search engine with React

Over at the Tighten blog Samantha Geitz posted an amazing introduction to React. She starts off by clearly explaining how to setup the environment (webpack and a few dependencies). After making sure that it all works, she continues by building a GIF search engine. Along the way the core concepts of React are explained. If you're in any way interesting in learning React, I warmly recommend reading the entire piece.

React itself is reasonably well-documented and easy to pick up, once you can shift your thinking to align with its conventions. The problem is, if you want to build robust apps, the V in MVC probably isn't going to cut it, and you have to dive into the often-confusing ecosystem surrounding React.

In this series, we're going to walk through the stages of building a React application — an app that lets you search the Giphy API and displays results, similar to what Giphy has on its own website.

In this first article, we are going to build the application using only React (with Webpack for asset compilation).

http://blog.tighten.co/react-101-building-a-gif-search-engine

I'm looking forward to read the next articles of this series.

Read more

Integrating Algolia in a Laravel application

by Freek Van der Herten – 6 minute read

A few days ago Spatie, the company where I work, launched a new website: vrijwilligerswerk.be. Translated to english it roughly comes down to workforvolunteers.be. On the website various organizations can post their jobs that can be filled by a volunteer. Volunteers have a very user-friendly way to…

Read more

Learn React.js in just a couple of afternoons

Wes Bos released a series of videos on React.js.

Together, we will build “Catch of the Day” — a real-time app for a trendy seafood market where price and quantity available are variable and can change at a moments notice. We will build a menu, an order form, and an inventory management area where authorized users can immediately update product details.
Wes has released some really learning resources on, amongst others the terminal, sublime. A while ago he also appeared on Full Stack Radio. I'm pretty sure his new batch of videos will be top notch!

Read more

Getting started with Facebook's React.js

React is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
https://scotch.io/tutorials/learning-react-getting-started-and-concepts

The application I'm currently working will need an advanced search feature that is backed by Algolia. Searches shouldn't hit the application server but use Algolia's JavaScript client. I'm in the process of learning React to build this. The link above was very helpful get started with this new technology.

I'm not ready to blog about my application just yet, but you'll hear more about it as soon as it goes live.

Read more