React 101

React

React

React - React 101

React course


Intro

React is a JavaScript library for building user interfaces.


Basic Concepts

  • JSX: JavaScript XML (JSX) is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering. More
  • Props: Properties are passed to a component from the parent component. Components receive props as a single set of immutable values. Whenever any prop value changes, the component’s render function is called allowing the component to display the change. More
  • State: States hold values throughout the component and can be passed to child components through props. More
  • Virtual DOM: React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser’s displayed DOM efficiently. This allows to write code as if the entire page is rendered on each change, while the React libraries only render sub components that actually change.

Thinking in React


Understanding React Component life-cycle


React Router

React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router does that, keeping your application UI and the URL in sync.


Style React Components


Redux React Components

  • Core Concepts Here
  • Usage with React Here

Unit Testing