React (software): Difference between revisions

Content deleted Content added
Undid revision 1066243811 by 84.54.86.203 (talk)
Basic usage: The code previously used is legacy. The requested changes apply to how a basic react app/component is structured.
Tags: nowiki added Visual edit
Line 26:
==Basic usage==
The following is a rudimentary example of React usage in HTML with [[React (JavaScript library)#JSX|JSX]] and JavaScript.
<syntaxhighlight lang="htmljavascript" line="1">
import React from 'react';
<div id="myReactApp"></div>
 
const Greeting = () =>{
<script type="text/babel">
return(
function Greeter(props) {
<div className="hello_world">
return <h1>{props.greeting}</h1>;
<h1> Hello, World! </h1>
}
</div>
const App = <Greeter greeting="Hello, World!" />;
)
ReactDOM.render(App, document.getElementById('myReactApp'));
}
</script>
 
export default Greeting;
</syntaxhighlight>
The <code>Greeter</code> function is a React component that displays the infamous introductory <nowiki>''</nowiki>Hello, world"
The <code>Greeter</code> function is a React component that accepts a property <code>greeting</code>. The variable <code>App</code> is an instance of the <code>Greeter</code> component where the <code>greeting</code> property is set to <code>'Hello, World!'</code>. The <code>ReactDOM.render</code> method then renders the Greeter component inside the [[Document Object Model|DOM]] element with id <code>myReactApp</code>.
 
When displayed in a web browser the result will be:
<syntaxhighlight lang="html">
<div idclass="myReactApphello_world">
<h1>Hello, World!</h1>
</div>