Join Samer Buna for an in-depth discussion in this video Initializing the Bakesale App, part of React Native Essential Training.
- [Instructor] Let's start the Bakesale app. We'll initialize a new project for that. So we'll start with react-native init Bakesale, and then we'll cd into Bakesale and run react-native run-ios. Excellent, we have a brand new React Native project. Let's open up the editor on this directory. Let's also run the react-devtools, perfect.
We'll start the usual by creating a source folder, under the Rook and under source we'll create a components folder. And in components we'll create our App.js. App.js is a regular React class component. And let's bring in some components from React Native, so I'm going to import View and Text from React Native.
I'll make the app component render a view, and inside the view we'll render a placeholder text. Now we can go to our index.ios.js, delete everything except the last line, and we'll import our app component from ./src/components/app. We also need app registry from React Native, so we'll import that as well.
And the component that we want to register is App. Let's make sure this worked, and we have Bakesale in here from the App component. Excellent. We'll do the exact same thing for index.android.js, so that later we can test our application for Android as well. Let's center Bakesale on the screen. We need to import Style Sheet from React Native, and we need to create a styles object for this component, so const styles = StyleSheet.create.
And in here we'll define our different styles. We'll need a style for the container, so I'm going to call this container. The container is going to have a flex of 1, and we need to justify content to center. Let's also align items to center as well. For the header, let me just give it a font size of say, 40. Let's test those out, I'll give the view as style of styles.container, and we'll give the text a style of styles.header.
Let's test that out, looking good. I'm going to start this app with the remote data itself. In the next video we'll fetch the data from the Bakesale API, and start thinking about what to do with it.
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers
Skill Level Intermediate
1. Getting Started
2. React Native Fundamentals
Hello React Native on iOS5m 42s
3. Building a Simple Game App
4. Building a Data-driven App
5. Animation and Gesture Control
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.