React anatomy
Documentation
react top-level api https://reactjs.org/docs/react-api.html
Concepts
- react can be expressed in pure javascript, or in jsx
- UIs are divided into components, which have their own state, and are loaded as-ready
Example
/* ${project}/src/index.js * essentially your 'index.html' */ import ReactDOM from 'react-dom'; import './website.css'; // load CSS onto rendered page import Foo from './foo'; // load component 'Foo' from 'foo.js' ReactDOM.render(<Foo/>, document.getElementById('root'));/* ${project}/src/foo.js * a sample component */ class Foo { constructor(props) { super(props); } render() { <p>Hello world</p> } }
Components
Elements
An element is an immutable grouping of html-elements.
define/render elements
const element1 = <h1>Title</h1> const element2 = <h2>SubTitle</h2> const element3 = ( <div> <p>Some text</p> <p>Some more text</p> </div> ) var elements = [element1, element2, element3] var parent = document.getElementById('root') ReactDOM.render(elements, parent)reloading/re-rendering elements
Every call to
ReactDOM.render()
replaces the selected element, reloading the changes.
The official docs demonstrate this with a ticking clock.function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render(element, document.getElementById('root')); } setInterval(tick, 1000);Components
Components are basically functions/classes that parametrize/encapsulate the rendering of an element.
Components are pure functions/classes, they may not modify their params.
Components must return only a single container element.define component (function)
// component as function function Description(props) { return ( <h1>Description</h1> <p>{props.paragraph}</p> ) }define component (class)
// component as class class Description extends React.Component { render() { return ( <h1>Description</h1> <p>{this.props.paragraph}</p> ) } }component usage
Component-Parameters are set like HTML element attributes.
<div> <Description paragraph="A very excellent game"> <Description paragraph="A very excellent movie"> </div>Fragment-Components
A Fragment is like a component, except it lets you return multiple top-level elements.
The top-level elements do not need to be of the same type.
You can use it like a regular component.define fragment-component (function)
import React from 'react'; function Columns(props) { return ( <React.Fragment> <td>foo</td> <td>bar</td> <td>baz</td> </React.Fragment> ); }fragment-component usage
<table> <tr> <Columns /> // <-- fragment with several items </tr> </table>
Syntax
There are 2x ways of expressing react.
JSX and regular javascript.Javascript
JSX
JSX tags shadow
React.createElement()
calls. They can represent:
- HTML tag names (div, span, pre)
- React Components (Class/Function)
- React Fragment
These are equivalent
const element = ( <h1 className="greeting"> Hello, world! </h1> );const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );