Skip to content

Our React/React Native articles


Build an Animated Accordion List in React Native

June 27, 2020Benjamin Piggin7 min read

Accordion lists (or ExpandableListViews) are now a material design staple and show up in quite a few apps. They are a great way to dynamically display information to a user. When it comes to implementing one in your own app, sure, there are libraries that you can use. But implementing one yourself…

Continue reading →

Why it’s time to consider Azure to host your static application

June 15, 2020Clément Pasteau3 min read

The line between static & dynamic web applications is not what it used to be. With new frameworks like Gatsby or NextJS, the Jamstack is a strong option to get your application running in no time, whilst being able to scale it as needed. When it comes to hosting your app, there are dozens of…

Continue reading →

Reduce redux boilerplate with redux-toolkit

April 20, 2020Daniel Tchangang4 min read

You're looking for an easier way to write your reducer, aren't you ? When writing plain redux, you have to define an action, an actionCreator and a reducer to update the store of your app. The reducer is in most cases a big switch to handle all the actions dispatched by actionCreators in your app…

Continue reading →

Demystifying Building Native Modules for React Native

April 17, 2020Kamile Matulenaite8 min read

You’ve just released a new native SDK. Could you bring more business to your company by releasing on a cross-platform development framework? Maybe you’re a developer, longing for a native module of an open-source platform API (or even the third-party SDK above 🙄) to be released. Could you fast…

Continue reading →

How to convert an imperative library to a declarative React component: the Sketchfab Viewer

April 10, 2020Alex de Boutray6 min read

I love using React for multiple reasons. I like the writing style, I like the tooling, I like the ecosystem. But sometimes you run into a library that doesn't have a React adapter. It can either be pretty old, kind of niche, closed source, etc. In this series of articles, we’ll look into how to…

Continue reading →

How DUOLAB uses artificial intelligence to improve your skin

April 03, 2020Sarah Hamilton3 min read

For a long time people (including myself) have used the same skin care routine everyday. Only occasionally do we switch up our products for a different brand. The creams are opened and resealed multiple times a week, resulting in the products containing preservatives and other unnatural ingredients…

Continue reading →

Your React App Deserves a Proper Seo

November 18, 2019Rémi Mondenx8 min read

SEO has become an integral part of a developer’s daily missions. Creating a robust, performant and well-designed web app is great, but useless if you don’t manage to get traffic on it. That’s where SEO gets in the game. In this article, you will understand why it is difficult to have a good SEO…

Continue reading →

Make writing End to End tests child's play with Puppeteer and Jest

August 29, 2019Alex White6 min read

We all know writing tests is important. Unit testing is now a standard in software development, sometimes we even write them before the code. Snapshot testing is becoming more and more common to check that the UI doesn't change unexpectedly. However, the dev community still has a long way to go with…

Continue reading →

How I chose the #1 graph library for my React project

August 15, 2019Tomas Piga16 min read

TL;DR Reviewed the 6 most recommended React libraries and found the following answers among them: Strongest community support? Recharts Most liked libraries? Nivo and VX Most graphs and features? React-Vis Most maintained currently? Victory Starting a long-term project? React-Vis The least likely to…

Continue reading →

How I chose the #1 graph library for my React project

August 15, 2019Tomas Piga16 min read

TL;DR Reviewed the 6 most recommended React libraries and found the following answers among them: Strongest community support? Recharts Most liked libraries? Nivo and VX Most graphs and features? React-Vis Most maintained currently? Victory Starting a long-term project? React-Vis The least likely to…

Continue reading →

How I ruined my application performances by using React context instead of Redux

July 16, 2019Georges Biaux6 min read

TL;DR I used React contexts instead of Redux for centralized states Without a selector system, my components where getting lots of data as props, some of them were often changing and not necessary to build the view Any changes in these contexts objects caused almost all my components to rerender I…

Continue reading →

React: Fantastic Hooks and How to Use Them

May 02, 2019Brendan Daoud7 min read

