Can I call react component in a react component - reactjs

Question

I'm just start learning react js. Just wondering is it a good way to invoke a component inside another component?

Answer 1

Most React projects will start out by giving you an App.js component where you can start writing code. There, you can invoke other components using JSX syntax. Like this:
function App() {
return (
<div>
<Header />
<Main />
<Footer />
</div>
)
}
Working example below:
// Main application component
function App() {
return (
<div>
<Header />
<Main />
<Footer />
</div>
)
}
// Header component
function Header() {
return (
<header>
<h1>My first React App</h1>
</header>
)
}
// Main component
function Main() {
return (
<main>
<p>Stuff and stuff go here..</p>
</main>
)
}
// Footer component
function Footer() {
return (
<footer>
<p>Copyright 2020</p>
</footer>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Note: You may also see class components instead of functional ones. They look something like this:
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
// some state goes here..
}
}
render() {
return (
<div>
<Header />
<Main />
<Footer />
</div>
)
}
}

Answer 2

You generally want to compose components using JSX. There is a good write up on the react docs. https://reactjs.org/docs/composition-vs-inheritance.html
const ComponentOne = () => <div>hi</div>
const ComponentTwo = () => <div>two</div>
const ComponentThree = () => (
<>
<ComponentOne />
<ComponentTwo />
</>
)

Answer 3

In the case that you want to learn, or start to le I recommend this https://reactjs.org/docs/getting-started.html. If you have another question please let me know.

Answer 4

React has two type of components: Function based and Class based. I will explain Function based components.
Example:
import React, {Fragment} from 'react';
function ComponentB(){
return (
<p>Hello i'm component B</p>
)
};//end;
function ComponentA(){
return (
<Fragment>
<h1>hello i'm component A</h1>
<ComponentB />
</Fragment>
)
};//end;
export default ComponentA;