A presentation at WooSesh 2018 by Muhammad Muhsin
Creating a WooCommerce Mobile App with React Native Laccadive IO
Muhammad Muhsin Colombo, Sri Lanka Co-Founder, Laccadive IO Author, Smashing Magazine muhammadmuhsin.com @muhsinlk m-muhsin Laccadive IO
About today’s app Built with React Native Powered by WooCommerce Runs on iOS and Android Shopping cart functionality Laccadive IO
First, what is React? An open-source JavaScript library built by Facebook Helps you build User Interfaces Replaces the view layer of your application Declarative, Composable and Reusable Components Write HTML (JSX) within JavaScript Virtual DOM Laccadive IO
“Write programs that do one thing and do it well.” - Doug McIlroy Laccadive IO
What is special about React Native? Aimed for web developers who want to get into mobile apps Build truly native apps running on iOS and Android Learn once, write anywhere Build with your favorite language (JavaScript) Native performance & look-and-feel Oh, and it has MIT License! Laccadive IO
Features Cons RN Components map to Native Components Not all components are mapped Flexbox for styling Can’t use all CSS properties Native development, when you need it New and rapidly evolving Use other JS libraries along with RN Live Reloading and Hot Reloading Props and State Lifecycle Hooks Laccadive IO
A React Component A Hello World component with React Laccadive IO
A React Native Component The same component in React Native Laccadive IO
Laccadive IO
Who is using React Native Facebook Skype Uber Eats SoundCloud Laccadive IO
Future of React Native iOS Android Windows React Component React Native Tizen macOS Web Laccadive IO
WooCommerce One of the most popular WordPress plugins Powers 28% of the online stores in the world Easily set up your e-commerce store REST API ready https://docs.woocommerce.com/document/woocommerce-rest-api/ https://woocommerce.github.io/woocommerce-rest-api-docs/ Laccadive IO
Let’s Code Laccadive IO
Setting things up Install WooCommerce and SSL Follow the wizard and import sample products WooCommerce Settings > API > Keys/Apps > Add key Note down the Consumer key and Consumer secret https://woocommerce-store.on-its-way.com/ Laccadive IO
Context API Pass down data without using props React.createContext Provider Consumer Laccadive IO
Starting a React Native project npm install -g expo-cli expo init woosesh-store Select ‘tabs’ cd woosesh-store expo start Install and run Expo on your phone and scan QR code OR Run on iOS simulator / Android emulator Laccadive IO
Installing Dependencies npm install -S axios react-native-htmlview Laccadive IO
Home screen A simple image slider Button Laccadive IO
Products page React Native FlatList CSS Flexbox https://woocommerce-store.on-its-way.com/wp-json/wc/v2/ products?consumer_key=ck_286be1c0fd553c4b803ba2b 12c72593eb4676f8d&consumer_secret=cs_d4cc172fabae ef203a78f119518df0453753db65 Laccadive IO
Single product Item and quantity count maintained in state Add to cart button Laccadive IO
Cart page React Context API Laccadive IO
Where to find this project ⭐Star on GitHub: https://github.com/m-muhsin/woosesh-store Read the article: Google for ‘react native wordpress’ https://www.smashingmagazine.com/2018/05/building-mobile-apps-using-react-na tive-wordpress/ Laccadive IO
Go ahead and try! It’s not that hard. Laccadive IO
Thank You! Laccadive IO
Questions? @muhsinlk Laccadive IO
WooCommerce (and WordPress, by extension) can serve as an excellent back-end platform for your next native app. In this session, Muhammad will walk you through the foundations for building mobile apps with React Native and WooCommerce and drill into specific examples with real code. In the end you'll have access to the same code used for his demo to get you started on building your own native app!
The following resources were mentioned during the presentation or are useful additional information.
Find this project on GitHub!
Here’s what was said about this presentation on social media.
for free. You
can too.