React: React Native Mobile Development: 3-in-1

This video provides an overview of the entire course.

This video walks you through installation and setup to get started with React Native.

• Learn about the tools you need to run the code
• Learn tips and tricks to setup your IDE for seamless development

This video demonstrates how to run a simple Hello World app in the simulator using a standard React Native boilerplate.

• Open the terminal and type the necessary commands
• Change the directory and run the command yarn run iOS
• Scan the QR code with the mobile app

This video discusses the basic concepts of JSX syntax and creating a simple component from scratch while explaining what each and every line of code does.

• Write code from scratch
• Discuss the changes

This video will give you an overview about an app like Instagram that will be built from scratch.

• Map out the components for making an app using mock-ups
• Setup the project environment and start building immediately

This video talks about how to style the header section of your Instagram app.

• Create a view container that contains the padding and background color for the header section
• Declare a style attribute to the view container that was created

This video talks about how to chunk out the photo section components and map out its blueprint using the mock-up.

• Learn about newer built-in React Native components

This video discusses the concepts of Flexbox in styling React Native components using examples.

• Create three view tags and give each of them similar attributes

This video talks about styling the photo section app using the concepts.

• Learn how to implement Flexbox
• Make the app looks presentable using external libraries

This video talks about how to fetch dynamic data in your Instagram app using REST API.

• Discuss why dynamic data is needed
• Create and serve your own REST API

This video talks about the difference between functional and class based components.

• Cover concepts of both functional and class-based components
• Cover concepts of props and state
• Show examples in code

This video talks about the library Axios.

• Install the library in your project
• Implement Axios to fetch data from your REST API

This video talks about how to persist app data using React states.

• Create an empty array variable
• Assign the data to the empty array
• Render the data on the screen

This video talks about the concepts of React’s built-in component lifecycle methods to solve infinity component re-rendering

• Initialize the state outside the render function
• Call the componentDidMount
• Re-render the data

This video talks about how to loop through the data fetched from our REST API.

• Learn how to loop through data in JSX syntax
• Render the data from data object of our REST API

This video talks about how to make a toggleable like button to capture button presses from the user.

• Make the use of super() keyword to use the this keyword
• Render the state object
• Resolve the warning mentioned

This video covers the concepts of Redux.

• Show the whole flow of how Redux works
• Discuss the difference Redux state and React state
• Discuss why Redux state management is needed

This video will show how to manage application state using Redux.

• Install Redux and React Redux packages in order to integrate Redux in our applications

This video will discuss about action creators that communicate with the reducers to update the state.

• Learn the definition of action creators
• Learn that action creators are needed to trigger the HTML call whenever we render our screen

This video will see how to create a Photos Reducer.

• Check the action type and update the action type with the payload

This video will discuss how to call actions from within our components.

• Know about the React Redux library that connects with React world with the Redux world

This video will give you an overview of creating an app to handle user authentication.

• Discuss mockups of the UI
• Introduce React-native-elements to use external library for design

This video talks about structuring and designing the login form using react-native-elements library.

• Use the blueprint
• Use React Native elements for the design creation
• Structure the login form as per your preference

This video talks about setting up Firebase for managing login credentials and setting up the Firebase module in our app.

• Get quickly introduced to Firebase and its uniqueness
• Add your project on the Firebase Console
• Add Firebase to your web app

This video talks about managing the state of the input fields in the login form using Redux.

• Creating action creators for storing input field state
• Connect the action creators to components

This video talks about storing the form input from action creators to Redux stores.

• Setup providers for Redux stores
• Creating the authentication reducer

This video wraps up the input field state management by getting the input values in the component for initiating login.

• Write the mapStateToProps function
• Connect the mapStateToProps
• Get the input values stored in your state

This video talks about the login process of the Firebase login API.

• Create a login action creator
• Handle login user success or failure

In this video, we will wrap up our authentication and make some user experience changes in our login form.

• Set up an action to check the processing of the login action
• Set the loading flag initially to false

This video gives an app overview of IdeaPad which is a fully fledged CRUD app that covers all concepts and is shippable.

• Discuss the flow of the app using mockup of screens
• Setup IdeaPad project

This video talks about how to configure and structure the data in Firebase.

• Discuss the Firebase data schema model
• Write rules in Firebase database

This video talks about how to structure the IdeaPad form component.

• Create a config folder
• Create an index.js file inside the folder
• Create a new component called IdeaPad form and tweak details as per the requirement

In this video, we are going to explore about submitting ideas to our Firebase database.

• Create another reducer called ideapad-form-reducer.js
• Import the reducer
• Create our own state management system

In this video, we will be creating a component for showing a list of ideas and using React Native elements design patterns.

• Create a component
• Use the list and list item JSX by importing them from the React Native elements library

This video talks about how to setup navigation in IdeaPad.

• Introduce React navigation library
• Discuss switching between navigation stacks

This video talks about how to navigate from one component to another and using the header options in React navigation library.

• Check if a new property is updated with a new value
• Utilize React Native navigation setup to navigate between different screens

This video talks about populating the list component with data from the Firebase database.

• Discuss how to use Firebase module for fetching data
• Modify data from firebase to loop through in the component

This video talks about creating a component for editing ideas.

• Navigate to the edit idea page
• Edit our ideas from the idea page

This video talks about how to avail the edit functionality by creating action creators using Firebase API.

• Use the ideaInputChange method by using the componentDidMount function
• Initialize our form with the existing idea title and idea

This video talks about creating the delete functionality and wraps up the IdeaPad project.

• Create an action creator for deleting our idea