Learning Path: React And React Native

Learning ReactJS 36 lectures 03:11:31 Learning ReactJS - The Course Overview This video gives an overview of the entire course. Setup Guide Explore the different ways you can use to write and experiment with React applications.

• Know about playground tools such as Plunker and JSBin
• Use the create-react-app npm package
• Use Webpack and Babel.js

Why React? Explain what React is and its main design concepts.

• Learn about reusable, composable, and stateful components
• Learn about React's nature of reactive updates
• Learn about React's virtual representation of views in memory

The React Way How to work with data in HTML using React and other options?

• Learn declarative HTML, generating HTML, and using enhanced HTML templates
• Learn about Ajax and JavaScript-based HTML template languages, and modifying the DOM nodes
• Learn about React's API for generating HTML elements using objects in JavaScript

The Virtual DOM What does having a virtual DOM actually mean in practice?

• Create a simple native JavaScript example for a ticking timer
• Create a React example for the same ticking timer
• See the virtual DOM way for updating the browser's DOM

React's Language This video will help you understand how React is a bridge between an imperative API and a declarative one.

• Learn how React's language allows us to declaratively describe user interfaces
• Compare the imperative way to the declarative way
• Understand how React takes care of data transitions after the UI definition

JSX The aim of this video is to know the why/what/how of JSX.

• Explain why working with JSX is a popular option in React
• Work through an example to switch React API calls to JSX in Plunker
• Delve into the local development options to work with JSX

Defining Components The aim of this video is to define React's components.

• Get started with using stateless functions to define simple components
• Use the React.createClass API
• Extend the React.Component function

Using JSX The aim of this video is to teach tips about using JSX in React components.

• Explore the JSX transformation process
• Learn to use expressions
• Make a note of some tips for JSX

Readability and Reusability In this video, we will understand the readability and reusability benefits of React components.

• Compare readability of React components with HTML
• Compare React components with functions
• Understand props' types and default props' static properties

Composability With this video, get to know the composability benefit of React components.

• Understand abstraction and uniform behavior
• Learn the concept of separation of concerns
• Know more about how UI components can be used to match data hierarchy

Reading and Updating the State The aim of this video is to teach you to read and update a React component's state.

• Set up a new React app with create-react-app
• Create a Timer component
• Use the this.state and this.setState functions

Deciding Who Owns the State The aim of this video is to explain how the placement of an application state matters.

• Move the state up by one level
• Create a button to reset a timer component

Giving Children Components Access to the State Our aim in this video is to learn how to make children components able to trigger change operations on their parent component's state.

• Get to know how to pass functions as props
• Invoke prop functions

React's Event System The aim of this video is to show React's Event System.

• Learn about the synthetic event object
• Learn about supported events

Working with DOM Nodes The video will show you how to access DOM elements and APIs directly.

• Read input value
• Use React's ref attribute

Controlled Components The video will show you how to create a controlled input component.

• Override the DOM behavior on an input element
• Read input values from the state instead of the DOM

Mounting and Unmounting Components How to use the lifecycle methods for mounting/unmounting of components.

• Render a simple Greeting component
• Define all the component lifecycle methods on the Greeting component
• Mount and unmount the component to see the lifecycle methods in action

Updating Components How to use the lifecycle methods for updating components.

• Update a component with parent state change
• See the update lifecycle methods in action

What Are We Building? The aim of this video is to define the main requirements of the application we will be building.

• Describe the Book list admin UI
• Use a GitHub repo to get a working React template with the initial data

Building the Presentational Components The aim of this video is to build presentational React components to work with the initial data of books.

• Explore more on using stateless function components
• Build a BookList and Book components

Initializing the State The aim of this video is to show how to work with stateful components.

• Convert the BookList component to a stateful component
• Reading from the state
• Changing the state with setState

Separating Components into Modules Modularity in components is important as we need to maintain code for every component in its own modules. With this video, explore more on modulatity.

• See how to set one file per component
• Use import/export for dependencies
• Isolate the responsibilities

Implementing the Delete Action The aim of this video is to learn the function of deleting a book from the list of books.

• Pass a function reference to a component
• Filter the array of books
• Bind event handlers to a component instance

Handling Edge Data Cases The aim of this video is to show how to display a book price in dollars and how to account for the missing prices.

• Use a presentational function to format the price
• Make the function aware of optional prices

Reading User Input from the DOM The aim of this video is to implement an "add book" action.

• Create a new Form component
• Read the user inputted value directly from the DOM API

Using a Controlled Input Component This video teaches how to read input from the user using a controlled input component.

• Overriding the DOM behavior on an input element
• Read the input values from the state instead of the DOM

Displaying the Author Information The aim of this video is to show how to work with the authors object in data.

