Using React Components

#1. Let's create a HTML page with links to css and js files. Remember to create a
node with id=root as a location to display JSX components.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

#2. Import the React and ReactDOM libraries.

import React from "react"
import ReactDOM from "react-dom"

#3. Create the JSX component "MyInfo" which would be displayed in the node.

function MyInfo(){
  return (
    <div>
        <h1>Ifeanyi Omeata</h1>
        <p>I am a Software Developer and Cloud Engineer.</p>
        <p>My top 3 front-end tools are:</p>
        <ol>
          <li>React</li>
          <li>Angularjs</li>
          <li>Vuejs</li>
        </ol>
    </div>
  )
}

#4. Render the component to be displayed in the node.

ReactDOM.render(<MyInfo/>, document.getElementById("root"));

#5. Our displayed info should look like this.

#6. Let's refactor our code to be more simplified. So we would create a js file with the same name of the jsx component and put it in a folder we can call "components". Then we need to put our jsx code into the file and remember to import react libraries to make it functional, and to export the file to make it accessible.

import React from 'react';

function MyInfo() {
  return (
    <div>
      <h1>Ifeanyi Omeata</h1>
      <p>I am a Software Developer and Cloud Engineer.</p>
      <p>My top 3 front-end tools are:</p>
      <ol>
        <li>React</li>
        <li>Angularjs</li>
        <li>Vuejs</li>
      </ol>
    </div>
  );
}

export default MyInfo;

#7. Next, we would import our jsx component within the index.js file so that it can be rendered to the desired node.

import React from 'react';
import ReactDOM from 'react-dom';

import MyInfo from './components/MyInfo';

ReactDOM.render(<MyInfo />, document.getElementById('root'));

#8. Our output should still look like this.

#End

Hope you enjoyed this! :) Follow me for more contents...

Get in Touch:
www.ifeanyiomeata.com
contact@ifeanyiomeata.com

Youtube: https://www.youtube.com/c/IfeanyiOmeata
Linkedin: https://www.linkedin.com/in/omeatai/
Twitter: https://twitter.com/iomeata
Github: https://github.com/omeatai/
Stackoverflow: https://stackoverflow.com/users/2689166/omeatai
Hashnode: https://hashnode.com/@omeatai
Medium: https://medium.com/@omeatai
© 2021