React (software): Difference between revisions

Revision as of 09:25, 20 July 2019

Revision as of 09:28, 20 July 2019

Line 53:

|accessdate=2019-05-20

}}</ref>

==Basic usage==

The following is a rudimentary example of React usage in HTML with [[React_(JavaScript_library)#JSX|JSX]] and JavaScript.

<syntaxhighlight lang="html">

<div id="myReactApp"></div>

<script type="text/babel">

class Greeter extends React.Component {

render() {

return <h1>{this.props.greeting}</h1>

}

}

ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));

</script>

</syntaxhighlight>

The <code>Greeter</code> class is a React component that accepts a property <code>greeting</code>. The <code>ReactDOM.render</code> method creates an instance of the <code>Greeter</code> component, sets the <code>greeting</code> property to <code>'Hello World'</code> and inserts the rendered component as a child element to the DOM element with id <code>myReactApp</code>.''

When displayed in a web browser the result will be

<syntaxhighlight lang="html">

<div id="myReactApp">

<h1>Hello World!</h1>

</div>

</syntaxhighlight>

==Notable features==