YCM React Native learning notes no.3 - 16 June 2020

react-native-ycm-notes-no3.md

YCM React Learning session no.3

16 Jun 2020

Here’s a quick recap of what we covered and some links and resources going forward.

Setting up the development environment

• 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.

The sample Tensorflow Image classification app

• 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 ran expo 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.

Examining the code.

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 the TFCamera component where all the Tensorflow relevant logic is contained.

React and JavaScript concepts covered

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 using export 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 👩‍💻👨‍💻

More useful resources

Review the previous notes and resources from these sessions:

• notes and resources, introducing young coders to React and React Native

• YCM - React Native notes - 05 June

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