DEV Community: SteerClear90

Using vendor chunk file from another application

SteerClear90 — Tue, 15 Mar 2022 19:34:29 +0000

There is a react project where the vendor and app code are split into separate files upon build.
Can I load this app code js file in another react project (say Project B) using only the Project B's vendor code and not using the vendor file which was generated during the creation of the app code file?
If it is possible I want to understand how the webpack configuration would be like.

Note: I cannot build both project A and project B together in order to get a shared vendor file.

ReactJS widget on JSP page containing an other React application

SteerClear90 — Wed, 28 Jul 2021 17:47:47 +0000

There is a JSP page on which we have a react application loading on a div element at present. I want to build an independent widget with React (kind of a chatbot) and add it to the same JSP. However, I do not want the react libraries of the existing app and widget to interfere each other. They might be of using different versions of react as well. Is there any way to embed entire react library and css with the widget bundle?

How to make http call onclick using stateless component in ReactJS?

SteerClear90 — Thu, 25 Jul 2019 15:13:48 +0000

I have a React stateless function component (SFC). I want a user to click a button and onclick a http call will be made from the SFC and when the response is received, I want to open a modal. Is it something achievable using SFC? Or do I need to keep a stateful component?

This is my code which makes the http call on load and then onClick opens the modal. But I want both the things to happen in sequence on the onClick event.


function httpListCall(url) {
    const [list, setData] = React.useState(null);
    const [error, setError] = React.useState(null);
    React.useEffect(() => {
        axios
            .get(url)
            .then(function (response) {
                setData(response.data.ResultList);
            })
            .catch(function (error) {
                setError(error);
            })
    }, []);
    return { list, error };
};


const ListContainer = () => {
    const { list, error } = httpListCall("/list.json"); //THIS IS ON LOAD NOW - I WANT TO CALL IT onClick
    const [modalShow, setModalShow] = React.useState(false);

return(
    <React.Fragment>
        <div>
           <button onClick={() => setModalShow(true)}/> //WANT TO MAKE API CALL HERE AND THEN OPEN THE MODAL
        </div>
        <ModalWidget show={modalShow} list={advisorList} error={error} onHide={() => setModalShow(false)}/>
    </React.Fragment>
)

}


export default ListContainer;
ReactDOM.render(<FindAdvisorContainer />, document.getElementById("app"));

I have tried to make the http call from a function but it gives me an error: "Invalid hook call. Hooks can only be called inside of the body of a function component."

How can a react app be rendered in different non react webpages?

SteerClear90 — Thu, 27 Jun 2019 15:51:44 +0000

I have a react app that does not include redux. The react app only has a small chatbox window that opens up in a modal. I want to render this react app in a few non-react websites some of which use normal js and some use jQuery. How can it be included?

My application is using webpack and babel. I am not using redux.

I am new to React and newer to this community. Thanks for helping!