React is a javascript library from Facebook, used to create high-performance user interfaces called 'Single Page Apps'. It lets you compose complex UIs from separate pieces of code called "components". 

A component corresponds to an HTML element and its content. The most common component types are subclasses of React.Component. As developers, we need to create these subclasses. These subclases must implement a method render() that must return an immutable React element object, that in turn corresponds to the HTML string for the HTML element and its content. A way is provided to automatically call render() when data on which the rendering output depends on, is changed. React efficiently updates the screen, based on the differences in output between the current and previous call to render(). 

- Integrates with Typescript for compile-time checking, Webpack for website performance. - JSX is an extension to js that allows us to easily write HTML fragments in js files, and mix JS expressions in braces {} into that HTML. The Babel compiler pre-processes the the .js files to convert JSX element declarations e.g.: <div attr1="val1"> <child1/> <child2/> </div> ...into plain javascript function calls, as follows: React.createElement('div',{attr1: 'val1'}, React.createElement('child1'), React.createElement('child2') ) - JSX/Typescript integrates with SVG and CSS to allow importing them into the .tsx files. So the CSS and SVG part of JSX can be validated. - JSX validation is more advanced than HTML validation. VsCode does quite a lot of JSX validation in problems view. - Components are defined as js classes or 'constructor functions'. Thereafter they can be referenced in JSX using custom tags. For example a React component class named ShoppingList, can be referenced in JSX as <ShoppingList/>. By being able to refer to multiple lines of JSX by using a single custom tag, we can build large and complex UIs from small pieces of JSX. - Attributes for JSX custom tags are very similar to HTML attributes, and the values thus set can be accessed in the corresponding component class as the attributes of the readonly object this.props. - Virtual DOM: As shown here even if render() somehow needs to be called multiple times for the same component, React only renders the changed tags by diffing against an in-memory structure called the Virtual DOM, thus improving performance. - Automatically update UI on state change: In addition to the unchangeable props, React components should use a field this.state that is changeable by the component via the async method this.setState(), to store data used for rendering output. On detecting changes to this.state, React will automatically re-render the component. - UI State Events: In addition to allowing changeable data state, the React component class can override certain base class methods in order to listen to events such as 'component mounted (rendered) for the first time', 'component will unmount' etc.
- To change the data on which the rendering output directly depends, use this.state = .... in the constructor, and this.setState({name1:val1,...}) elsewhere. - To (usually, conditionally) not render anything, return null from the render() function. - Arrow functions do not change the value of 'this', so they're handy when you want to preserve the 'this' value from an outer method definition. - If a constructor is defined for a React.component subclass, it must manually allow the passing in of props by being declared as follows: constructor(props) { super(props) //custom code goes here } - We use props to pass information from outer UI components to inner UI components. UI components treat their own props as read-only. But props are not purely read-only. Changing the props of the child component from the parent component, will NOT reset the component state i.e. totally re-create the child component. To reset the child component state, we need to change the value of a special prop named "key". When this prop is changed, then the component state is reset.
- React using only Github editor (no need for local dev env or build steps) - React development using the local dev environment
Note: For deployment to a website, the content of the build folder needs to be copied into a suitable folder such as /home/username/public_html See also here for editing .htaccess