?What is React?

• React is an open source front end JavaScript library - used for building interactive interfaces.
  • Not a framework (such as Angular)
• Built by Facebook in 2011 (Jordan Walke)/ OpenSourced in early 2013
• Maintained by Meta and a community of devs

Library: a tool that provides specific functionality

Framework A set of tools and guidelines for building applications.

 

     • unopinionated

 

      • Used to develop single-page web applications (ReactDOM)

      • Used to develop mobile applications (ReactNative)

      • Used to develop server-rendered application (Next.js)

• Architecture solution agnostic
  • Choose your own:
  • Routing
  •  HTTP
  • Managing app state
  • Internationalisation
  • Form validation
  •  Animations

 

Component-based

Components help us write reusable, modular and better organised code.

 Functional Components

      1. JavaScript function

      2. Return JSX markup (JavaScript XM)

 

• Hierarchical structure
  • Top node is the application
• Data can be passed down by props to a child component
• Data can be passed down by Context
• Data can be stored in separate store - such as Redux
  • Data structure can be selected / changes can trigger redraw

 

Declarative

• React adheres to the declarative programming paradigm. (as opposed to imperative programming- which is algorithmic based)
  • A style of building the structure and elements of computer programs that expresses the logic of a computation without describing its control flow.
  • Eliminate side effects: describes what must be accomplished in terms of the problem domain rather than a sequence of program flow.

      • Developers design views for each state of an application. 

 

Unidirectional Data Flow

      • When state changes React updates and renders the applicable part of the DOM tree.

 

 • Components use JSX or TSX to describe the visual part of a component.

 

React-DOM

The DOM is an object representation of the HTML elements.

DOM: Document Object Model

You can use DOM methods and a programming language, such as JavaScript, to listen to user events and manipulate the DOM by selecting, adding, updating, and deleting specific elements in the user interface. DOM manipulation allows you to not only target specific elements, but also change their style and content.

 

• React-DOM deals with the drawing part of a web application

• Problem: DOM thrashing and redraw
• Solution: Virtual DOM
  • Javascript structure that is quick to update
  • Updates are grouped 
  • UI is based on state: If the state does not change then do not change the UI... hence React

 

ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

 

Each JSX element is just syntactic sugar for calling

 

React.createElement(component, props, ...children)

 

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

 

Note: 

You can see what code is generated by React-DOM:

https://babeljs.io/repl/#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=7.5.5&externalPlugins=&assumptions=%7B%7D

 

React Rendering Steps

1	2	3
State changed => update VirtualDOM trigger	React diffs the current virtual DOM with the new Virtual DOM	Reconciliation the DOM. Only change the parts of the DOM that it needs to.

 

Event Handling: Synthetic Events

User events

• clicks

• mouse movements

• keyboard events

 

 Typical Events

• onClick

• onChange

• onSubmit

 

React-Native

 

 

 

Benefits

• Just add the stuff that you need. The application is tailored to your needs.