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.
Per the React docs, we'll need a few things:
# within root of project directory
npm install --save react react-dom
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015
echo '{ "presets": ["react", "es2015"] }' > .babelrcHop into your project's index.js and add your React imports:
// index.js
import React from 'react'
import ReactDOM from 'react-dom';Assuming there is a #root element in your markup:
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'))Navigate to your page in the browser - voilà!
You're ready to start searching down elements of your UI to transform into 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:
<li class="food-row" data=id=`${food.id}`>
<p class="food-name">${food.name}</p>
<p class="food-calories">${food.calories}</p>
</li>As a React component, that would look something like:
// Food.js
import React, { Component } from "react"
class Food extends Component {
render() {
return (
<li className="food-row" data=id={props.food.id}>
<p className="food-name">{props.name}</p>
<p className="food-calories">{props.calories}</p>
</li>
)
}
}
export default FoodGreat! You're set to continue transforming UI elements into components.
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.
Fiirst let's install Axios.
Simple.
# within project directory
npm install axios --saveWorking 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:
import axios from 'axios'
axios.get('https://quantified-api.herokuapp.com/v1/foods')
.then((foods) => {
console.log(foods)
})
.catch((error) => {
console.error(error)
})What about a POST request? Also similar.
axios.post('https://quantified-api.herokuapp.com/v1/foods', {
name: "Tofu"
calories: 120
})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!