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.
Related
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
react-tabulator is a library providing an integration of Tabulator in React. Their solution to render a React component within a Tabulator formater uses this function. However, I don't think this is 100% correct, because based on the React doc on integrating React w/ plain JS, ReactDOM.unmountComponentAtNode() needs to be called on dispose in order to to some cleanup. I also communicated this to the author within a GitHub issue, and maybe he'll provide additional info.
My question: is there a hook/handler/way to receive notifications when a cell is being disposed? 1) This will allow me to call the mentioned method, so that React can do some cleanup. 2) This opens also the path towards an alternative approach, leveraging React portals.
Thank you in advance!
I have created an implementation using portals in this gist. It's a Storybook pages. I'm using semantic-ui-react in my project, so a copy/paste of the file may need adapting.
I don't know if it's OK to have thousands of portals. I.e. one per cell. Also, I didn't see any action do "dispose" a portal. I hope that disposing the DOM element where the portal was rendered suffices. Otherwise => memory leaks possible I think.
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 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 using React-Redux-Form and React-Bootstrap on client side of application.
I'm stuck on how to testing my components. I have made a small project on github with one of my components named LoginModal:
https://github.com/DmitryIvanovIAMM/react-redux-form-login-test/blob/master/src/tests/Foo-test.js.
To start testing, I am following this tutorial https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8.
But when I try to .find() button in my rendered component, the result is an array of length zero. So I can't simulate its behaviour. I try find it (button) several different way but unsuccessful. Please, your suggestion.
This issue is with the rendering of Modal component that is part of #react-bootstrap. There is a discussion about it on https://github.com/react-bootstrap/react-bootstrap/issues/876.
The alternative is to use ReactModal from react-modal. Testing it is described on http://remarkablemark.org/blog/2017/05/17/testing-react-modal/