Last week, my first React Native app landed on the App Store. Last year, Dan Abramov’s presentation on Redux at React Europe provided a compelling pattern for building well structured single-page applications within the React ecosystem.
This year, Bonnie Eisenman’s talk left me excited about where the ecosystem is going and how such a technology is going to enable native cross-platform development. She took the time to share a retrospective around React Native and where she feels the React Native ecosystem is going.
Our team has done some projects with React, Facebook Flux, and Redux and I figured it might be worth sharing what I’ve learned over the last two years.
If you’re new to React.js, check out my course on O’Reilly Media.
By the end of this series, you should be able to put together a simple Redux architecture on React Native for a native iOS application.
To run the project locally, you will need to register for a free API key: https://market.mashape.com/spoonacular/recipe-food-nutrition/pricing
If you already have experience with React Native or Redux, I suggest skipping to the 10 minute mark of 5th video since most of the first section deals with the boilerplate required to get everything up and running.
1 . Overview & Demo
Take a look at what we’re building and how React Native stacks up compared to Hybrid (PhoneGap / Cordova / Ionic) and a native application development process.
NOTE: In the video I mention Titanium and mistakenly lumped it in with PhoneGap.
2. Setting up React Native & Redux
I’m going to walk through setting up React Native and importing the packages necessary to make Redux dance.
3. Reviewing Redux Concepts & Folder Structure
Given that we’re cobbling together a bunch of little libraries, we need to setup our project. I walk through some of the concepts in Redux and where they should live in our simple application.
4. Hooking up Redux to React Native
We’ll go through the remaining steps needed to connect react-redux, redux and react together. By the end of this video, we will have refactored the React Native boilerplate and configured some of the redux middleware which will enable us to log actions and handle asynchronous actions down the line.
5. Simple State Mutation with Redux
With all the wires hooked up and our framework in place, we can put the architecture through its paces by making incrementing an integer through a simple reducer.
6. Making Asynchronous Requests with Redux on iOS
With the reducers, actions and components functioning correctly, we can now use the fetch() API (which is wrapping native iOS networking libraries under the hood), to talk to our RESTful endpoint.
7. Styling React Native Components
Our application works, but it’s not pretty. Let’s fix that.
8. Handling User Input and Tidying Up
I’m going to put the remaining touches on this simple application and enable folks to put in random ingredients and get appropriate recipe suggestions.