I am building a wizard based on React, Redux and React Router V4.
When the widget get mounted, I fetch questions from an API. All these questions should be one step in the wizard. I never know, how much steps the wizard will have.
At the beginning is a welcome-step and at the end the user sees a thank-you website.
Building a wizard with a fixed number of steps would be easy. I am sure building the wizard with dynamic number of steps is easy too, when you know how to.
Where should I put the logic to A) get the next/previous step/route and B) navigate to it?
You could make a container component for your wizard and have it render step components based on props.
The logic would go in a separate file which would be imported into the container.
I would recommend using either redux-form or some other alternative to manage your form state in this scenario.
Related
I need to create a popup message component which gets user feedback. Is there any way for me to develop a component like this (some type of dialog/modal probably) without making a new page to test it on?
Like, is there any way for me to develop this individual popup message, or other small components, in isolation, and then later attach them to a larger page component?
Sure you could use an online editor like codesandbox
Or you could use a dedicated create react app for testing / developing a component alone
You can just make the popup component, and add it into your App.js to see if it works as far as working on local workspace goes. you can also try some sort of virtual code editor like codepen, stackblitz, codesandbox, etc, then copy the code over into your workspace.
I am currently storing an object containing many React components and would like to display them all in some sort of gallery format.
I tried rendering the component directly in the gallery itself, but it was too slow and caused too many DOM issues.
Similar to how Google Drive displays a preview of each doc, what is the best and fastest way to generate a visual snapshot of each component in React?
You can check Storybook, it's an open-source tool for developing UI components in isolation for React and other libraries and there is a lot of useful add ons which will help you during work process.
I have tried this for myself you can check it here react-ui
If you want to have some page with a list of all components, you can create one story where you can show a list of all stories which you have in your project.
Say you have a project split up over two repo's: main and account.
From the main repo I install the account repo as a dependency and import the account components.
When I create a Redux store in the main part of the app, how does one go about passing that store to the account components? My idea is to connect a container component in the main part and pass all state/actions needed in a single object. Then in the account part I'll create a Redux context feeding this object to all components that need it.
This will work, but it feels like I'm reproducing the Provider/connect functionality from the 'react-redux' package. However, I can't connect in the account part directly since the Provider is located in the main part. Can anyone think of a more elegant solution?
Read this article: https://redux.js.org/recipes/isolating-redux-sub-apps/ . Basically you can create multiple providers and separate your application so that each part has its own redux tree.
If you need to nest them then in v6 you could do something like this: https://react-redux.js.org/using-react-redux/accessing-store#multiple-stores , don't know if that is the case with redux v7 since it doesn't use context anymore.
Definition of our requested Dynamic App
We Have to make an app with Dynamic Layout.
Our marketing team needs to change layout of page. for example ordering the components or maybe add new route to react app or maybe add or remove some component from some page.
Technologies that we are using
We are using typescript as our base language of create-react-app and redux for state management.
My Solution
My Solution for this is to generate .TSX file in server on changes come from a panel and build entire project with new files created by server.
I prefer to not use dynamic import, because user must waits for a api to get the page layout structure then client must import the components and after that every component request it's desired api call from server! Too much time waist!!
Your Idea
What do you think about this structure?
Is there any bottle neck that I may encounter? or maybe i didn't saw?
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
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.
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.
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).