6

I have a design of the website which contains javascript without any framework. Now I'm in the development process and I need to use javascript framework like react for a specific process. so, will it work or I need to transform everything into a framework? I'm working with Laravel and how can I make multiple react app for a single website inside Laravel framework?

4 Answers 4

1

Yes. This is exactly the problem that Facebook aimed to solve by creating React. They initially only used React for parts of the comment system and their chat.

You can create a React component and use it in only part of your website. You just need to provide it a place for it to mount. That is, a div where you are mounting your application.

Check the documentation for React DOM and the integration guide for more information about rendering to the DOM. The basic idea is to create your component then use the following code to render it:

ReactDOM.render(element, container[, callback])

Sign up to request clarification or add additional context in comments.

2 Comments

hey, thanks for help... I have successfully make it work. but the html inside react component is not using css from laravel public. Can you help me make it work. CSS is done by another person and I want each component to use same CSS from public folder of laravel.
I would recommend making a new question instead of asking a second question in the comments. You'll get more exposure and it will increase the value for other readers finding your question through google. Have a great day @sushanshrestha!
1

From the React docs:

React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React.

To integrate React with other libraries or frameworks, check out the React integration guide: https://reactjs.org/docs/integrating-with-other-libraries.html

1 Comment

hey, thanks for help... I have successfully make it work. but the html inside react component is not using css from laravel public. Can you help me make it work. CSS is done by another person and I want each component to use same CSS from public folder of laravel.
1

Yes you can create global window renderer functions from react library and call it from vanilla js or some other third party library like jquery .You just need to include the minified js to call that function.

Some thing like below on react

const app = (parameter1,parameter2) => (
          <YourComponent parameter1={parameter1} parameter2={parameter2}/>
);





window.renderYourComponent = function (p1, p2) {
    render(app(p1,p2), document.getElementById('your_div'));
}

On your vanilla js

 <script type="text/javascript" src="your_minified_react.js"></script>
 <div id='your_div'></div> 
 window.renderYourComponent("p1","p2");

Everything will be rendered inside 'your_div' and you can work separately on react

1 Comment

hey, thanks for help... I have successfully make it work. but the html inside react component is not using css from laravel public. Can you help me make it work. CSS is done by another person and I want each component to use same CSS from public folder of laravel.
0

Yes, You can make multiple React apps for a single website inside the Laravel framework. The Laravel often uses a blade template for frontend UI. What you need to do is build the React app and integrate the built React app with the Laravel blade. You can copy the whole built contents of the React app into the Laravel home blade, for example. In addition, inside React to import custom Javascript files, you can use several ways like script tags and also webpack copy module.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.