Throughout this course, students will learn to use React Native to create cross-platform native apps quickly and easily with a 50/50 mix of lecture and real-world labs. You'll start from scratch and build up to a comprehensive app which uses modern techniques and best practices to consume RESTful data from a NodeJS/Express server and present it to the user in a multi-screen, interactive app.
Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:
- Create cross-platform iOS and Android apps
- Set up a device emulator on your laptop and deploy apps to it
- Use expo to create and run iOS and Android apps
- Explain the architecture of a device app
- Apply the most useful React Native components
- Write app code that works differently on the different platforms
- Use flexbox on devices to control the layout of your apps
- Style your app efficiently using best practices
- Use stack navigators, drawer navigators and tab navigators to change app scenes
- Consume RESTful data in a handheld device and present it to the user
Need different skills or topics? If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate. We offer additional React, web development and design courses which may be blended with this course for a track that best suits your development objectives.
Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.
Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most.
Hello React Native
- What is React Native?
- What does it do for us? Why choose it?
- Pros and cons
- Sharing with web projects
- What React Native code looks like
- Leveraging your React knowledge
React and Redux reviews (when needed)
- Redux reminder
- Reducers, actions, state, store, and middleware
- React reminder
- SFCs vs class-based components
- JSX structure and rules
- Controlled and uncontrolled components
- Virtual DOM vs the real DOM
The Development Process
- Where do I even start?
- react-native vs. create-react-native-app
- Which is better for given situations
- The React Native team's recommendations
- What is expo?
- Creating a new React Native app
- How to run it on a tethered device
- How to run it on a wireless device
- How to run it in an Android emulator
- How to run it on an iOS simulator
- Debugging in a browser window
- Logging, breakpoints, stepping through
- YellowBoxes and RedBoxes
- Components overview
- Categories of components
- Text props and events
- props and events and the event object
- Differences between HTML and React Native images
- Reserving space for them
- Local images vs remote images
- How can we develop differently on the different platforms?
- Why would we ever do this?
- Technical roadblocks
- The DatePicker - iOS vs Android
- Using the Platform module
- Components review
- How to create modal views
- Controlling the OS's status bar
Flexbox for Native Layouts
- Why flexbox?
- Where it came from
- Flexbox on the web is NOT flexbox on native
- Containers and items
- flexBasis vs width/height
- flexShrink, flexGrow
- The flex shorthand
- justifyContent and alignContent
Styling React Native Apps
- How React Native styles differ from CSS
- How to apply styles
- How to control style inheritance
- Style arrays
- Four methods of defining styles
- Common properties
- Cross-platform fonts
- Conditional and programmatic styles
- What is navigation, really?
- How to get React Navigation
- The three types of navigators
- Routing object
- Navigation config
- How to pass params when navigating
- Three types of TabNavigators
- How to set icons
- Examples and demos
Ajax in React Native
- Why it must be different on a device
- The fetch API
- How to show a loading indicator
- How to make requests and populate affordances
- Security in a native environment
- Components review
Touchables and Buttons
- The Button API
- Button events and props
- Why touchables?
- How to disable a touchable
Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.
Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.
Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.