First Code in React (Hello World)

Developing a first code in React can be a challenging one for beginners; however, it is advisable to get fewer basics that can equip a user to grab what is needed and required.

I can assist you in building the first and foremost required code using the aforementioned application and its language.

Find out the following lines of a series of codes:

How to write hello world in the react language

• import React from ‘react’;
• function HelloWorld() {
• return <h1>Hello, world!</h1>;
• }
• export default HelloWorld;

In the code demonstrated above, this component is a function that returns a JSX expression, which is a syntax similar to HTML that allows you to define the structure and appearance of your UI components.

Meanwhile, in the listed case, the component’s duty is to and supposed return the heading element with the text “Hello World!”

To use this component in your application, you can import it into another component or your main application file and render it to the DOM.

Find the below example:

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import HelloWorld from ‘./HelloWorld’;

function App() {

  return (

    <div>

      <HelloWorld />

    </div>

  );

}

ReactDOM.render(<App>, document.getElementById(‘root’));

Note that, the above details or in this specific example, the user is trying to import the HelloWorld component and render it inside a div element in our App component. We’re then using ReactDOM.render to render the app component to the DOM, targeting the element with the id root.

About Author

SURF

See author's posts