devFastWebApps

v0.5.0 - Feb 20, 2019 11:47 AM
Be Very Aware!
This Web Site Is Under Construction

Work in Progress


React

React

React - is a declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Facebook open-source JavaScript library for building UI: User Interfaces

  • Game changer in web development. The React community has pioneered many approaches, terms, and design patterns, and other libraries have followed the path forged by React. Gatsby is an excellent example. It is a React program

  • A UI component library. The UI components are created with React using JavaScript

  • Modern UI frameworks like React are becoming essential to rich user experiences.

React wraps an imperative API with a declarative one
Tom Occhino from Facebook

React embraces declarative style over imperative

A declarative style of programming results in less code, reduces complexity, makes code easier to read and understand. It tells a computer what to do

An imperative style of programming describes how to do it

Components

React makes it very simple: everything is a component.

A stateless component does not manage internal state, and is just a function

A stateful component is a class, which manages state in its own properties

DOM: Document Object Model

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. It is the same document in both cases

The DOM is an object-oriented representation of the web page that can be modified with JavaScript. The browser rendering engine takes the web pages HTML and CSS files and turns them into pixels on the screen

The DOM is standardized and is language-agnostic, The de-facto standard language to access the DOM is JavaScript

JavaScript can interact with the DOM to:

  • Inspect the page structure

  • Access the page metadata and headers

  • Edit the CCS styling

  • Attach or remove event listeners

Virtual DOM

React uses a virtual DOM to find differences between what’s already in the browser DOM and pixels on the screen, and the changes in the UI state or view. This process is called DOM diffing or reconciliation of state and view. This speeds up the process of changing pixels on the screen. Developers don’t need to explicitly changing the view. When a component updates its state, the view will be updated automatically as needed.

JSX: JavaScript eXtended

JSX is an extension to the JavaScript language syntax. Similar in appearance to HTML, JSX provides a way to structure component rendering using syntax familiar to many developers

React uses JSX for templating instead of regular JavaScript. It is not necessary to use it

JSX is a statically-typed, object-oriented programming language designed to run on modern web browsers. Some attribute of JSX are:

  • Javascript Extension - JSX is a syntax extension to JavaScript that describe what the UI should look like. JSX may seem like a template language, but it comes with the full power of JavaScript

  • Faster - JSX performs optimization while compiling the source code to JavaScript. The generated code runs faster than an equivalent code written directly in JavaScript

  • Safer - In contrast to JavaScript, JSX is statically-typed and mostly type-safe. The quality of applications becomes higher when being developed using JSX, since many errors will be caught during the compilation process. It also offers debugging

  • Easier - JSX offers a solid class system much like Java, freeing the developers from working with the too-primitive prototype-based inheritance system provided by JavaScript. Expressions and statements, however, are mostly equal to JavaScript, so it is easy for JavaScript programmers to start using JSX

Why JSX

  • React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display

  • Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both

  • React doesn’t require using JSX, but most programmers find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

John Telford
John Telford
Portland, Oregon