I am trying to refactor an application built with js/html/css into a react app. I have moved the front-end html into react components but am having trouble with the js/jquery that controls the actual functionality of the app. What would be a good approach to integrate the old js and jquery into the new application without having to rewrite everything?
You pretty much have to rewrite, I'm afraid - I've been in this exact position before.
The problem you have is that jQuery is about manipulating the DOM directly - the user clicks a button, and then you make some change to the DOM to reflect the new state of the app.
React works very differently - you tell it how to turn internal application into DOM, and it works out how to manipulate the DOM for you. So when the user clicks a button, you update an internally managed state object, and then React handles the DOM changes because it knows how internal state relates to DOM.
They're two completely different ways of writing an app. A good approach:
Break down the existing app into components (buttons, forms, widgets, navigations bars)
Try to figure out which components "talk to" each other and create a hierarchy
Use a library like Redux to manage the internal state rather than using React component state
Good luck!
You CAN use jQuery in React (so long as the component is mounted), but I highly recommend just rewriting it from scratch. I have worked for teams that have loads of jquery mixed in with their React components mainly because they were comfortable with jQuery but apprehensive about React and it just turned into a nightmare.
Follow Duncan's advice about breaking down your app into components, then just write them in React.
Related
I started the project when I had no experience in React.js, i used prop drilling for entire project. Now project got complicated as i expected
So i wanna create state management structure but i don't know how to start.
Can i apply to whole project or could I only use it for the next components?
You can easily start using a state management library within parts of your app without needing to refactor the whole app immediately. This way, you can start using it in new components right away and revisit the older code from time to time and refactor them slowly to clean up prop drilling.
If you are planning to use React Context, you can follow the pattern recommended here: https://kentcdodds.com/blog/how-to-use-react-context-effectively
I also suggest looking into Redux Toolkit as an alternative to React Context: https://redux-toolkit.js.org/tutorials/quick-start
One of our business problem statement is, we have to create component such that any consumer can use them as a widget and embed in their website. And the thing is we already have those component made with ember.
We're not aware that which stack the consumer website going to have, that could be random. So we thought of converting these ember components to web components.
We did small POC where we were not able to create web component out of ember component using glimmer. But we're facing couple of problems
We're not able to pass objects/arrays to web components with glimmer (we tried using pass it through properties)
Somehow shadow DOM is not working when web component gets rendered
For using simple glimmer component I have followed https://glimmerjs.com/guides/using-glimmer-as-web-components
Gist:
Idea
The idea was to create framework agnostic component, so that it can be used inside different applications flawlessly. The component was already written in emberjs.
Solution
Solution is to write web-component for obvious, but we've our code already written in emberjs add-on. So we decided to migrate add-on project to latest ember, after we migrated add-on components to glimmerjs and converted that glimmerjs component to web-component (using #glimmer/web-component) and use it across.
We took an effort, and made it working. I'm sharing the current solution that we've applied.
As we were facing couple of challenges as I mentioned in my question. I'll answer those points one by one.
For passing object between two component, we're passing it by raising CustomEvent from child-component to parent-component
didInsertElement() {
this.element.dispatchEvent(
new CustomEvent('data-ready', { bubbles: true, detail: this })
);
}
After a research found that, glimmer does not support shadow DOM, they don't have any plan for supporting it yet. And re-analysing the requirement once we thought shadow-dom is good to have feature. We're using CSS specificity (traditional way) to isolate CSS specific to component :p
Though after applying above things we're in good shape. If in case you wanted to have a look at the code. Please check this github repository (initial look)
I have found a serious flaw I think in ReactJS. Although I admit this flaw perhaps might be a flaw in my understanding :) I am trying to build a simple Todo application (using TodoMVC), and when you try to use something like Redux for state managment, you run into very, very hairy issues when trying to process nested JSON, i.e. a database response that typically would include a parent node ("projects"> and then child nodes "todos") related to the parent.
Redux seems to want you to "normalize" the data from the response so it's immuatable. Not to upset anyone, but this seems like the most ridiculous thing in the universe. So, we build a SPA app to process json responses from our data....and then...oh wait, we have to build an ORM on the client to munge all that data into a different format to process it.
If this is the state (sorry no pun intended), of React, Redux and the like, Javascript frameworks should be abandoned. I built something in Rails in like 20 minutes. Of course it's not a SPA, but it was simple to create this MVC structure... not only does it seem extremely difficult, hairy and overly complicated in React, when Redux is added, it gets into the area of absurdity. Perhaps that is why we only see very very simple tutorials with all these tools.... building huge apps with them isn't possible.
So basically, in just trying to code a simple few lines of this example above with react and redux, I was lead to this:
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
Can someone prove me wrong? PLEASE. Just a simple codepen showing me you can have a parent "project" component, which you can add "todos" to as children and the ability to make MULTIPLE parent components, with MULTIPLE children without going down the rabbit hole above.
This is a serious flaw in my opinion if this is true. A showstopper.
Your question and understanding are wrong in a few ways.
For context, I'm a Redux maintainer, and I wrote the Redux "Normalizing State Shape" docs page you linked to.
First, you don't need to use Redux if you're using React. In fact, we recommend that most beginners should focus on learning React first, and only try learning Redux once they're comfortable with React.
Second, Redux is independent of React, although they're commonly used together. You can use Redux by itself, or with any UI framework (React, Angular, Vue, Ember, jQuery, vanilla JS, etc).
Third, normalizing is a recommended pattern, but it's not required. Per the docs page you linked, normalizing data has several benefits, but it's fine to keep your data nested if that works better for your application.
Fourth, there's many large complex apps that are written with React and Redux, not just todo examples. See the Apps and Examples list in my Redux addons catalog.
Both the React docs and Redux docs have links to many CodePen / CodeSandbox examples that demonstrate how to use them - see the Main Concepts and Tutorial pages in the React docs, and the Examples page in the Redux docs.
Also, the TodoMVC.com site has several React todo list examples you can look at.
I'd suggest that you take the time to go through the tutorials in the React docs. You may be interested in my suggested resources for learning React and learning Redux, as well as the articles and resources listed in my React/Redux links list.
I started learning React and It's really amazing, I enjoy coding with React.
In official doc said that React can be used for UI only.
React is a JavaScript library for creating user interfaces by Facebook
and Instagram. Many people choose to think of React as the V in MVC.
So, Can I use React with Angular.js for UI? Is that a good idea or bad? (why?)
Googling, I found lib called ngReact. It allows use React Components in Angular.
What you think about this? Give me an idea.
Thanks in advance.
I have been using ngReact for an application which is written on angular.
We had to switch the view for some parts of the applications to react because of the constant data changes and is expensive for digest cycles.
angularjs is good to handle the ui for most applications unless you are looking at rendering a lot of data. Even in that case if the data is not changing you can use single binding of angular. If you have data that is constantly changing your view might get slow in angular that is the only downside with existing angular versions.
That being said using ngReact can become tricky at times. Mainly communicating with angular services, basic directives like ui-sref and react nested components.
Be sure of the reason for using ngReact.
using react, angular and even a combination should be more than a personal preference.
Ive recently my self started to learn React. And you are completly right React is just for UI and dosent support any Model / Controlers.
But mixing React & Angular for me seems a bit odd? Angular got its own template engine with their directvies (Angular 1.xx). So it would be a bit akward to match these too frame works.
If i was you i would look into this thing called Redux, witch is another way of doing flux architecture. This is also the architecture that React is initially thought upon. And its really powerful.
Here is a couple of nice to have to get into:
https://egghead.io/series/getting-started-with-redux - This is a free course on Redux (witch you want to use with storing data for you react views)
You can actually interoperate Angular and React really nicely with https://github.com/bcherny/ngimport. My team and I have used it successfully on our 10k file hybrid Angular+React project - let me know if I can answer any questions!
I'm very new to React, just experimenting with it. I'd like to know what are some common patterns, or libraries o built-ins for handling communication among components. For example, I have am input component and a "list" component that updates from the server according to what is in the input controller. Think of an autocomplete box. Since components have presentation logic, What if the two can't be "besides"? They're in different parts of the page and hence two different controllers.
Also, what if I have a login / logout button that works via Ajax? I imagine a lot of different components across the page reacting to the login / logout action reconfiguring themselves accord to a global "logged" state and the data retrieved from the server for the specific user that has logged in.
What is the best way that React "reacts" to those changes? Thanks
You should checkout Flux and Dispatcher.
It's kind of like a pub/sub system but without the problems of a pub/sub system. The advantage is that all events flow in one direction which makes the architecture much simpler and scalable.
If you haven't already, you should checkout Facebook's official React documentation. They have a really thorough tutorial that covers 90% of the scenarios you'll run into, including best practices for component interaction. They're also really good about building from no knowledge on up. Only takes about 20 minutes to go through: https://facebook.github.io/react/tutorial/tutorial.html
As mentioned in another answer, Redux is an amazing library for handling app state and keeping components separate that shouldn't know about each other. Basically, you can have parent and child components, but if you ever have a component with over 2 levels of children, you should consider using Redux (or Flux) to handle state between unrelated components. The problem redux solves is just breaking up those dependencies and still allowing components to have a single source of truth. Their official documentation is also really good: http://redux.js.org/