From the course: React Native Essential Training

Initializing the Bakesale app - React Native Tutorial

From the course: React Native Essential Training

Start my 1-month free trial

Initializing the Bakesale app

“

- [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 dev tools. Perfect. We'll start the usual by creating a source folder under the root and under source we'll create a component 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 dot slash source, components, slash 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 big failing 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 StyleSheet from React Native and we need to create a styles object for this component, so const styles equal 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 one and we need to justify content to center. Let's also alignItems 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 a 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.

Contents