Javascript course — introduction to React

Part #7: React — A JavaScript library for building user interfaces

Photo by William White on Unsplash

• React is a Javascript library for building user interfaces
• React is not a full-featured javascript framework
• React has a large community that contributes many useful libraries to React ecosystem

The motivation behind creating react

function (data) { return UI; }

React doesn’t use templates.

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI.

React approaches building user interfaces differently by breaking them into components. React uses a real, full-featured programming language to render views, which we see as an advantage over templates for a few reasons:

• JavaScript is a flexible, powerful programming language with the ability to build abstractions. This is incredibly important in large applications.
• By unifying your markup with its corresponding view logic, React can actually make views easier to extend and maintain.
• By baking an understanding of markup and content into JavaScript, there’s no manual string concatenation and therefore less surface area for XSS vulnerabilities.

Read more in the blog post Why did we build React? from June 05, 2013 by Pete Hunt.

• Reactive updates are dead simple.
• HTML is just the beginning.

📚 Define some vocabulary

JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements”. JSX In Depth

An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.

React.Component

A component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input and returns an element tree as the output.

Class Properties
A defaultProps can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props.

Instance Properties
Props (which stands for properties) are commonly used terms for component object input argument. This is why people say that the props flow one way in React from parents to children.

The state contains data specific to the component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

📖 https://reactjs.org/docs/thinking-in-react.html

Continue next using React

Javascript course — Using React