I am trying to work on a project which is using a Layout/Template which uses a lot of jQuery.
I have learned to integrate the template with ReactJS Project, however, I am looking for a solution where I can completely replace the jQuery.
One of my solution is to use jQuery functions inside ComponentDidMount() or Render() function of React.
Is this approach correct? Is it the right way?
I have attached a small example below:
import React, { Component } from 'react';
import '../stylesheets/commonstyles.css';
import '../stylesheets/bootstrap-sidebar.css';
import '../stylesheets/sidebar1.css';
import $ from 'jquery';
class NavBar extends Component {
constructor(props){
super(props);
this.openSidebar = this.openSidebar.bind(this);
}
openSidebar(){
console.log('hello sidebar');
}
componentWillMount(){
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
$('.search-btn').on("click", function () {
$('.search').toggleClass("search-open");
return false;
});
});
}
This is my Render Function.
{/* <!--- SIDEBAR -------> */}
<div class="wrapper" style={{paddingTop:60}}>
{/* <!-- Sidebar Holder --> */ }
<nav id="sidebar">
<div class="sidebar-header">
<h3>Dashboard</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" /*data-toggle="collapse" */ aria-expanded="false">
<i class="ti-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-align-justify" ></i>
About
</a>
<a href="#pageSubmenu" /*data-toggle="collapse" */ aria-expanded="false" style={{color:"white"}}>
<i class="ti-text"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-paragraph"></i>
Portfolio
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-control-play"></i>
FAQ
</a>
</li>
<li>
<a href="#" style={{color:"white"}}>
<i class="ti-share-alt"></i>
Contact
</a>
</li>
</ul>
</nav>
{ /* <!-- Page Content Holder --> */ }
<div id="content">
</div>
</div>
Is this approach correct? Is it the right way?
No. No approach is correct and there is no right way to use both jQuery and React/Angular/Vue together.
jQuery manipulates the DOM by, for example, selecting elements and adding/deleting stuff into/from them. Typically, it selects an existing <div> and sets its text.
The other frameworks don't manipulate the DOM; they generate it from data, and regenerate it whenever this data changes (for instance after an Ajax call).
The problem is, jQuery has no clue about React's presence and actions, and React has no clue about jQuery's presence and actions.
This will necessarily lead to a broken application, full of hacks and workarounds, unmaintainable, not to mention that you have to load two libraries instead of one.
For instance, jQuery will select a <button> and add it a .click() listener; but a split second later, React/Angular/Vue might regenerate the DOM and the button in the process, voiding jQuery's .click(). So you'll ask a question on Stackoverflow, wondering why the heck does your .click() not work. You'll end up adding a dirty setTimeout() hack, in order to delay jQuery's click() handler attachment until after React has regenerated your button. It's straight up your highway to hell.
Solution : use jQuery OR (React/Angular/Vue), not both together.
Is this approach correct? Is it the right way?
No. Don't use jQuery to attach event listeners to DOM elements created and managed by React. Use onClick'. I could not find#sidebarCollapse` in your snippet. It could look something like this.
<button id="sidebarCollapse" onClick={state => this.setState({ collapsed: !state.collapsed })>Collapse</button
And the class for <nav id="sidebar"> could dependent on this state
<nav id="sidebar" className={ this.state.collapsed ? "": "active" } >
You'll notice, you hand over running operations like adding removing class, attributes and other DOM operations to React and simply declare how things must react to state changes. Amidst this, if you try to run jQuery operations, your UI could probably end up in an inconsistent state.
Migration could be done like this: replace parts of your UI elements with React. For eg, initially you could do,
<!-- rest of your existing jQuery based code -->
<header id="reactManagedNavbar">
<!-- Nothing here. React will take care of DOM Elements here -->
</header>
<!-- rest of your existing jQuery based code -->
And React side could look like this,
// main.js
ReactDOM.render(<MyNavBar />, document.getElementById('reactManagedNavBar'))
// MyNavBar.js could have the react components
This way you can incrementally migrate to React and still have jQuery side by side. Just dont manipulate the each other DOM elements.
Sometimes you need a jQuery plugins (animations, visualisations charts etc) inside a React component. Use refs!
class MyJQueryDependingComp extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// this.myRef.current is the dom element. Pass it to jQuery
}
render() {
return (
{/* rest of React elements */}
<div ref={this.myRef} />
{/* rest of React elements */}
);
}
}
Again, refrain from touching your jQuery's DOM in React and vice versa.
I've recommend you to use a provider plugin in your webpack.config:
Is really simple to use, and it allows you to use jquery in all your project without importing the package in every file:
More Info Docs:
https://webpack.js.org/plugins/provide-plugin/?
So you just have to add this plugin in your webpack.config file:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
});
There is no real way to convert a Jquery template into a React template except literally go through all the selects and rewrite everything in React. The reason being, both these libraries manipulate the dom in different ways
jQuery and react can very well when together only if they don't interact with each other. If you choose to use jQuery use only jQuery to manipulate the dom not both. And way is to use jQuery outside the react Js file in your index.html
Please note: this will work only if the page you query loads first
Hey I'm currently working on a project in Meteor and React and I'm currently styling the front end with Materialize. For the dropdown and side-nav to work I need to add some jquery lines in some methods.
The problem here is that I need to click at the buttons two times for the dropdown and sidebar to activate or show themselves, but after i've clicked two times for the first time it works with just one click.
These are the methods:
showDropdown(){
$(".dropdown-button").dropdown();
}
collapse(){
$('.button-collapse').sideNav({ menuWidth: 300, closeOnClick: true });
}
constructor:
export default class Navigation extends TrackerReact(React.Component) {
constructor() {
super();
this.showDropdown= this.showDropdown.bind(this);
this.collapse = this.collapse.bind(this);
}
And this is where I am using these methods in the rendering:
render(){
var navOptions;
if (Roles.userIsInRole(Meteor.user(), 'user')){
navOptions = (
<div>
<nav>
<div className="nav-wrapper">
SeniorSmart
<i className="material-icons">menu</i>
<ul id="nav-mobile" className="right hide-on-med-and-down">
<li>Hjem</li>
<li><a className='dropdown-button' href='' onClick={this.showDropdown} data-activates='dropdown1'>Drop Me!</a></li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<ul id="dropdown1" className="dropdown-content">
<li>Finn aktiviteter</li>
<li>Mine venners aktiviteter</li>
<li>Mine påmeldinger</li>
<li>Opprett aktivitet</li>
</ul>
<ul className="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
)
You have to click twice because those jQuery plugins need to be initialized. Your first click init them, then they just work normally with all other clicks come after.
To avoid this, you should initialize these plugins inside componentDidMount, but you have to make sure that the DOM elements to be used are put on the screen.
As I see in your code, the nav is only rendered if the logged-in user has user role. Therefore if user do not have that role, the nav element will not be rendered so as the plugins can not be initialized.
I am using Angular Bootstrap Tour to create a tour, and am having trouble with the backdrop hiding an element on the navbar that needs to be highlighted as part of the tour. This is what the code looks like:
<ul class="nav navbar-nav navbar-left" tour-step order="1" placement="bottom" backdrop="true" content="Content goes here">
<li>
Link Goes Here
</li>
</ul>
I've tried to change the position to static and the z-index to auto of all the elements in the same stack as the tour step, but no avail. I've also tried to bring down the z-index of the tour backdrop and container, but nothing seems to be giving me the effect required. Any help is greatly appreciated!
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks
I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.
I've performed all the steps required i.e. below is the body tag
<body data-spy="scroll" data-target="#top-fixed-nav">
and nav is also there:
<ul class="nav" id="top-fixed-nav">
<li>
Home
</li>
<li class="">
About
</li>
<li class="">
How to Use?
</li>
<li class="">
Contact
</li>
</ul>
Have called the scrollspy as well.
$('#top-fixed-nav').scrollspy();
Can anyone please have a look and please point out what I'm overlooking or doing wrong here.
Docs say:
To easily add scrollspy behavior to your topbar navigation, add
data-spy="scroll" to the element you want to spy on ( most typically
this would be the <body>). Then add thedata-target attribute with the
ID or class of the parent element of any Bootstrap .nav component.
The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).
try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag