React anatomy: Difference between revisions
(8 intermediate revisions by the same user not shown) | |||
Line 48: | Line 48: | ||
== Elements == | == Elements == | ||
<blockquote> | <blockquote> | ||
An element is | An element is an immutable grouping of html-elements. | ||
{{ expand | |||
| define/render elements | |||
| | |||
<source lang="javascript"> | <source lang="javascript"> | ||
const element1 = <h1>Title</h1> | const element1 = <h1>Title</h1> | ||
Line 61: | Line 62: | ||
</div> | </div> | ||
) | ) | ||
var elements = [element1, element2, element3] | |||
var parent = document.getElementById('root') | |||
ReactDOM.render(elements, parent) | |||
</source> | </source> | ||
}} | |||
{{ expand | |||
| reloading/re-rendering elements | |||
| | |||
Every call to <code>ReactDOM.render()</code> replaces the selected element, reloading the changes.<br> | Every call to <code>ReactDOM.render()</code> replaces the selected element, reloading the changes.<br> | ||
The [https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element official docs] demonstrate this with a ticking clock. | The [https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element official docs] demonstrate this with a ticking clock. | ||
Line 79: | Line 87: | ||
setInterval(tick, 1000); | setInterval(tick, 1000); | ||
</source> | </source> | ||
}} | |||
</blockquote><!-- Elements --> | </blockquote><!-- Elements --> | ||
Line 88: | Line 97: | ||
{{ expand | {{ expand | ||
| component (function | | define component (function) | ||
| | | | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 102: | Line 111: | ||
{{ expand | {{ expand | ||
| component (class | | define component (class) | ||
| | | | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 130: | Line 139: | ||
</blockquote><!-- Components --> | </blockquote><!-- Components --> | ||
== | == Fragment-Components == | ||
<blockquote> | <blockquote> | ||
A Fragment is like a component, except it lets you return multiple top-level elements.<br> | A Fragment is like a component, except it lets you return multiple top-level elements.<br> | ||
Line 136: | Line 145: | ||
You can use it like a regular component. | You can use it like a regular component. | ||
{{ expand | |||
| define fragment-component (function) | |||
| | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from 'react'; | import React from 'react'; | ||
Line 149: | Line 161: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
}} | |||
{{ expand | |||
| fragment-component usage | |||
| | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
<table> | <table> | ||
Line 157: | Line 173: | ||
</table> | </table> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
}} | |||
</blockquote><!-- Fragments --> | </blockquote><!-- Fragments --> | ||
</blockquote><!-- Components --> | </blockquote><!-- Components --> |
Latest revision as of 20:41, 10 December 2022
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!' );