• Create an Author component
• Know where to place the author lookup code

Moving Data to the Backend The aim of this video is to tell you how to move data to the backend.

• Prepare for the API
• Create an Express.js server
• Move the data to API endpoints

Fetching Data to React State The aim of this video is to fetch the API data from React State.

• Put all of the data on the state
• Use a fetch call from within a componentDidMount method

Improving the Data API The aim of this video is to show how improving the data API allows us to improve the front-end code.

• Do one round-trip instead of many
• Use one tree of data
• Avoid looking up the author information on the front-end

Configuring Store and Reducers You will now learn to configure store and reducers by creating a redux store object.

• Create a reducer function which takes a state and reduce it with actions
• Create a store using the reducer function
• Read the state from the store using getState()

Dispatching Actions The aim of this video is to show how to control a Redux store state with actions.

• Dispatch a test action
• Handle actions in reducers
• Dispatch an action to fetch the list of books

Working with the Redux Promise Middleware The aim of this video is to make a promise-based action—a standard dispatchable redux action.

• Use Redux.applyMiddleware
• Use the redux-promise middleware

Deleting a Book The aim of this video is to use a Redux action flow with an API call to delete a book from both the backend and the frontend.

• Create a DELETE book API call
• Use a promise-based action to invoke it
• Reduce the state based on the action

Final Thoughts In this video, we'll look at one final challenge for you to take up.

• Implement the addBook action with Redux
• Provide guidance on resources to continue learning ReactJS
• What's next?

Learning ReactJS. 36 lectures 03:11:31 Learning ReactJS - The Course Overview This video gives an overview of the entire course. Setup Guide Explore the different ways you can use to write and experiment with React applications.

• Know about playground tools such as Plunker and JSBin
• Use the create-react-app npm package
• Use Webpack and Babel.js

Why React? Explain what React is and its main design concepts.

• Learn about reusable, composable, and stateful components
• Learn about React's nature of reactive updates
• Learn about React's virtual representation of views in memory

The React Way How to work with data in HTML using React and other options?

• Learn declarative HTML, generating HTML, and using enhanced HTML templates
• Learn about Ajax and JavaScript-based HTML template languages, and modifying the DOM nodes
• Learn about React's API for generating HTML elements using objects in JavaScript

The Virtual DOM What does having a virtual DOM actually mean in practice?

• Create a simple native JavaScript example for a ticking timer
• Create a React example for the same ticking timer
• See the virtual DOM way for updating the browser's DOM

React's Language This video will help you understand how React is a bridge between an imperative API and a declarative one.

• Learn how React's language allows us to declaratively describe user interfaces
• Compare the imperative way to the declarative way
• Understand how React takes care of data transitions after the UI definition

JSX The aim of this video is to know the why/what/how of JSX.

• Explain why working with JSX is a popular option in React
• Work through an example to switch React API calls to JSX in Plunker
• Delve into the local development options to work with JSX

Defining Components The aim of this video is to define React's components.

• Get started with using stateless functions to define simple components
• Use the React.createClass API
• Extend the React.Component function

Using JSX The aim of this video is to teach tips about using JSX in React components.

• Explore the JSX transformation process
• Learn to use expressions
• Make a note of some tips for JSX

Readability and Reusability In this video, we will understand the readability and reusability benefits of React components.

• Compare readability of React components with HTML
• Compare React components with functions
• Understand props' types and default props' static properties

Composability With this video, get to know the composability benefit of React components.

• Understand abstraction and uniform behavior
• Learn the concept of separation of concerns
• Know more about how UI components can be used to match data hierarchy

Reading and Updating the State The aim of this video is to teach you to read and update a React component's state.

• Set up a new React app with create-react-app
• Create a Timer component
• Use the this.state and this.setState functions

Deciding Who Owns the State The aim of this video is to explain how the placement of an application state matters.

• Move the state up by one level
• Create a button to reset a timer component

Giving Children Components Access to the State Our aim in this video is to learn how to make children components able to trigger change operations on their parent component's state.

• Get to know how to pass functions as props
• Invoke prop functions

React's Event System The aim of this video is to show React's Event System.

• Learn about the synthetic event object
• Learn about supported events

Working with DOM Nodes The video will show you how to access DOM elements and APIs directly.

• Read input value
• Use React's ref attribute

Controlled Components The video will show you how to create a controlled input component.

• Override the DOM behavior on an input element
• Read input values from the state instead of the DOM

Mounting and Unmounting Components How to use the lifecycle methods for mounting/unmounting of components L template languages, and modifying the DOM nodes

Learn about React's API for generating HTML elements using objects in JavaScript

How to work with data in HTML using React and other options?

• Learn declarative HTML, generating HTML, and using enhanced HTML...