I want to have a create a sidebar component using React.js with links to different react applications. I know how to create an unordered list of links. Issue is how does one provide a link to a react application and when the link is clicked it dynamically puts that specific react application onto the screen?
You can use React Router to render different components when users click on different links. These components can represent entire sub-apps if you need them to.
Related
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.
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'm struggling with determining the best route to integrate various components of a single React app on a page within my traditional website. I've worked with React a bit, but they have always been self-contained pieces of content (meaning it fits nicely in one div in the HTML). But now I have a page where I need to sprinkle React into different sections. And each React piece will share various data.
See the attached image. Dark green sections will be React. The rest is a traditional PHP page pulling in content from a CMS.
I'm trying to figure out the best strategy for the React portion.
Should I have multiple renders each going to an appropriate div?
ReactDOM.render(<Section2 />, document.getElementById("react-app-div1"));
ReactDOM.render(<Section1 />, document.getElementById("react-app-div2"));
Since the React elements will all be sharing similar info, am I looking at Redux or Context API to manage that information?
Or is there a better way?
Is this antithetical to React, and I should just get all the markup into the React app itself?
I hope this question makes sense.
image of sample layout
I developed a React component representing a window that allows the user to interact with a chatbot. This window opens when the user clicks a button. Now, I want to make this button available in any site or application of my choice. The first idea that came to mind is to associate a URL to this button so I can call it in our site or application by simply creating a link like:
Chat with the robot .
I find the idea functional but I do not know how to associate a URL to a component in React. I looked at the React-Router side of what I understood it just allows to create the navigation between component of the same application but I do not know if its URL can be accessible outside the application where they are created.
Do you know any tips for solving such problems?
And if you have ideas other than linking the URL to the component, I'm interested.
Thank you in advance !!!
You cannot use a react component by pulling it in as external code. react-router works by wrapping you application. Any component you want to use has to be part of the actual codebase.
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/