While i can understand you can build React components like button, list ...
some ppl suggests to create page component as well.
This confuses me, since to me page is on top of these UI components (button, list, ...), it uses these components.
So what's the advantage to make page itself as an component ?
Related
I'm working with a Chrome extension and embedding UI component on a user's site.
I wrote React component with Typescript (.tsx files)
The thing is, when I'm trying to embed the react component inside the site, the component just wont function - drop-downs wont open, buttons click wont do anything, components wont re-render on state change, etc... sometimes the components even lose all of it styles, like the css doesn't exist.
The only thing I could notice is that I'm embedding the components inside an iframe, idk if it has something to do with that or not - but if i put them outside the iframe - all works perfectly.
Im using render function to render the component on the site:
const element = ReactDOM.createRoot(#selector to create root#);
element.render(<MyComponent prop1="prop1" prop2="prop2"></MyComponent>);
Anyone had any experience with the type of issue?
Thanks!
As I mentioned - I already tried to embed the component outside an iframe and it worked
I'm using the react-to-print library but asking more generally - if I have a sidebar React component that I want to be printed on every page, is this possible? Kind of like a header/footer but a React component instead, that doesn't necessarily appear on the top or bottom of the page
I have an web application in React which have multiple react components used to render different views. For the particular use-case, the back-end vends out an action to UI layer, and for this particular action, the view has to be shown on modal.
The modal has multiple buttons in it on click of which, we have to map to existing react component inside this modal only.
So basically, until unless someone closes the modal, all the further screens on the click on buttons in this should be shown inside the modal.
Application uses React, Redux and Epics. Different URLs are not enabled for the component. I'm relatively new to the react, so don't completely understand the routing concepts.
Question:
How can I model this in a way which provides best user experience, is maintainable and allows me to re-use the existing components.
Approaches I have thought:
Create separate components for each existing one, which wraps the existing component around Modal. For e.g. I have component A, so I create another component AModal, which internally refers to A inside tags.
On each click of button inside original modal, I'll close this background modal and open the corresponding modal component, in the example above AModal.
Concerns: This will lead to hazy experience, as closing and opening of modals will be visible. Also depending upon the modal sizes for each individual components, experience might be even more degraded.
Create WflowContainerComponent which uses all of the original components inside it. So the modal and height/width is defined by the outer component and the view inside it changes as per the requirement and react/redux states.
Concerns: With every added functionality (i.e. button click on original WflowContainerComponent) have to include each individual component in it. And if each of the individual component requires certain inputs from the state, then the props list of WflowContainerComponent will keep on extending beyond control.
Is there a better way wherein, I can just let react know that render each of the next component on the modal only.
I don't know that this might be helpful or not. But what you can do, If all the existing components are connected to redux, Then you can create a Modal Container and pass the other components as children (with props) and remove the animation CSS Just for this component only, So it does not show like glitching.
I am going around React.js and my question is simple: does my app have to be a single page app if I use React?
If no then how do I control components outside of them? By FLUX? Any other standard methods?
If yes then are there any libraries to perform permissions/access validation on the client side for React?
Thanks a lot!
A react application need not be a single page application. React provides you with a way model HTML in terms of classes with specific render logic, but doesn't impose any sort of specific application logic like single vs multi page.
I'm not quite sure I understand the rest of your questions, but I think you are essentially asking how to model a react application as a multi page app. There are many ways, however, one would be to structure your files like so:
./app --> main page for your app
./app/page1/ --> page 1 of your app
./app/page2/ --> page 2 of your app
...
In this way, each 'page' would contain a self contained react project. Your main application page could contain hyperlinks that load these pages, or you could load them asynchronously in your javascript code.
EDIT: The question as clarified in the comment is how does one make a react component change due to some action on the page:
Say react component B is contained within react component A. A user presses button B which is contained in react component B, and when pressed, invokes callback B in react component B, and this click should trigger some action in react component A. callback B should somehow notify react component A that things have changed.
This is where you have some choice about what to do. You could have react component B emit a change that react component A listens for (and re-renders accordingly), or you could use the FLUX model. In the FLUX model, react component B would emit a state change to some state store, which would trigger an event to be emitted. react component A will have needed to set an event callback for this event, and when react component B emits it, react component A can react to it.
I am new to ReactJs and I am not sure where and how should I define Layout for components. Specifically I want my SideBar Header and Footer remain sticky and using react-router-dom I want to mount rest of the components at appropriate places whenever needed (click on sidebar item)? So should I render multiple components together or there is a another way to first define the layout and then render components at predefined places ?
For dynamic components, use css to lay them out on different pages and render them at once by calling them under render of that main big component. This would make could modular and non-redundant too.
Refer this github , I found it good for referral.
https://github.com/airbnb/react-sketchapp
For the quick layouts you can use bootstrap templates. ( This can help you get started)
https://getbootstrap.com/docs/4.0/examples/