Learn how to build apps with React and React Native.

• Overview
• Outline
• Setup
• Recipes

This seminar is designed to demonstrate the essentials of building UI components with React and React Native.

The seminar begins with an introduction to React components and applications. Next, we will examine hooks, patterns, and routing. Finally, we pivot to React Native, discussing key elements of the framework for iOS applications.

Pre-Requisites: Attendees should have some experience with programming in general and working knowledge and practical experience of Modern JavaScript. Some React experience is a plus.

After this course, you will be able to:

• Understand what React is and what problem it solves
• Explore the basic architecture of a React component
• Gain deeper knowledge of React.js components and JSX
• Utilize React Hooks
• Employ React Routing to build Larger Apps
• Discuss the differences between React and React Native
• Build and deploy a non-trivial React Native application

This course will be delivered in 3 days

• Introduction to React

  • The Virtual DOM
  • Creating a React App
  • Managing Component State

• Working with Components

  • Working with JSX
  • Classes vs Hooks
  • Understanding and Passing Props
  • Handling Events

• Hooks

  • Technical Architecture and Complaints
  • Useful built-in hooks
  • Simple custom hooks

• Managing State

  • Options and Tradeoffs
  • Hand-rolled State
  • Introduction to Zustand
  • Routing

• Overview: React Native

  • Introduction to React Native
  • Configuration the Environment
  • Working with Native Components

• Working with Core Native Components

  • View
  • Text
  • Image
  • ScrollView
  • TextInput
  • Navigation and Routing in React Native

• Building for iOS

  • Navigating Xcode
  • Running and Debugging the Simulator
  • Working with the Platform Module
  • Integrating Native Modules into your Application

Everything works with npm and node-- any recent version should be fine.

1. Open a terminal
2. Navigate to the repository
3. Install dependencies:

   npm install

4. Run the project

   npm run dev

With just a free account, you can run VSCode (or some version thereof) with Docker in your browser.

• Zero installation

• Takes a while to download container images
• Free version limits time an space
• It's a hassle to view artifacts-- e.g. test coverage reports

1. In a browser, navigate to https://github.com/bathcat/fiestr
2. Click Code > Codespaces > Create codespace on main

Docker abstracts all software requirements, and VSCode works really well with containers. Read up on Developing Inside a Container

• Less configuration
• Repeatable environment setup
• Artifacts live on your local filesystem

• Takes a while to set up the environment
• You need Docker
• If your favorite editor isn't VSCode, you'll need to play around getting that set up

1. Docker
2. VSCode
3. Remote Development extension pack

1. Clone repo
2. Open in VSCode
3. F1 > Dev Containers: Reopen in Container

There's nothing magical about this setup: it's node and npm and a couple less-important bits for debugging and code coverage. So if you don't want to mess with containers, that's ok too.

• Everything is local
• No messing with containers
• Use your favorite IDE
• No time wasted downloading container images

• I only tested this on Windows
• Weird stuff might happen if our versions are different

1. Node
2. Your favorite text editor

1. Clone repo
2. Open in your favorite editor