DEVember is a special initiative by notJust.dev, where we will post a live tutorial every day in December. This is the beginning of our exciting journey through DEVember, in which we will dive deep into mobile development using React Native, while supporting an amazing cause!
On Day 1 of #DEVember we're showing you how to set up your development environment, create a new project with Expo, and get started with Expo Router. We'll also dive into the core features of our Challenge App, including displaying lists, styling, screen navigation, and organizing an effective project structure for smooth development. Let's begin this exciting journey together!
🌟DEVember Day 1: www.notjust.dev/projects/deve...
💡Submit your idea for DEVember on our Idea Board:
github.com/notJust-dev/DEVemb...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Introduction to DEVember
2:23 GitHub Collaboration: Sharing and Voting for Project Ideas
3:03 Fundraiser Announcement
4:28 Incentives for Fundraiser Donations
6:21 Getting Started with Expo Project Setup
10:15 Essential Tools: Node.js and Git Installation
11:50 Initializing and Configuring the Expo Project
14:07 Choosing the Right Expo Template
15:30 Running and Testing the Project with Visual Studio Code
17:31 Emulator Setup for Android and iOS
20:34 Understanding React Native Project Structure
23:12 Git for Version Control Introduction
25:52 Connecting to GitHub: Local Repository Setup
27:13 Creating and Managing GitHub Repositories
29:24 GitHub Committing and Pushing Changes
31:36 Cloning GitHub Repositories
33:11 Setting Up the Project from GitHub
35:15 Installing Dependencies and Running Cloned Project
37:07 Building the Core of the Application: Advent Calendar
39:21 Benefits of Using Expo for Development
41:32 Transitioning from React.js to React Native
45:49 User Interface Inspiration and Design
48:09 Implementing the Advent Calendar Design
50:20 React Native Styling Techniques
55:28 Flex Properties for Alignment and Spacing
58:08 Custom Fonts and Styling Techniques
59:37 Optimizing with Arrays and Key Properties
1:03:02 Introduction to FlatList Component
1:07:33 Styling FlatList for Multi-Column Layouts
1:10:43 Responsive Design Adjustments
1:12:09 Fine-Tuning Styles for Item Spacing
1:14:07 Generating a Dynamic Array for Calendar Days
1:15:58 Concept of Reusable Components
1:17:20 Building Custom Components for Scalability
1:20:30 Importing and Rendering Custom Components
1:23:48 Simplifying Components and Understanding Props
1:26:34 Introduction to TypeScript in React Native
1:28:06 Using TypeScript for Typing Properties
1:30:10 Code Updates and GitHub Committing
1:31:43 Community Interaction and Collaboration
1:34:09 Understanding File Extensions (JS, TS, JSX, TSX)
1:35:00 JavaScript and TypeScript Syntax
1:38:07 Choosing File Extensions for Projects
1:39:08 Expo Build Types and Ecosystem
1:40:20 Integrating Google Fonts in React Native
1:45:51 Utilizing Expo Splash Screen for Asset Loading
1:57:17 Introducing Expo Router for Navigation
1:58:37 Community Engagement and Fundraiser Updates
2:00:11 Expo Build and Native Code Integration
2:05:39 Setting Up Expo Router: Navigation and Configuration
2:13:15 Enabling Metro Web Support
2:17:36 Creating File-Based Screens in Expo Router
2:20:22 Demonstrating Web Support in Expo Router
2:22:04 Setting Up Dynamic Routing in Expo Router
2:30:04 Dynamic Routing to Specific Days in the App
2:33:27 Implementing Optional URL Segments
2:35:09 Customizing Stack Navigator in Expo Router
2:39:25 Setting Up a Root Layout for Global Configuration
2:43:38 Configuring Global Header Styles
2:45:32 Managing Screen Titles and Options
2:47:12 Entry Point and Global Configuration in Expo Router
2:49:33 Ensuring Global Asset Loading
2:53:30 Implementing TypeScript Path Aliases
2:57:18 Finalizing TypeScript Path Alias Setup
2:58:44 Recap and Closing Remarks
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #ReactNative
16 июн 2024
