React anatomy: Difference between revisions
Line 110: | Line 110: | ||
== Fragments == | == Fragments == | ||
<blockquote> | <blockquote> | ||
A Fragment is like a component, except it lets you return multiple top-level elements.<br> | |||
The top-level elements do not need to be of the same type.<br> | |||
You can use it like a regular component. | |||
<syntaxhighlight lang="javascript"> | |||
import React from 'react'; | |||
function Columns(props) { | |||
return ( | |||
<React.Fragment> | |||
<td>foo</td> | |||
<td>bar</td> | |||
<td>baz</td> | |||
</React.Fragment> | |||
); | |||
} | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="javascript"> | |||
<table> | |||
<tr> | |||
<Columns /> // <-- fragment with several items | |||
</tr> | |||
</table> | |||
</syntaxhighlight> | |||
</blockquote><!-- Fragments --> | </blockquote><!-- Fragments --> | ||
</blockquote><!-- Components --> | </blockquote><!-- Components --> |
Revision as of 20:24, 10 December 2022
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 a logical grouping of html code that can be updated on it's own.
All Elements are immutable.
When an element is changed, only the updates are reloaded.const element1 = <h1>Title</h1> const element2 = <h2>SubTitle</h2> const element3 = ( <div> <p>Some text</p> <p>Some more text</p> </div> ) ReactDOM.render([element1, element2, element3], document.getElementById('root'))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.function Description(props) { return ( <h1>Description</h1> <p>{props.paragraph}</p> ) }class Description extends React.Component { render() { return ( <h1>Description</h1> <p>{this.props.paragraph}</p> ) } }Component-Parameters are set like HTML element attributes.
<div> <Description paragraph="A very excellent game"> <Description paragraph="A very excellent movie"> </div>Fragments
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.import React from 'react'; function Columns(props) { return ( <React.Fragment> <td>foo</td> <td>bar</td> <td>baz</td> </React.Fragment> ); }<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!' );