What is ReactJS

Library for creating user interfaces by Facebook and Instagram 

Think React as V in MVC

Simple

Simply express how your application should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.

Declarative

When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.

Build Composable Components

React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.

Give it five minutes :)

Thinking in React

Mock

Text

1. Break the UI into a component hierarchy

• Draw boxes around every component (and subcomponent) in the mock and give them all names

• Technique is like Single Responsibility Principle: A component should ideally only do one thing

• If it ends up growing, it should be decomposed into smaller subcomponents.

• UI and data models tend to adhere to the same informational architecture.

Five components here:

1. FilterableProductTable (orange):
2. SearchBar (blue)
3. ProductTable (green)
4. ProductCategoryRow (turquoise)
5. ProductRow (red)

UI into Component heirarchy

Lets arrange the components in the hierarchy

• FilterableProductTable
  • SearchBar
  • ProductTable
    • ProductCategoryRow
    • ProductRow

Components that appear within another component in the mock should be treated as a child in the hierarchy

Basics

Components

JSX & Virtual Dom