Intro to React
Last updated
Last updated
Describe the concepts of React components, props, and state
Explain the concepts of the virtual DOM and JSX
Compare and contrast ReactJS to AngularJS
use create-react-app to start a React App
Create your own React components
React is a front end JavaScript framework used for creating user interfaces. It was originally engineered by Facebook, and it is now used by Facebook, Instagram, Airbnb, and many other companies.
React deals specifically with rendering data as HTML, so it involves a different mode of thinking when compared to Angular. In React, data flows in one direction (no two-way data binding), and data is modularized using components.
Here's an example of how React components would be created and rendered on a page. You'll see that there's a hierarchy where each components can contain additional components. The data is stored by each component, and a render function takes the data and renders it as HTML on the page.
Data is not bound in both directions in React. Meaning, if we want an input field to update the actual data in a component, we'll need to call a function to modify the value. Compare this to Angular, where we can change the value of an input field bound to ng-model and it'll automatically update the value in the controller.
React uses what's called a virtual DOM. When React renders data to the page, the differences are computed by comparing the page to the virtual DOM. When a component needs to be re-rendered, only the component and its subcomponents are actually rendered. This ideally results in a more efficient rendering process.
We keep mentioning data, and how each component is actually just storing data. But how is that data rendered? We'll be using a syntax called JSX to render our components. More to come!
