[React]: Concepts

History

1990's ~ early 2000's

In 1990's and 2000's basics for font-end development were HTML/JS/CSS.

HTML to display text, CSS for styles and JS for interactivity with users.

When a user visits a URL, the server sends HTML/JS/CSS files. Then, when user submits a form, it gets sent back to the back end.

When a user requests a link, new HTML/JS/CSS gets sent.

Problem: All websites runs by different browsers (Firefox, Safari, Chrome, etc); JavaScript worked different across different browsers

jQery

jQuery allowed developers to easily interact with DOM(Document Object Model) across all browsers. DOM is the page or elements in debugging console, and JavaScript modifies these elements. jQuery had an unified, easy API that works across all browsers.

Example of jQuery

// jQuery Selectors
$("p").hide() // hide all <p> elements
$("#test").hide() // hide elements with id="test"
$(".test").hide() // hide ALL elements with class="test"
$(this).hide() // hide current HTML element

//jQuery Events
$("p").click(function() {
  $(this).hide()
})
// And more

More jQuery examples found on w3schools

With jQuery, JavaScript files started to become larger and larger. Backbone.js library came out to organize these JS files--it became easier to work with DOM and SPA came out.

SPA(Single Page Application)

Traditionally, we've had HTML/JS/CSS for each page, but with advancement with jQuery, JS library(backbone.js), and Ajax, we started to focus more on JS than HTML. Instead of requesting from the server a multiple times, we could load the application only once; we could stay on a page the entire time and based on what's written on JS, JS changed/updated the HTML elements/DOM to display new things.

Angular JS(2010)

Angular JS by Google allowed to create large applications by forming containers that wrapped our project based on MVC design; each JS files were divided into Model/View/Controller. Organizing these codes in larger projects made Angular more popular.

Problem: Applications started to get more complex as websites needed to handle more and more user interactivity. Data was flowing everywhere, and it became harder to find bugs. Each update of an app started to cause more issues. They needed to update their code base and have better architecture; how to organize, manipulate data and manage data flows.

React(2013)

React by Facebook allowed a new way of developing front end

Angular (2014)

Complete rewritten version of Angular JS came out. Called Angular (without JS).

React Concepts

1. React is declarative
2. Reusable Components
3. One Way Data Flow (Unidirectional)
4. User Interface based

1. Declarative vs Imperative

Imperative

Let's first look at the Imperative programming. Before react, many frameworks/libraries directly manipulated the DOM. This is called imperative (paradigm)--directly changes an individual part of app in response to various user events.

Ex) When a user is logged in, go change an icon, display friends, display chat, and so on. This is intuitive, but it is difficult to observe the relationship between events and edge cases (like AngularJS).

DOM (Document Object Model)

DOM is what browsers uses to display the web app. JS(jQuery or JS library) traverses and manipulates the DOM--true representation of page.

DOM manipulation is an expensive operation or inefficient. It takes a long time to change; browser has to repaint(change element & add it onto page), and re-flow(recalculate layout of page).

Example

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

Declarative

React is declarative (paradigm); it finds out the best way to change the DOM on its own. We need to declare what the app looks like. Other than telling the app exactly what do do (imperative), we need to declare the state and components.

Ex) JavaScript object

let state = {
  user: "Ellis Min",
  isLoggedIn: True,
  friends: ["Paul", "Smith", "John"],
}

When the user is logged in, React will know what to do. This has less complexity, better code quality, and faster development than programming individual cases of user interaction.

2. Reusable components

React builds websites like lego blocks with reusable components that people can customize. Ex) material-ui component, React-Bootstrap, blueprint, etc. They can share these components--JS functions that accepts attributes (props).

Ex) Component example as var/function/class

const element = (
  <div>
    <h1> hello world</h1>
  </div>
)

function homepage(props) {
  return <h1>Hello, {props.name} </h1>
}

class homepage extends React.component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

This components uses JSX syntax, HTML inside JS.

View React component in your browser (Installation)

Install React Developer Tools extension

3. Unidirectional data flow

State

let state = {
  user: "Ellis Min",
  isLoggedIn: True,
  friends: ["Paul", "Smith", "John"],
}

JSX (HTML inside JS)

const element = (
  <div>
    <h1>Hi</h1>
    <h2>Nice to meet you.</h2>
  </div>
)

State and component provides React library(function) that accepts them

function React(state, components) {}

React with state and components create virtual DOM which is JavaScript object(DOM), and it works like blueprint that tells React how it should update the actual DOM.

This is Unidirectional data flow. i.e. data flows only one way.

When we want something to change (in actual DOM), state has to change. After the change, React combines new state with components and updates the DOM.

Virtual DOM

Virtual DOM describes web app and has tree-like objects where data only moves downward.

With these restrictions, it's easy to debug our code. ex) When there's something wrong with logout function, you just have to look through components that resides in upper part of DOM.

4. UI based

AngularJS was a framework. like a kitchen providing the developer ALL the tools that's necessary to build an app.

React (library) only cares about the idea of components and virtual DOM. We'd need need other modules to customize our needs. This allows cross platform development.

need two libraries to import Core react library and react DOM library

Goals with react

Good react developers do the following

• Decide on components
• Decide the state and where it lives; in the hierarchical design
• What changes when state changes