MOCKSTACKS
EN
Questions And Answers

More Tutorials









React Hello World Component


A React component can be defined as an ES6 class that extends the base React.Component class. In its minimal form, a component must define a render method that specifies how the component renders to the DOM. The render method returns React nodes, which can be defined using JSX syntax as HTML-like tags. The following example shows how to define a minimal Component:

import React from 'react'
class HelloWorld extends React.Component {
 render() {
return <h1>Hello, World!</h1>
 }
}

export default HelloWorld
A Component can also receive props. These are properties passed by its parent in order to specify some values the component cannot know by itself; a property can also contain a function that can be called by the component after certain events occur - for example, a button could receive a function for its onClick property and call it whenever it is clicked. When writing a component, its props can be accessed through the props object on the Component itself:

import React from 'react'
class Hello extends React.Component {
 render() {
 return <h1>Hello, {this.props.name}!</h1>
 }
}
export default Hello

The example above shows how the component can render an arbitrary string passed into the name prop by its parent. Note that a component cannot modify the props it receives.

A component can be rendered within any other component, or directly into the DOM if it's the topmost component, using ReactDOM.render and providing it with both the component and the DOM Node where you want the React tree to be rendered:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

By now you know how to make a basic component and accept props. Lets take this a step further and introduce state.

For demo sake, let's make our Hello World app, display only the first name if a full name is given.

import React from 'react'
class Hello extends React.Component {
 constructor(props){
 //Since we are extending the default constructor,
 //handle default activities first.
 super(props);
 //Extract the first-name from the prop
 let firstName = this.props.name.split(" ")[0];

 //In the constructor, feel free to modify the
 //state property on the current context.
 this.state = {
 name: firstName
 }
} //Look maa, no comma required in JSX based class defs!
 render() {
 return <h1>Hello, {this.state.name}!</h1>
 }
}
export default Hello

Note: Each component can have it's own state or accept it's parent's state as a prop.

Conclusion

In this page (written and validated by ) you learned about React Hello World Component . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Components.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.