CODEWITHSUNDEEP
javascriptjqueryhtmlcssreactjs
Kaan Taha Köken
Kaan Taha Köken

Reputation: 973

Jquery animation and react

I have a website that written by Javascript, HTML & CSS. Also, in the website, I have website opening animation that uses Jquery script.

I notice that in the website (non-react version) if I do not include jquery-3.2.1.min.js script to HTML file, animation stuck, and the rest of the page does not appear.

My bosses asked me to write the website with react. When I am transferring the (non-react version) website to react one, I came across a problem. I noticed that jquery scripts does not work.

Is there a way I can include the jquery-3.2.1.min.js?

Update: I include Jquery 3.2.1 from npm, but still does not work

Upvotes: 0

Views: 3732

Answers (3)

Hamid Pouladi
Hamid Pouladi

Reputation: 235

What happened when a web page render in browser?

  1. Browser create document tree structure for that page that called Document Object Model or DOM.

  2. Browser has some Api that allow javascript to manipulate DOM (for example: change text content of specific node in this DOM or change color of some node elements).

When we use Pure javascript or jQuery for work with DOM, we directly select DOM nodes and manipulate them that causes to update this tree structure(DOM) and rerendered(Even if there is a slight change). This is not good for performance and is very slow.

But react does not directly manipulate DOM. react create one object that representation of DOM and manipulate that. This object is called Virtual DOM.

Virtual DOM is in-memory representation of Real DOM. It is lightweight JavaScript object which is copy of Real DOM.

When state of this Copy object changes, React using diff algorithm compares older copy and changed copy of the Virtual DOM to find the minimum number of steps to update the Real DOM.

For this reason, the use of these two libraries is not recommended together. But in some situations it may be necessary to use other libraries. React Docs explained it on this page

Also you can use some react animation libraries instead. read this article for details.

Upvotes: 2

Masoud Tavakkoli
Masoud Tavakkoli

Reputation: 1020

Originally you should to AVOID use of jQuery in a React project. because react uses a virtual DOM system and jQuery can not work with this.

BUT for basic works you can do this, Call jQuery after React render lifecycle in componentDidMount()

more info from react docs

class App extends React.Component {
  componentDidMount() {
    // Jquery here $(...)...
  }

  // ...
}

Upvotes: 1

Nisfan
Nisfan

Reputation: 746

React Integrating with Other Libraries

Upvotes: 1

Related Questions