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?
Related
So i read somewhere about exposing a React component on the server which makes it importable to a different application, However im unable to find where i read this and cannot locate anything that would help me with this query.
So lets say i have several microservice applications they all essentially share the same Navbar component, my Goal would be to have the component in a central place that can be edited and updated and that would update all other components in other react applications, it would help with maintaining the code.
but in all actuality im not even sure this is possible. considering react components are built into the build folder any structural changes wouldnt be noticeable without rebuilding. But i know i read somewhere about this.
I'm a bit new to React.
My company is starting to build a product than needs to be customized by any client.
Is it possible to create a component (let's call it plugin) and deploy it into a folder in a production environment and that component being rendered without recompiling the entire app?
e.g.: I have a form and i need another form calling a client's API that renders some info and then pass that info to the main app form. That 2nd form should be this kind of plugin, due to the fact that it depends on the clients' APIs for the component to render a table, a chart, or whatever the component itself renders.
I've been googling and i haven't found a solution yet.
Thank you all :D
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).
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.
I've created a react redux project, now how do I add some SEO functionalities to project? I do not want to waste much time while refactoring codes.
You need to setup the redux store on the server and pass its initial state down to the client, so that the server-render and initial client render don't differ
Not all life cycle functions are called on the serverside, mainly componentDidMount is not called. This indeed helps if you want to do some AJAX data fetching (which you only want to do on the client).
If you are using react-router you need to setup the serverside route matching
Here are some more details: React can be used on server side rendering. What does that mean?