16 Jun 2020
Here’s a quick recap of what we covered and some links and resources going forward.
- We revisited the set up to make sure we all could run build the apps and view them on our phones with Expo and React Native.
- The guide at Expo — Learn how is a good place to go for step by step instructions
- Also, we needed to be sure to have the Expo client installed on our phone.
-
We downloaded the example experiment from admataz/react-native-image-classifier (either check out via git or download the zip)
-
From the terminal command line, in the project folder, we ran
npm install
to install all the dependencies. Once that was done, we ranexpo start
which opened the Expo environment in a web browser - with the QR code we could use to build and launch the app on our phone.
I think this was a success - we could run the realtime image classifier app.
We changed the Camera from back to front - and this auto-updated the app running on the phone.
We went through some of the basics of JavaScript and React apps:
- dependencies defined in
package.json
import
statements at the top of files to use modules- The main
App.js
component - which contains theTFCamera
component where all the Tensorflow relevant logic is contained.
I would have liked to have been able to have a more meaningful live code example to demonstrate these basics for you - but here are the topics we covered, and what I think are good links to the relevant documentation to help explain
- the structure of React files - the JSX, passing of
props
as attributes to components where they can be used in local state variables . see Introducing JSX – React - React components being standalone reusable elements that can be included in other components - see Components and Props – React
- the different styles of authoring React components - functions vs class components. This Introduction to React Native has a good live code example that illustrates the difference in these styles.
- differences and similarities between React for the web and React Native. - see Chapter 2 of Learning React Native, 2nd Edition which contains a really good explanation of the way React Native works - the role of the rendering lifecycle and the basics of Native components.
- ways to define exports in JavaScript modules - as
default
or as named exports usingexport variableName
- the official docs (export - Web technology for developers | MDN) are accurate, but maybe this explains it a little better: Exports and Imports and Defaults, Oh My! - DEV Community 👩💻👨💻
Review the previous notes and resources from these sessions:
Check these tutorials and docs - they will be useful for your development:
- React Navigation | React Navigation
- Read about the React Main Concepts
- The Expo documentation Guides to get things done and API Reference (covers Expo SDK and supported React Native API)
- React Native Core Components and APIs · React Native