Please enable JavaScript.
Coggle requires JavaScript to display documents.
S19_L1-Intro to React (Principles (One Way Data Flow (Screen Shot 2019-06…
S19_L1-Intro to React
Principles
Atoms
Examples: Icons little small indivisible elements
Images
Texts
Molecules
Combined atoms that have similar functionality
Navigation Bar
Organisms
Combined Molecules that have similar functionality
Templates
combination of organisms that represent what your app or website will look like.
Pages
The page of your app
Think Lego Blocks
Reusable components
Components are independent
One Way Data Flow
Parent
Children
Top to Bottom
So if the reds one change only the blue components would know of the change
If the red children change only the children know of the change
Creates bug free code since it's predictable outcomes
React.js?
Before
JQuery
Imperative Coding
Sequentially
Uses DOM Manipulation
Harder to Scale
Created by Facebook
Bread Machine
Throw ingredients in and react does the rest for you underneath the hood.
view
Change DOM in predictable ways
Easy to scale
Manage
Different apps
mobile
virtual reality
websites
desktop apps
You can do this in time
Virtual DOM
Document Object Model
Minimize the amount of DOM manipulation
The human is the programmer and we use to have to tell the DOM what to do
Now the react BOT creates a virtual DOM(a javascript Object)
It describes the current state of the website
object give to react
bot manipulates DOM
Virtual DOM is a copy of the DOM in a javascript object
React Ecosystem
Tools
NPM
Node.js
Babel
Redux
React/Router
Webpack
