- 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.