Question for the React Gods, regarding creating and structuring the components

Hello, there I am new to React as I have only played around codesandbox.io and I am making and cloning my first React app after I create my app with Create React App.

npx create-react-app my-app
cd my-app
npm start

So I have a question for the React Gods, regarding creating and structuring the components based on what I need to do:

For example for each section component I would create a separate function like this:

function App() {
	return (
		<div className='App'>
			
		</div>
	);
}

export default App;

The problem is that while this function component is working fine when I add other function components like this:

function Main() {
	return (
		<div className='Main'>
			
		</div>
	);
}


And

function Secondary() {
	return (
		<div className='Secondary'>
			
		</div>
	);
}

export App;
export Main;
export Secondary;

It does not work and React throws an error message saying:

I do not quite get it, is this the right way to create React, export and render React components?

I am basically trying to re-create and render this news app here:

Hi there @camperextraordinaire, at the moment I am working locally via create-react-app

Maybe this screenshot can help?!

I have tried in many different ways, each one at the bottom of the function/components and all three at the bottom all together. I also looked at the Stack Overflow for help https://stackoverflow.com/questions/46039976/exporting-multiple-modules-in-react-js/46040368

@camperextraordinaire is the way I am doing trying to create/make multiples React component right declaring a function?

function App() {
	return (
		<div className='App'>
			
		</div>
	);
}

export default App;

Or I need to create it another way? Say for instance:

class App extends React.Component {
   render() {
      return (
         <div>
            
         </div>
      )
   }
}

So there are a number of different ways to export. For instance instead of having your exports at the bottom of the file you could just place export before each function

export function App() {
	return (
		<div className='App'>
			
		</div>
	);
}

then import it like this

import { App } from './App'

Generally, you’ll only have one component per file.

another way is to export default which is in your first code snippet.

This part though.

I believe would look more like

export { App, Main, Secondary } 

if you have to export multiple things from the same file and did it last.

1 Like

Hi there and thank you @jnmorse,

I see, so there is no right or wrong the way to export/render components…

I am trying to export everything from the same file for the time being, unless it is really not recommended doing so…

And I have tried both ways:

export App;
export Main;
export Secondary;
export { App, Main, Secondary } 

But still, the same error message appears.

1 Like

Thanks @jnmorse I will have a look at it. I have been busy doing one of those job challenges, which I actually succeeded!