The best way to pass data from vanilla Javascript to React? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am integrating some react+redux code into a website that is made completely in vanilla JS(with some JQuery), CSS, and HTML. The plan is to integrate the entire website into React, but won’t be complete for awhile and for right now the best plan is to integrate the required react code into the current stack. This would be easy if both the react code and the vanilla JS code didn’t have to communicate with each other, but that unfortunately isn’t the case. In particular, I need to be able to pass some of the data from all the vanilla JS already written into particular React components. I am having trouble in deciding the best way to do this. I found this great article which explains how to do this with a publisher/subscriber method, linked here:
http://www.primaryobjects.com/2017/05/08/integrating-react-with-an-existing-jquery-web-application/
This way seems fine, but it is a little convoluted for my use case and will require some significant code refactoring in order to implement properly. Is there an alternative way to accomplish my goal?
NOTE: The React code uses JSX and not JS.

The best way I can think of is a global state management like redux where you can store the data. Subscribe the react components, and the vanilla JS modules to the store which will enable data to be shared across both.

Related

What is the best way to load html as components? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am currently working on a multiple pages website. I find it foolish to have to go into every html file to make simple changes to the header and footer. I am thinking about jquery load method but I hate using it. How should I go about doing this without without jquery.
Like the other comments have said, there are multiple ways to do this.
As pointed out by User Daniel Chung, a good choice for this situation is using a website framework. I personally use Laravel Blade as it's a well-documented framework and is great for beginners. Laravel uses PHP and handles the backend. However, it includes Blade which uses html to do the frontend, this way you could use #extends('template') in your blade file, allowing you to pull in data from other blade(html) documents. More info here.
You could also use frontend frameworks like Vue.js or Next.js.
If you don't want to worry about frameworks, there are other ways to solve this problem. As user ikiK mentioned, using PHP includes allows you to perform just this. This link from W3Schools is very useful and the first example they provide is basically exactly what you want.
I would recommend trying out some of the frameworks if you are building a complex website but if you need a simple fix, the PHP includes is the way to go.

Is it possible to covert an entire application developed using php,javascript,html to angular 7? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have developed an application using javascript,php,html with a lot of ajax calls . I was planning to convert this entire application to angular 7. Is it possible to do this without re-doing the entire application from scratch in angular ?
If this is possible,could you please tell me how to get started with this?
Thank you
No. It's always better to rewrite the entire application. But the effort you put to that will be worth it. You can start by creating a new angular application and adding your code module by module
It is a manual process and you would have to re-do it from scratch.
There are many examples online: Here is one
As Angular is a complete framework and not just a library, it has it's very own concepts. So even if you might be able to "squeeze" some of your javascript code into the angular application, it wouldn't be a clean solution.
One example would be how you access DOM elements in javascript and angular: the javascript approach with getElementById() etc. works, but it's not the way recommended by angular. (Example: document.getElementById replacement in angular4 / typescript?)
So like other answers already suggest, a mostly automatic conversion is not possible. But you can still transform your existing concept and ideas of you current app to a new angular app.

Why we need React if jQuery is doing all things already [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
What are main differences between ReactJS and jQuery? All the things are already can be done by jQuery itself then why we need React?
I searched in google and still am not clear about it.
Mostly it explains about the benefits in terms of "views", "components, "state", etc -- concepts that are unfamiliar for someone like myself who has only a superficial understanding of frameworks.
And where we have to use the React? Even for a small application (basic CRUP operation with some validation) we can use or it's really needed for a large application?
jQuery is a JavaScript library that simplifies HTML DOM tree manipulation, event handling, animation, and Ajax.
React allows you to update and render specific components when your data changes, which is great for development of single-page or mobile applications.
React is great for creating reusable sections of UI code, and layering them on top of each other so that you don't need to re-render the DOM as often. I have heard many people say that the more you need to update your DOM, the more you should lean towards React because it is built to treat your application's elements independently, which can make UI/UX seem a lot smoother. jQuery provides independent functions to your code to perform tasks, so it is great for making minor changes to the DOM, without having to restructure your whole UI.

Similar and simplified examples (newbie questions) [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm currently studying about web development, I still don't know about jquery, but I've a little knowledge about javascript, html and css (basic).
I've been looking at some examples in github to improve my skills, and I've found this content;
https://github.com/stewilondanga/editables
I perfectly understand the theory, but I do not know how to put it into practice, I would like for any similar examples (simplified alternatives) and how to convert the exported code generated by javascript into a html5 table?
Any example would be appreciated! thanks for your attention!
First of all, jQuery does not generate code. It's a framework, you load it into a web page, and then you can use it from within Javascript code in that page.
I suggest you start by looking at the source of https://stewilondanga.github.io/editables/, if an editable tables is what you need. There are more general frameworks to do this, e.g. Aloha
To try it yourself, I'd suggest you bite the bullet equip yourself with some kind of web server, be it on a server somewhere, or on your local machine, so you can easily try out things like this, copy the sources, alter the code etc.., and quickly hit reload on your browser.
While it may seem easier to run a local server and point your browser at http://localhost/something, IMHO it also takes more tinkering to get browsers to embrace that fully. You don't need the extra grief while already learning all those new concepts. If you want to tackle this seriously, consider getting a hosting service or small VPS somewhere. If you don't know how to do that, get help for that first, but get it out of the way. It'll save you much grief.

What are the main differences between AngularJS and ReactJS [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need to create a web site which will be converted to a mobile application (What I want to build is more suited to be a web site than an application so the building itself should be as a website).
Since I'm more familiar with the desktop and Android native dev world, I got very little knowledge of web client side development. After reading a little I've decided to use these technologies for the client side: HTML5, CSS3, Bootstrap, React.js
The problem is that I've read that Angular is actually a full MVC framework while React has some more specific roles and it's like comparing a car (Angular) to an engine (React). I have already seen comparisons regarding how to do some actions with both technologies like hello world and event handling and stuff like that so I don't need to know how to specific things like what they show in some comparison websites.
So my question is what is the difference between what I can accomplish with Angular compared to React? If I use React, are there going to be things I wouldn't be able to do? When should I use one over the other? If I use React, will I still be able to build a fully operational client side?
I would like to emphasize I don't want a personal opinion. I just want the facts regarding client development and to know what I can and can't do with them.
AngularJS is a full framework like you said, which is designed to write single page applications (SPA) using the MVC design.
On the other hand, ReactJS is consider to be for the development of the View only, or in other words, UI components.
In my opinion Angular is rather complex to learn while React is relatively a small library, but React is faster for its virtual DOM (It doesn't manipulate the DOM directly unless needed).
Also react can be used with other libraries for things like routing while angular already have it.
I think you can build the same website using both techologies, even though React is for UI, it still can have logic and big websites are built with it (Instagram and Facebook for example).
I think the main difference between Angular and React is the fact that Angular is using 2 way data binding, while React is using one way. Maybe this article will make the things clearer for you: https://www.airpair.com/angularjs/posts/angular-vs-react-the-tie-breaker
p.s. I really don't understand why this question is downvoted...

Categories

Resources