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

Question

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.

Answer 1

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.

Answer 2

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.