React Integration with Axios
How to Integrate React with an Existing Client-Side Application
Do you have an existing client application built with vanilla JavaScript that you’d like to transform into a React application?
It’s not as complicated as you’d might think it’d be.
Installing Modules
Per the React docs, we’ll need a few things:
Project Integration
Hop into your project’s `index.js` and add your React imports:
Assuming there is a `#root` element in your markup:
Navigate to your page in the browser — voilà!
You’re ready to start searching down elements of your UI to transform into components.
Components
The easiest place to start with components would be to find an element of your UI that could almost be plucked out and put back into place. Think buttons, avatars, feeds, comments, etc.
Imagine your markup including a list of food / calorie information:
As a React component, that would look something like:
Great! You’re set to continue transforming UI elements into components.
Why Axios?
Axios is a promise-based library used with Node.js and your browser to make asynchronous JavaScript HTTP requests.
When we know we need to implement promise-based asynchronous HTTP requests with JavaScript we usually assume jQuery’s AJAX is what we’ll need to get the job done.
While we _could_ add jQuery to our React application, we’d sort of be going against React by doing so. Remember, jQuery is a wonderful tool for DOM manipulation, but React doesn’t care much about the DOM. Since React is handling everything within its own virtual DOM, there’s really no longer a need for jQuery.
Thus, Axios becomes a lighter-weight solution to handle our HTTP requests.
Installing Axios
Fiirst let’s install Axios.
Simple.
Working with Axios
Working with Axios? Also simple. We already know jQuery’s AJAX syntax — Axios really isn’t much different.
For example, if we wanted to make a GET request to our API’s `foods` route, it’d look something like this:
What about a POST request? Also similar.
Go as far as you can both creating components and whittling away at the need for jQuery altogether.
Congrats — you’ve got a transformed React app!
