locked
jquery bootstrap template to react question RRS feed

  • Question

  • User1034446946 posted

    Hi

    I bought a bootstrap template a while ago, however i want to start using react. I really like the templates the html is uptodate, so the only issue is the JQuery, in all the posts i have red they say to try to avoid jquery in react, but i have been looking through some of the JQuery 3rd party plugins for the template and some of them have react informationand they  use jquery.

    So i am doing myself a dis service by using jquery in react? (i will have plans to replace it eventually) is there anything i need to conside when changing the template over,eg i expect the css to work the same way regardless of the event handling ( i will be using the jquery bootstrap css)

    I will look to see if there are react alterntives as i go through it.

    Any thoughts would be appriciated.

    Wednesday, August 21, 2019 2:44 PM

Answers

  • User475983607 posted

    You can use jQuery in React if you like or you can use React Bootstrap.  Once you start writing React components you'll probably move away from jQuery naturally.  

    I recommend visiting the React support site if you have React questions regarding integration with other libraries.

    https://reactjs.org/docs/integrating-with-other-libraries.html

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 21, 2019 2:59 PM
  • User-474980206 posted

    the main issue with using jQuery is that it updates the dom directly, not the virtual dom. You will need to use react refs, and lifecycle events (or useEffect()) to properly use jQuery. There are a lot of examples of using jQuery with react. 

    but you should migrate away from jQuery. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 21, 2019 4:15 PM