A couple months ago, React hooks were officially released, the hype was high and we decided to put them to the test on a project. Here is what I learnt and why I strongly advise you to give them a try also. What are those? Let's begin the tour with the basics: what are React hooks? React has a very…

Continue reading →

React: Fantastic Hooks and How to Use Them

May 02, 2019Brendan Daoud7 min read

A couple months ago, React hooks were officially released, the hype was high and we decided to put them to the test on a project. Here is what I learnt and why I strongly advise you to give them a try also. What are those? Let's begin the tour with the basics: what are React hooks? React has a very…

Continue reading →

Give a Second API to Your React-admin App

April 19, 2019Romain Batby6 min read

React-admin is a frontend framework for building back-offices running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. React Admin (previously named Admin-on-rest) is an Open Source project maintained by marmelab. If you do not know what React Admin is capable of…

Continue reading →

The React Developer Pocketbook: Learn to develop React 2019

April 01, 2019Leo Siddall-Butchers3 min read

The inspiration for this guide came about after realizing that the blog article I had read the most was ‘A Complete Guide to Flexbox’. There are two reasons for this, firstly, I am very forgetful, and secondly, it is a quick and simple way to find the information I need. This list aims to give you…

Continue reading →

Create a login screen in less than 5 minutes with Formik and Yup

March 06, 2019Gavin Williams5 min read

In this article, you will quickly learn how to build a simple login form using Formik and Yup. For those who don’t know, Formik is a relatively new but already widely-used form library for React. As a much less complex alternative to Redux Form, it keeps your React forms far simpler than and more…

Continue reading →

Create a login screen in less than 5 minutes with Formik and Yup

March 06, 2019Gavin Williams5 min read

In this article, you will quickly learn how to build a simple login form using Formik and Yup. For those who don’t know, Formik is a relatively new but already widely-used form library for React. As a much less complex alternative to Redux Form, it keeps your React forms far simpler than and more…

Continue reading →

Build React App Faster by Writing your Own Higher-Order Components

March 04, 2019Benoît de Malet5 min read

Now that hooks have officially been released in React 16.8 and that everybody is trying to convince you to rewrite all your React projects using nothing but hooks, let's see if there is still something to achieve using Higher-Order Components. (Spoiler alert: the answer is "yes") In this article, we…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga8 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga8 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

Wow your customers with simple UI & UX principles

January 28, 2019Tomas Piga8 min read

When it comes to the web, the main idea of a website or app is to either sell a product (including services) or be that product. Generally, a product is about delivering a message or some sort of value to a User. Many people don’t value the U in that sentence. User experience is about maximising the…

Continue reading →

5 Gotchas using Victory Chart for Data Visualisation

January 05, 2019Kamile Matulenaite7 min read

5 gotchas using Victory Chart for data visualisation Victory Chart is a React chart library for data visualisation built on top of D3. Formidable Labs have produced a neat set of documentation - easy to follow, full of examples and an editable demo section (we love those!). However, there are a few…

Continue reading →

5 Gotchas using Victory Chart for Data Visualisation

January 05, 2019Kamile Matulenaite7 min read

5 gotchas using Victory Chart for data visualisation Victory Chart is a React chart library for data visualisation built on top of D3. Formidable Labs have produced a neat set of documentation - easy to follow, full of examples and an editable demo section (we love those!). However, there are a few…

Continue reading →

What is Kotlin and should we be using it for app development?

December 07, 2018Abbie Howell5 min read

Kotlin is an object-oriented programming language for making Android apps that uses Java-like syntax with functional programming features. It was created by Jetbrains, the makers of hugely popular IDEs like IntelliJ and PyCharm, and is used by big companies such as Pinterest, Uber, and Atlassian. At…

Continue reading →

We want you to make reusable UI components

October 02, 2018Léo Anesi2 min read

