Home » React JS

How to merge React JS components in a component?

In this article, we are going to learn how to merge React JS components or adding a component in a component?
Submitted by Godwill Tetah, on November 18, 2019

JSX will help us fulfill this purpose. If you are completely new in React JS, I suggest reviewing some recent articles that will be of help too.

Just like many developers always say, React JS is all about components. You should have a basic knowledge of React JS components.

When learning React JS for the first time, people always put all their components into one file. But as your React JS app becomes more and more complex, there is a need to create components as different JavaScript files which helps our code look simpler to understand.

We are going to create a short biography un-styled web page with 3 components.

Open the index file in the "./src" folder of your pre-configured generated react js app project.

Let it look like this,

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

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

As you can see above, the code renders the App component in the root node.

We are now going to create the App component in the App.js file.

We will then create our 3 components in 3 separate files and finally render them in the App.js.

In the "./src" folder, create the following JavaScript files.

Info.js:

import React from "react"
class Info extends React.Component {
  render (){
    return (

           <h1> hey </h1>
      )    
  }
}

export default Info

Academics.js:

import React from "react" class Academics extends React.Component { 
render () { 
return (
<div>
    <table border="1">
        <tr>
            <th>SCHOOL </th>
            <th>YEAR </th>
            <th>DEGREE </th>
        </tr>
        <tr>
            <td> Havard University </td>
            <td> 2015 </td>
            <td> MASTERS </td>
        </tr>
        <tr>
            <td> University of Buea </td>
            <td> 2019</td>
            <td> PHD </td>

        </tr>
    </table>
</div>
) 
} 
} 
export default Academics

Conclusion.js:

import React from "react"

class Conclusion extends React.Component {
	render (){
		return (
			<p> My Concusion </p>
			)
	}
}

export default Conclusion

Finally, it's time to add our App.js file and add all the above components into the App component.

import React from "react" 
import Info from "./Info" 
import Academics from "./Academics" 
import Conclusion from "./Conclusion" 
class App extends React.Component { 
render (){ 
return (
<div>
    <center>

        <Info />
        <Academics />
        <Conclusion />

    </center>
</div>
) 
} 
} 
export default App

To add or merge components from different files, we first of all import those components into the main component using the syntax,

    Import classname from "./fileurl "

The class name is equally the component's name.

Lastly, use the syntax < ... /> with the component names as seen above to add the components.

Run your app using the command npm start on a command line terminal and open localhost:3000 on your browser.

Thanks for coding with me! See you @ the next article. Feel free to drop a comment or question.