Single page application with php and react vs jquery


i have been building an api using php. The api outputs data via an array/json depending on the request.

I have used a php router to identify which paths require such data and included authorization

i have not begun to really format the html.

in the past i used jquery  and ajax = super simple

recently i have been exploring other options and it seems the hot topic is react

i want to use bootstrap at least for the css (save time).

i am comfortable with jquery and not with react.js -> however both are js so i dont think the learning curve will be massive.

im not sure if i should just stick to jquery and add the ajax support to jquery.slim and keep some of the basic jquery functions built into bootstrap or dive into react.js and fetch.js

i dont want to include jquery, react and fetch as i think this is overkill as i believe there are overlaps that do not need to be there.

currently the api only returns datasets but it is easy to add in the html if needed to appease react/jquery

pros for query

  1. Already know
  2. comes with bootstrap
  3. easy

pros for react

  1. apparent performance boost
  2. focus on view /states

Any guidance is greatly appreciated

J NUnicorn wranglerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
React is going to help you with your view code - jQuery you have to write everything from the ground up (with respect to fetching data and then updating your view). React allows you to build your own components that do specific things - you can then place those components where you want them , interact with other components, style your components etc. It makes for much more structured coding of your page.

React will get data from the server through an AJAX call (much like jQuery except you can wire it to your components). You can either send back JSON and render the view in the browser or render on the server and send back the HTML - server side rendering is considered to have a much higher performance than client side rendering - but there are arguments both ways - you need to figure out what suites your situation.

I would recommend building your API as a REST compliant interface - that way you can switch the backend without having to change the client. The server component you can implement in anything.

jQuery is useful for manipulating the DOM - however if you are moving towards a Single Page Application then you want to look at Angular / React / Vue as these frameworks / libraries do a lot of the heavy lifting for you. By moving to a component based design your application becomes structured code - rather than a jQuery fruit salad which is what tends to happen when you try to do to much through jQuery / JavaScript.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
J NUnicorn wranglerAuthor Commented:

Thanks a lot!

for react would you recommend fetch, axiom or some other http library?

Should i ditch jquery compiled with the bootstrap framework and just rebuild the useful parts - i do not want to keep unneeded libraries around
Julian HansenCommented:
Either of those will do - up to you. I have used Axios (I assume that is what you were referring to) in a few sample apps getting to know React.

Bootstrap - you can use React-Bootstrap - if you are just going to use Bootstrap styles then you can just import the stylesheet - if you want to use the components then you can use the above.

jQuery - no need to use this unless there is some legacy (code you must include) reason to do so.
J NUnicorn wranglerAuthor Commented:
Big help as usual!

Julian HansenCommented:
You are welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.