All replies

  • User475983607 posted

    You can use jQuery in React if you like or you can use React Bootstrap.  Once you start writing React components you'll probably move away from jQuery naturally.  

    I recommend visiting the React support site if you have React questions regarding integration with other libraries.

    https://reactjs.org/docs/integrating-with-other-libraries.html

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 21, 2019 2:59 PM
  • User-474980206 posted

    the main issue with using jQuery is that it updates the dom directly, not the virtual dom. You will need to use react refs, and lifecycle events (or useEffect()) to properly use jQuery. There are a lot of examples of using jQuery with react. 

    but you should migrate away from jQuery. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, August 21, 2019 4:15 PM
  • User1034446946 posted

    Thanks,is there a simply way to extract the code from the query and convert it to use directly in react?

    I am thinking its not overly hard just timeconsuming, although I am not good with js or react but i guess i will need to learn it anyway.

    Wednesday, August 21, 2019 8:58 PM
  • User475983607 posted

    Thanks,is there a simply way to extract the code from the query and convert it to use directly in react?

    jQuery is open source.  It's not real clear what you want to extract but there is nothing stopping you form reviewing the jQuery code.

    I am thinking its not overly hard just timeconsuming, although I am not good with js or react but i guess i will need to learn it anyway.

    I'm pretty sure if you take the time to learn React you'll get the idea and have little reason to use jQuery. 

    Wednesday, August 21, 2019 10:42 PM
  • User1034446946 posted

    I'm pretty sure if you take the time to learn React you'll get the idea and have little reason to use jQuery. 

    That is the issue, just spent the a few hours trying to figureout path conventions which imo should be in the docs, also routing isn'tin the docs.

    plus so many of the tutorials and examples are for older versions

    out of interest should i be open to importing 3rd party components? eg datepicker,notification stuff,etc if so any recommendations, also should i manually do forms or use a 3rd party component and which one?

    Thursday, August 22, 2019 1:42 AM
  • User-719153870 posted

    Hi EnenDaveyBoy,

    out of interest should i be open to importing 3rd party components? eg datepicker,notification stuff,etc if so any recommendations, also should i manually do forms or use a 3rd party component and which one?

    Whether to be open to 3rd party components or not or which component to choose totaly depends on your actual needs.

    In fact, there are many these components have been integrated in some versions of React, while there may also be situations where third-party components have better functionality when you need to import 3rd party components.

    You can find many examples, demos at NPM. For example, the datepicker.

    Best Regard,

    Yang Shen

    Thursday, August 22, 2019 8:15 AM
  • User475983607 posted

    That is the issue, just spent the a few hours trying to figureout path conventions which imo should be in the docs, also routing isn'tin the docs.

    plus so many of the tutorials and examples are for older versions

    out of interest should i be open to importing 3rd party components? eg datepicker,notification stuff,etc if so any recommendations, also should i manually do forms or use a 3rd party component and which one?

    I'm not sure what tutorials you are reading but I went through the tutorials on React's site and that got me going.  I'm probably not as bright as you but it took me about 2 weeks to go from no experience to building a medium difficulty page.  This page has 3 auto completes, HTML 5 date pickers, real time filters, a result set, and CRUD.  There was a bunch of refactoring as I got the hang of the designing components, handling state, and passing props. 

    IMHO, many of your posts are similar to this one where your question make assumptions about how to work with technology.  All I can tell you is once you take the time to learn the tool chain and basic building blocks, components, state and props, then you'll have a much better idea how to integrate other libraries.

    To answer your question, you can incorporate a datepicker, notifications, anything really. It is very easy but most likely these libraries will be outside your components.

    Thursday, August 22, 2019 11:31 AM
  • User-474980206 posted

    react is UI only, not a full framework like angular. it has no opinion on routing, server updates, etc. other than suggesting a pattern for state management of components, even this is often an external library (though the new hooks give the best default implementation).

    not sure what you mean about path conventions, there are none beyond the browsers. if you are talking about module paths, the convention are based on the build tools, if any, you are using. if you are talking about route paths, this will depend on the route library you are using. but generally you define a route to a component (as the component is a javascript object, it matters not where the source code is located at build time).

    if you are going to use react you need to learn the following:

    1) modern javascript, including closure, lambda and arrow functions. also some understanding of functional programming, or you never will be able to read the examples

    2) the build chain you are using. probably node/webpack/babel. 

    3) webpack module support. most react apps import css and images modules rather than use stylesheets.

    4) some CSS framework like bootstrap, foundation, material, etc.

    5) learn to read open source code.

    Thursday, August 22, 2019 4:28 PM
  • User1034446946 posted

    EnenDaveyBoy

    That is the issue, just spent the a few hours trying to figureout path conventions which imo should be in the docs, also routing isn'tin the docs.

    plus so many of the tutorials and examples are for older versions

    out of interest should i be open to importing 3rd party components? eg datepicker,notification stuff,etc if so any recommendations, also should i manually do forms or use a 3rd party component and which one?

    I'm not sure what tutorials you are reading but I went through the tutorials on React's site and that got me going.  I'm probably not as bright as you but it took me about 2 weeks to go from no experience to building a medium difficulty page.  This page has 3 auto completes, HTML 5 date pickers, real time filters, a result set, and CRUD.  There was a bunch of refactoring as I got the hang of the designing components, handling state, and passing props. 

    IMHO, many of your posts are similar to this one where your question make assumptions about how to work with technology.  All I can tell you is once you take the time to learn the tool chain and basic building blocks, components, state and props, then you'll have a much better idea how to integrate other libraries.

    To answer your question, you can incorporate a datepicker, notifications, anything really. It is very easy but most likely these libraries will be outside your components.

    I think part of my problem is I am moving over with knowledge of just razor, so things like having images, fonts etc in the public folder but the css in the src folder,  then referencing images in the css which are in different folders, seems simple now i have it setup, but theres no mention of it in the docs.

    its just a case of getting used to it, which i am enjoying at the moment.

    Thursday, August 22, 2019 9:09 PM
  • User1034446946 posted

    react is UI only, not a full framework like angular. it has no opinion on routing, server updates, etc. other than suggesting a pattern for state management of components, even this is often an external library (though the new hooks give the best default implementation).

    I need to keep reminding  myself of that,makes sense now,although would be since if they had a full framework as an option, although i guess with all the options it could make it very messy.
    if you are going to use react you need to learn the following:

    1) modern javascript, including closure, lambda and arrow functions. also some understanding of functional programming, or you never will be able to read the examples

    2) the build chain you are using. probably node/webpack/babel. 

    3) webpack module support. most react apps import css and images modules rather than use stylesheets.

    4) some CSS framework like bootstrap, foundation, material, etc.

    5) learn to read open source code.

    really appriciate that list, haven't looked for a good javascript tutorial yet, will be doing that over the weekend, i know a little bootstrap and old css, really need to refresh that, i know i need to learn more image stuff for rendering 4k on phones and desktops, never looked at node but makes sense, have got a lot of questions about webpacks although didn't know it was web packs until now.

    Eek when u look at it like that.

    Thursday, August 22, 2019 9:27 PM