A year ago I was a young developer starting his journey on React. My client came to see my team and told us: “We need to make reusable components”, I asked him: “What is a reusable component?” and the answer was “This project is a pilot on the subject”. 2 months later another developer tried to use…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell6 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell6 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

Save Time Writing Jest Tests with jest-each (+ Examples)

September 21, 2018Mike Riddelsdell6 min read

jest-each is a small library that lets you write jest test cases with just one line. It was added to Jest in version 23.0.1 and makes editing, adding and reading tests much easier. This article will show you how a jest-each test is written with examples of where we use it on our projects. A simple…

Continue reading →

React-Virtualized: Why, When and How you should use it

September 11, 2018Cyril Gaunet5 min read

Why What is a Virtual DOM ? The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory. Then, it is synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. Performance and windowing You might know…

Continue reading →

Build an awesome scrollable modal in React Native

August 20, 2018Antoine Garcia4 min read

At some point during the development of your React Native application, you will use a Modal. A Modal is a component that appears on top of everything. There are a lot of cool libraries out there for modals, so today, we’ll have a look a the best libraries for different use cases. Click on "Tap to…

Continue reading →

Build an awesome scrollable modal in React Native

August 20, 2018Antoine Garcia4 min read

At some point during the development of your React Native application, you will use a Modal. A Modal is a component that appears on top of everything. There are a lot of cool libraries out there for modals, so today, we’ll have a look a the best libraries for different use cases. Click on "Tap to…

Continue reading →

Installing Private NPM Packages on AppCenter

July 19, 2018Ben Ellerby2 min read

AppCenter is a great CI platform for Mobile Apps. At Theodo we use it as the standard tool for our react-native projects. In a recent project, we needed to have a shared NPM package between the React and React-Native applications. There is no mention of how to achieve this in the AppCenter…

Continue reading →

Next.js: Use Server-Side Rendering in your React App // Part 1

April 27, 2018Baptiste Jan8 min read

Usually, we are completely running React.js on client-side: Javascript is interpreted by your browser. The initial html returned by the server contains a placeholder, e.g. <div id="root"></div>, and then, once all your scripts are loaded, the entire UI is rendered in the browser. We call it client…

Continue reading →

Next.js: Use Server-Side Rendering in your React App // Part 1

April 27, 2018Baptiste Jan8 min read

Usually, we are completely running React.js on client-side: Javascript is interpreted by your browser. The initial html returned by the server contains a placeholder, e.g. <div id="root"></div>, and then, once all your scripts are loaded, the entire UI is rendered in the browser. We call it client…

Continue reading →

How not to Make your Projects Succeed with ImmutableJS! - Part 1

April 16, 2018Jérémy Dardour8 min read

ImmutableJS When I first learned about ImmutableJS I was convinced it was a great addition to any project. So I tried to make it a working standard at Theodo. As we offer scrum web development teams for various projects going from POC for startups to years lasting ones for banks, we bootstrap…

Continue reading →

How not to Make your Projects Succeed with ImmutableJS! - Part 1

April 16, 2018Jérémy Dardour8 min read

ImmutableJS When I first learned about ImmutableJS I was convinced it was a great addition to any project. So I tried to make it a working standard at Theodo. As we offer scrum web development teams for various projects going from POC for startups to years lasting ones for banks, we bootstrap…

Continue reading →

Customize Your ReactJS App Using styled-components, cross-env and webpack

February 28, 2018Darya Talanina5 min read

As a web developer you may have already worked on a project where you had a single web application that was used by several different clients. The app would use a single code base but then it would need to have several variants, each personalized for a specific client: you may need to change the…

Continue reading →

Customize Your ReactJS App Using styled-components, cross-env and webpack

February 28, 2018Darya Talanina5 min read

As a web developer you may have already worked on a project where you had a single web application that was used by several different clients. The app would use a single code base but then it would need to have several variants, each personalized for a specific client: you may need to change the…

Continue reading →

Build your own smart mirror for less than 50€

February 26, 2018Jean-Philippe Dos Santos5 min read

