React Native Projects

We will start our first full React Native project, titled "RelaxationStation," that will help our users relax and read some mindful quotes.

React Native has its own particular code patterns and structures, and we need to familiarize ourselves with these to recognize and build upon them.

We will begin to customize the default shell app by adding a text component and style it, and review some common issues and how to surmount them.

Apps are built on many UI elements, especially buttons. We will create our first button and place an image inside it and learn how to interact with it.

Reusable components make development faster and more flexible, and this video will cover how to create your own.

Core to any app is the ability to navigate between screens and elements. We will cover the most common navigation method in React Native and split our app into two screens.

We will import a set of quotes from a JSON file for use in the app, and learn more about props and PropTypes.

Our RelaxationStation app will get a big visual update in this video as we cover more styling options and cover the Platform API and the Inspector.

Two central and often unfamiliar concepts in React Native revolve around the layout of elements and dealing with changing data in an app. We tackle both topics in this video by learning about Flexbox and app state.

Great UX often involves great animation. We wrap up this section by adding pleasing animations to our quotes screen.

We'll scaffold out our BeBriefed app and make a new main component to reduce repeated code across platforms in our index files.

There is a great ecosystem of open source third-party packages and libraries available for React Native, and we explore pulling those in. Also talk about stateless components and props.

Debugging is an essential part of any development process, and here we'll learn how to use the Chrome Dev Tools to step through, inspect, and manipulate code.

We have covered a stacked navigation approach using the Navigator component, and now we'll introduce a cross-platform manner of implementing a tabbed navigation structure to our app.

With a tab bar in place we can now implement the rendering logic to show the different screen or tab contents based on what the user selects.

A short interlude to show some styling tricks and improving usability of the tab bar.

Almost any good app needs to pull data from outside of it, and we'll make ours aware of an external API as well.

We'll flesh out the initial screens of our Chat Now app and talk about how to use the TextInput component to let the user type in information.

We will cover some more advanced ways to interact with the Navigator component and start using a navigation bar for nav.

Let's create a simple text link that a user can tap on to be directed to an external web site, such as a support page, from within our app.

Working with data, handlers, and events in a larger app can quickly grow cumbersome, but the Flux paradigm and Redux implementation make it much easier to both code and reason about such applications.

Redux is a very effective and popular library for implementing Flux architecture, and we create the basics of it in our app with our first actions and reducers.

Redux glues into our application via higher order components that connect together our UI and our actions and reducers, and we cover the pattern for doing so in this video.

We will show how to build the main chat screen of the app and wire it up to communicate with our app's state via Redux.

Actions can be more than just simple objects, and we introduce thunks in this video to address how to grab data from state inside action creators, talk about how it is important that reducers return pure results, and use a ScrollView component to allow scrolling in our chat window.

We move beyond just a one-person chat as we bring in a fake server for our app to communicate with, and start sending and receiving messages from the API inside of our application.

Moving around our application is still key and this video blends together our use of the Navigator component with Redux patterns, and adds a button to our navigation bar.

Data in our application up until now is ephemeral, and will disappear if we quit the app. Storing and retrieving data long term is possible by using the AsyncStorage API.

While our data may be stored, our app won't know about it until it is placed back into our in-memory state, which is what we do in this video. We also do conditional navigation based on available data to improve the flow of the app.

No app is complete without an icon, so we'll talk about how to quickly generate one at all the different sizes you'll need for both mobile platforms.

With our app icons made, we'll place them into the app's package and tweak a few settings to make it production quality.

With our app icons made, we'll place them into the app's package and tweak a few settings to make it production quality.

During development, React Native scans, and updates all of our JS files on demand, but in production we want to make one combined, a minified file for our app to use, with prod optimizations included.

React Native moves quickly as a framework, and you'll frequently have the opportunity to upgrade between versions. This is a special case which requires a little attention.

There are great communities of React Native developers all over, and you can give and receive help at several of them. You'll also want to know how to effectively use the Git repo for the React Native project.