Count Every Second Until the Event
Build Mobile App
From Scratch
In this class, you will learn to kickstart your mobile app development journey with a comprehensive guide to setting up your development environment; create a functional mobile application by understanding the architecture and essential components; work with and integrate various plugins and APIs to enhance app functionality; design and apply engaging user interfaces and themes to make your app visually appealing; build custom navigation to enhance user interaction and experience within your app; and effectively incorporate multimedia content such as images, audio, and video to enrich your application’s user engagement
Where
Borama Innovation Hub
Borama,Somaliland
When
Thursday to Tuesday
February 1st to 6th, 2024
Who's Facilitating
Borama Innovation Hub
About the course
This React Native Level 1 course will be the foundation of your journey with React Native. It will provide you with essential knowledge of React Native's core concepts and a solid understanding of its fundamental building blocks. You will gain proficiency in using React Native components, learn the basics of state and props management, and understand how to use essential plugins and libraries. This course will also introduce you to the basics of styling and layout in React Native, enabling you to build visually appealing mobile applications
Our Message To you
Your dedication is key to not only your academic success but also in building essential life skills such as time management and self-discipline. Being a dedicated student means being consistently present, both physically and mentally, and ready to engage with the class materials and discussions. Remember, your commitment and enthusiasm greatly contribute to the dynamic and enriching educational experience for everyone. Let’s work together to make this course both productive and successful.
Ask Questions
Asking questions is a uniquely powerful tool for unlocking value in Learning: It spurs learning and the exchange of ideas, it fuels innovation and performance improvement, it builds rapport and trust among students and teachers.
Digging into React-Native– the features
Introduction to React Native: Understanding what React Native is and how it revolutionizes mobile app development.
Familiarizing with Common Terms: Learning the key terminology used in React Native development.
Why Choose React Native?: Exploring the advantages of using React Native for mobile app development.
The React Native Community: Getting to know the vibrant community of React Native developers and contributors.
Exploring React Native Features: Diving into the core features and capabilities of React Native.
Online Resources for Learning React Native: Discovering valuable online resources, tutorials, and documentation for enhancing your React Native skills.
Keeping Up-to-Date with React Native: Staying informed about the latest updates and news in the React Native ecosystem.
Understanding React Native Documentation: Learning how to navigate and utilize the React Native documentation effectively.
Leveraging Community Support: Engaging with other React Native users for support, tips, and shared learning experiences.
Exploring React Native Libraries and Components: Using and understanding the extensive range of libraries and components available for React Native.
Schedule Training Schedule
8:00 - 10:00 Am Borama Innovation Hub
GETTING STARTED
by Abdiwahab MaalTraditionally, mobile app development for iOS and Android required proficiency in their native languages: Swift/XCode for iOS, and Java for Android. However, the mobile market is split between these two platforms, so focusing on just one means losing out on half of the potential audience. Thankfully, libraries like Cordova, Ionic, and React Native enable web developers to use familiar web technologies (JavaScript, HTML) for mobile app development. React Native, in particular, stands out. Unlike other libraries that render apps in a web view, resulting in performance differences from native apps, React Native creates true native apps from JavaScript. It achieves this by translating JavaScript into the native functionalities of the device, offering a performance akin to apps developed in the platform's native language.
10:00 - 12:00 Am Borama Innovation Hub
What you need - Development Environment
by Abdiwahab MaalYou can use a text editor to write code. This is definitely a personal preference with many free or paid options available. We will use Microsoft VS Code. It is a lighter weight editor versus full-featured IDEs. VS code is free yet includes all the features you would expect from a company such as Microsoft. There are also hundreds of code snippets and extensions that you can download for VS code that can aid your development. As far as software is concerned you need to have Node.js installed. One of the reasons we need Node is because it provides npm, the Node package manager. This is what we will use to install React Native itself and any other package that we may need for the course. Next we will need to preview the app as we build it. The easiest option is to use an actual mobile device. Under most circumstances, this will be the best way to preview the app. We also have the ability of using the built-in simulators if we have installed the appropriate development kits. In our case we will use Android Studio Emulators.
8:00 - 10:00 Am Borama Innovation Hub
NodeJS and NPM
by Abdirahman MohamedIn this course, one of the fundamental tools we'll be utilizing is Node.js, primarily for its provision of npm (Node package manager), which is an essential component in the React Native ecosystem. npm serves as the backbone for managing and installing not only React Native but also a myriad of other packages and dependencies that are vital for developing robust mobile applications. Throughout the course, we'll leverage npm to set up our React Native environment, install necessary libraries, and manage project dependencies, ensuring a smooth and efficient development process.
10:00 - 12:00 Am Borama Innovation Hub
Git and Git hub
by Abdiwahab MaalIn this segment of the course, we will cover the essentials of version control using Git, starting with the basics of Git operations. You'll learn how to create repositories on GitHub, a crucial skill for any modern developer. Following this, we'll dive into practical application by creating your first React Native project, a 'Hello World' app, and guide you through the process of uploading it to GitHub. This hands-on experience will be further enhanced as you learn to edit and update your project, enabling you to effectively manage and track changes in your development work, a critical aspect of collaborative and individual programming
React native Components
by Abdiwahab Maal• Development components can be defined as reusable components especially used for programming. • They are often functions or objects which can be re-used or modules which when given a set of inputs, outputs • One does not need to necessarily understand how the module achieves its goal. • Web components • A Web Component is a way to create an encapsulated, single-responsibility code block that can be reused on any page. • Think of components as reusable code or JavaScript functions • E.g. <Div>, <video> <Text> <span> <Table> <Textbox>, alert etc. • They are typically functions of classes • React components • Mostly web components which have been created for react framework • Using web development framework such as react or Vue, developers can create new web components. • To be able to develop web apps for mobile using JavaScript, there is need to create and reuse components needed especially those provided by the phone operating systems. • For example there is no DOM on mobile. • Instead of <div />, we need to use <View /> and <span />, the component <Text /> is used. • As such, react and react native have compnents which are specific to mobile app development. Using React native Components React native components can be classified into six main categories, namely: • React native components • Basic Components • User Interface • List Views • Android-specific • iOS-specific • Others
DESIGN THINKING
by Ahmed MohamedIn this course section, we delve into the world of Design Thinking, a user-centric approach to problem-solving that is crucial in developing successful applications. You'll be introduced to the five stages of Design Thinking: Empathize, Define, Ideate, Prototype, and Test. We'll explore how to deeply understand user needs through empathy, define clear problem statements, brainstorm innovative solutions, create prototypes, and rigorously test them for user feedback. This process not only fosters creativity but also ensures that the solutions developed are tailored to the real needs and challenges of users. By incorporating Design Thinking into your development process, you'll be equipped to create more engaging, effective, and user-friendly mobile applications.
Navigations
by Abdiwahab MaalUsing React Navigation We may have one component which the app starts from, but if we add other views to our app, we have no way to move from one screen to the other. How we accomplish this is through routing. In order to configure routing in our app, we need to set up React Navigation. The first thing we need to do is install the libraries we need for React Navigation into our project. Navigate to your project in the command line. The first thing we need to install is the react-navigation/native and react- navigation/stack packages. Now after this or any of the other installs we're about to perform, you may get a warning about some of the dependencies. According to the documentation, this is normal, and you can just ignore these as they won't have a negative effect. Then we need to install all of the dependencies needed for React Navigation to work properly. First, we install react-native-reanimated and react-native-gesture-handler. Then we install react-native-screens and react-native-safe-area-context. Then, finally, we install react-native- community/masked-view.
States
by Abdiwahab MaalThe data that below to a component is held in either state or props. Props are set by the parent and never changes. On the other hand, state can be updated and so is used to store data that changes. The state is initialized when the component is constructed. And a set method is used to update the state. To initialize a state you just assign the state a value. The useState hook is used to return an initial value and method for updating the state. It declares a state variable – which is a variable that is preserved between function calls. It is used to track state in a function component. The following code illustrates the use of state by having a state variable (count) whose initial value is 1. Count is incremented every time a button is clicked.
08:00-10:00 Am Borama Innovation Hub
Backend
by Abdiwahab MaalUsing Axios with React Native to manage API requests More often than not, you will need to make network requests to an API when building a web or mobile application. You can make these network requests to authenticate a user, update a resource, or retrieve a resource from your own server or third party APIs. The Fetch API comes in handy if you want to make API requests in a browser environment. In this guide you will learn how to fetch JSON data from an API and render that data inside a React component. This will help you make asynchronous requests initiated by the browser (including those across the network) for fetching resources. React Native also has a built-in Fetch API similar to the browser’s, specifically for networking with an API from your mobile application. However, there are alternative libraries, such as Axios, that you can use instead of relying on the native Fetch API. The built-in fetch API might suffice if you only want to retrieve a resource from the server. Axios may be a better option for more complex networking requirements because it comes with additional features, such as the interception of network requests and responses. Additionally, among other reasons, most developers prefer Axios over the built-in fetch API because of its isomorphic nature and out-of-the-box JSON transformation. Approaches There are two approaches you will leverage to get the data from the network. ● Fetch, a Web API available in browsers to fetch network resources. ● Axios, a Promise based npm library for browser and node.js You will fetch data from the GitHub Users API for a specific username and render a React component that displays the user's details, including the name, location, blog URL, and company name for that user.
10:00-12:00 Am Borama Innovation Hub
Soft-Skills
by Samakaab BaasheIn this vital section of our course, we will explore the key soft skills that are instrumental in the professional growth and success of any developer. This includes effective communication, which is foundational in teamwork and client interactions, and persuasion, a skill that aids in advocating for your ideas and solutions. We will also delve into leadership, empowering you to take initiative and drive projects forward effectively. Additionally, the course will cover time and workload management, crucial for maintaining productivity and balance in the fast-paced world of development. Through interactive sessions and practical exercises, you will learn to hone these skills, enabling you to navigate complex project environments, lead teams with confidence, and manage your tasks with efficiency and resilience.
Help
+252634400247
+252634558524
+252634442971