Smart mirrors are straight from science fiction but it turns out that building your own smart mirror isnt just science fiction or Tom Cruise's favorite activity. Its actually easy to build your own version... and I will show you how. I recently built one to save time each morning by answering this…

Continue reading →

Build a Real-time Notification System With GraphQL, React and Apollo

February 22, 2018Loïc Carbonne8 min read

Real-time has opened new opportunities in web applications. By allowing users to get access to data as soon as it’s available, it provides them a better experience. Thanks to real-time, you can edit documents collaboratively, play online with your friends, know exactly when your pizza delivery man…

Continue reading →

Building a Google Analytics Funnel from Firebase in React-Native (a simple workaround)

January 15, 2018Ben Ellerby2 min read

Google Analytics funnels are a standard way to monitor conversion on a typical purchase flow (e.g. buying a book on an ecommerce site, subscribing to an online service or taking out an insurance policy). Google have moved to have Firebase as their standard mobile app analytics platform, and there is…

Continue reading →

React and HTML : Beware of the traps

January 12, 2018Elie Dutheil5 min read

If you ever used React you may have noticed that you can easily forget how to write a static webpage because it adds a layer of abstraction that changes the way the page is created. But in the end, all code written in JSX will generate a classic DOM. In this article I'll show you mistakes I made and…

Continue reading →

Clean your Tests from React-Intl "Missing message" Errors in Console

December 21, 2017Yannick Wolff5 min read

Why is it important? While programming on a project, you run your tests all the time, so it's important not to lose time analysing the results of your tests. We want to immediatly spot which tests are failing, not being disturb by any flashing red false negative errors, which take all the place in…

Continue reading →

Your Preact Progressive Web App using Preact-CLI, Webpack, Material Design and Web APIs

November 11, 2017Laurent Ros14 min read

This article will introduce you to the world of Progressive Web Apps, to the Preact framework and to Web APIs. It will guide you through 15 minutes of code to create your first Preact Progressive Web App! Status of PWAs today Progressive Web Apps are taking over the web! They are the future of…

Continue reading →

How to write the perfect React component (a Theodo standard)

October 23, 2017Clément Pasteau6 min read

What is the perfect React component? The component should have one purpose only, rendering The component should be small and easily understandable The component should rerender only if needed How to create the perfect React component? Logic Functions Atomic Design Selectors and Reselectors Functions…

Continue reading →

Load Scripts in Your React Bundle Asynchronously: Win at SEO!

July 23, 2017Félix Mézière4 min read

On my current project, the team (and our client 😱) realised our React website performance rating was below industry-standard, using tools like Google Page Speed Insights. As reported by the tool, the main cause for this are render-blocking scripts like Stripe, Paypal, fonts or even the bundle…

Continue reading →

React London 2017 Review

May 03, 2017Jack Lawrence-Jones8 min read

On a breezy day in March, I, along with three other TheodoUK-ers, attended React London 2017. Standing in the stark light of the Westminster sun that silhouetted the brutalist architecture of the QEII Centre, we admired the conference's production value - check out that flag! But would we actually…

Continue reading →

React London 2017 Review

May 03, 2017Jack Lawrence-Jones8 min read

On a breezy day in March, I, along with three other TheodoUK-ers, attended React London 2017. Standing in the stark light of the Westminster sun that silhouetted the brutalist architecture of the QEII Centre, we admired the conference's production value - check out that flag! But would we actually…

Continue reading →

React Native Layout Tricks

April 25, 2017Louis Zawadzki3 min read

The basics of positioning are pretty well explained in the official React Native documentation. However, it only covers simple cases such as centering items or putting one element on top, middle and bottom. Here I intend to cover some cases that are quite common but for which I couldn’t find a…

Continue reading →

React Native Layout Tricks

April 25, 2017Louis Zawadzki3 min read

The basics of positioning are pretty well explained in the official React Native documentation. However, it only covers simple cases such as centering items or putting one element on top, middle and bottom. Here I intend to cover some cases that are quite common but for which I couldn’t find a…

