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: https://www.notjust.dev/projects/devember/day1 💡Submit your idea for DEVember on our Idea Board: https://github.com/notJust-dev/DEVember/discussions/categories/ideas 💬 Join the notJust Development gang and let's build together: Twitter: https://twitter.com/VadimNotJustDev Instagram: https://www.instagram.com/VadimNotJustDev Facebook: https://www.facebook.com/notjustdev LinkedIn: https://www.linkedin.com/in/vadimsavin Discord: https://discord.gg/VpURUN2 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