Do I need to put a text in App.tsx or do I have to create a separate file?

by

I have a question for a React file (I’ve just started).

Do I have to put text in App.tsx for example:
<h1>Hello World!</h1>,
or do I have to create a separate file like Text.tsx and import it into App.tsx?

Thanks for your help!

I’ve looked everywhere on the Internet, but I haven’t found a site that talks about this subject.

  • You can put <h1>Hello World!</h1> directly into the App.tsx (assuming you mean inside of your App component), you can also create a separate file with a Text component that returns the hello world heading, but it’s not required (so either works). I’d suggest you have a play around with it and see what works and what doesn’t so you can find out these sorts of things for yourself.

    – 




  • You can do both. That’s a major reason to use React. Do decide what’s best is up to you. The goal should be to get small, simple, maintainable components that do one thing and one thing only.

    – 




In my opinion, it’s best to add your text in index.tsx or .jsx. In any case, it’s important to know that later on, your app.tsx won’t receive text, but rather libraries to assist you in working or retrieving information about your project. I’m currently thinking about Redux or React Router. Personally, I never touch app.tsx because I use _document.tsx for Next.js (https://nextjs.org/docs/pages/building-your-application/routing/custom-document). Alternatively, for vanilla React, I suggest you take a look at this link: https://blog.floxus.co/best-practice-to-manage-folder-structure-for-reactjs.

So, in conclusion, for an example or testing, you can put the information in app.tsx, but in the future, for larger projects, I think that won’t work.

It’s completey up to you how you want to split out your App into various components. You can achieve the same result by doing either of your suggestions.

I would recommend reading up on the React docs about components. You never have to create Components for different elements, but during your learning you’ll understand what works for you and the App you’re creating.

Leave a Comment