What's the difference between React App and React Component

Question

We will be doing our first project using React. It will not be a Single Page App, but a Multiple Page App.

What I'm trying to figure out at the moment is : what's the difference between a component and an app. If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?

Thanks for the information you can bring !

THoma

• SakoBu: Not an appropriate question for SO... You need to find a basic tutorial for react... No shortage online...

Answer 1

There is no special object called "React App". React Components build an "React App" by coming together.

But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.

You don't need redux for state management in React Components.

I hope the answers have helped.

• Thoma Biguères: Ok, I understand, so I'll have Parent components that I will call App but in the end it's just a component. And is it possible to have two Parent Components, so I guess we can say two roots ? in one file ?
• Metehan Senol: No, you need one root component to render it in your index.html file at the end of the day. If you create a new app by using npx create-react-app tool you will see. Look at the ReactDOM.render(...) method, you should pass your root component to it.
• Metehan Senol: And yes true, App is just a root component in the end.

Answer 2

Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.

You can also look at the React Context APIs as an alternate to Redux.

Answer 3

An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.

If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.

You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data. Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.

If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).

• Thoma Biguères: Hey I would love to do an SPA, but we have some constraint with a pre-existing frameworks that has a lot of components built in GWT for front end and Java for backend. The goal is to slowly start to remove GWT components, as it would be to much time to use to do a 100% SPA directly ! Thanks for the answer