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

react-native-ycm-initial-workshop.md

React Native learning resources

Here are a few notes, and a couple resources to help you on your way. There is a lot of good stuff on the web - tutorials and videos, and the official docs are really well made.

If you have any questions or thoughts - please let me know on the next call.

Here’s what we coverered:

Introduction to some of the concepts behind React and React Native

• JavaScript authored components
• JSX and rendering - like HTML but not HTML
• React Native specific JSX elements <Text> and <View> instead of <p> and <div>
• Abstraction of the UI logic into functions
• Variables in Javascript - rendering in JSX
• React native CLI vs Expo
• React and Flutter and Swift/ObjectiveC and Java/Kotlin
• Composition of components and modules in separate files
• javascript, node.js, npm and modules

Setting up a development environment

Getting set up with Expo is easiest- we start there: Expo — Learn how - 6 steps some issues:

• installing npm modules with --global flag requires admin sudo on mac with the default node installation
• nvm or node version manager is a nice way to install node for the local user, without needing admin rights - and also manage different versions of node (linux/mac only) nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions -
• Windows - path needs setting for the npm installed modules

Ran some example apps

• Using Snack - React Native in the browser
• locally using Expo
• iOS simulator (needs xcode installed on a mac)
• android simulator (needs android studio and a virtual device downloaded)
• on an actual phone with the Expo app installed
• We edited some code to see updates

Next steps…

Get it all set up and installed - and try out the sample apps.

Resources:

Tutorial

This is a hands on coding tutorial - worth doing to get you going: First steps - Expo Documentation -

Documentation:

React Native · A framework for building native apps using React Guides to get things done - Expo Documentation -

Book: Learning React Native, 2nd Edition

I’ve attached a PDFo of Ch2 which I think gives a good intro to how React Native works.

Also, here’s also a link to Ch1: 1. What Is React Native? - Learning React Native -

Get Learning React Native, 2nd Edition now with O’Reilly online learning. Learning React Native, 2nd Edition

Video tutorial: React Native Tutorial for Beginners (YouTube)

The first two hours of this course are free on youtube (with ads etc) - I watched the first half - and scanned - I think this a good intro to the main concepts. React Native Tutorial for Beginners - Build a React Native App 2020- YouTube -

Video: Intro to React - Free course on egghead.io

The focus in this course is React for the web - the concepts are mostly the same for React Native, you would use React Native components like <View> and <Text> instead of html elements like <div> or <p> and code in the context of a react native app.

React Tutorial for Beginners with Kent C. Dodds on egghead.io