Continue reading →

Adding Drag & Drop to Your Web App, the Simple Way (demos)

April 24, 2017Pierre-Louis Le Portz6 min read

Drag & drop has become such a common feature on the web that people think it's a no-brainer for developers. A few months back, a client told me: "How can it be that hard, it's all over the internet!" and at that time I had no idea how to implement it. If you want to learn how it's done, you are in…

Continue reading →

Enzyme : Fast and Simple React Testing

April 04, 2017Ambroise Laurent8 min read

React has quickly climbed its way to being a top framework choice for Javascript single page applications. What's not to like? A declarative syntax for UI Virtual-DOM for performance The possibility of server-side rendering. There is however one area that could be improved; its built-in testing…

Continue reading →

How To Create an Authentication System and a Persistent User Session with React Native

March 01, 2017Fernando Beck12 min read

When developing a mobile app, it's common to have to build an authentication system. However, requiring the users to provide their username and password every time they launches the app, severely deteriorates the user experience. Lately, I have been working on a side project to build a mobile app…

Continue reading →

How to Load Your React Application Twice as Fast With Isomorphic Application

February 24, 2017Clément Escolano5 min read

How to improve the speed of a React application? React is an incredible framework. You may have already learnt it from another post. However, it is a client-side framework and as such, it has a few drawbacks: search bots do not see the page content * a user with disabled javascript cannot see the…

Continue reading →

Bootstrap a Cross Platform App in 10 minutes with React Native

December 09, 2016Grégoire Hamaide7 min read

Mobile Apps are a crucial part of our daily life. Yet, building a native mobile app for everyone requires to have knowledge in at least two languages: Java for Android and Swift or Objective-C for iOS. At least, that’s what I thought until I discovered React Native. What is React Native? React…

Continue reading →

Go With the Flow - A Static Type Checking Tool for JavaScript

November 30, 2016Jérémy Dardour5 min read

Static Type Checking is Life, Static Type Checking is Love Javascript has been a hot topic for web developers for some time now. It's fast, runs everywhere and offers many wonderful frameworks such as Angular and React. However, its lack of static typing can be a real pain for developers, bugs only…

Continue reading →

iOS Development from Linux

October 18, 2016Richard Miller7 min read

Unfortunately there's no way* to develop an iOS app without a Mac. Fortunately that doesn't mean you need to switch to a Macbook, there is another way. *No legal way. You might find articles suggesting installing OS X (or macOS as it's now branded) in a virtual machine, but this breaches Apple's…

Continue reading →

The Meetup Checklist

October 07, 2016Nathan Gaberel5 min read

Three months ago, we organized our first meetup in London: the React Native London meetup. Fourty React Native developers showed up at our office to discuss the use of Redux alongside React Native and a whole lot of other things. Since then we have organized two other such meetups. Overall, I think…

Continue reading →

Introduction to React: learn how to make your UI dynamic and awesome!

February 15, 2016Corentin de Boisset10 min read

What is React? According to its developers, React is a JavaScript library for creating user interfaces. It is designed to solve one problem: building large applications with data that changes over time. It has had an ultra-fast success lately and is used in many famous websites like Facebook…

Continue reading →

How to quickly improve Users “Loading” Experience?

December 03, 2015Nicolas Boutin3 min read

29th October 2015, Amsterdam, Netherlands @Velocity Conf At the last VelocityConf (http://velocityconf.com/devops-web-performance-eu-2015) in Amsterdam, we attended a very interesting talk about waiting phases. You have an app. Everything works, but it's slow and users are bored and some even leave…

Continue reading →

How to quickly develop a quiz component with ReactJS

November 20, 2015Benjamin Bonny4 min read

This is a quick tutorial showing how you can develop a simple and reusable component using ReactJS. The need We want a component that can display a quiz. We need to display a question, allow the user to select one or more answers, validate its answers and go to the next question. After all questions…

Continue reading →