fbclh
July 12, 2019, 2:36pm
1
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:
fbclh
July 12, 2019, 4:33pm
4
Hi there @camperextraordinaire , at the moment I am working locally via create-react-app
Maybe this screenshot can help?!
fbclh
July 12, 2019, 4:34pm
5
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
fbclh
July 12, 2019, 6:38pm
7
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.
fbclh
July 13, 2019, 10:14pm
9
Thanks @jnmorse I will have a look at it. I have been busy doing one of those job challenges, which I actually succeeded!