ReactJS
Presented By: Ahmad Hamza
Follow me: @ahmad19 / @ahmad_719
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
Start with a mock
1. Break the UI into a component hierarchy
2. Build the static version in React
3. Identify the minimal (but complete) representation of UI state
4. Identify where your state should live
5. Add inverse data flow
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:
- FilterableProductTable (orange):
- SearchBar (blue)
- ProductTable (green)
- ProductCategoryRow (turquoise)
- 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
Some methods
State
Props
Component Lifecycle
Components
Components are the basic building blocks
Think of a component as a collection of HTML, CSS, JS and some internal data specific to that component
Components are either defined in pure JS or in JSX
Components helps in building UI efficiently
Components are just like functions
You can think of them as simple functions that take inprops and state (discussed later) and render HTML
JSX & Virtual Dom
JSX: Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects
Think of a component as a collection of HTML, CSS, JS and some internal data specific to that component
Components are either defined in pure JS or in JSX
Components helps in building UI efficiently
Components are just like functions
You can think of them as simple functions that take inprops and state (discussed later) and render HTML
Title Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.
Copy of ReactJS
By Ahmad Hamza
Copy of ReactJS
In progress
