W. Shane Brunson

Converting from Angular 1.x to React

March 18, 2016

After completing Wes Bos’s excellent React course, React For Beginners, I was eager to try out what I learned on an actual project. I have an existing project call QuizSimply that I created as a way to learn Angular 1.x. I created a new branch called ‘react’ and started the app re-write process.

Angular Components

My existing Angular app, QuizSimply, wasn’t a traditional Angular application. I was already in the process of componentizing the app by replacing view controllers with directives. I was following the advice of this to prepare my application for Angular2. At the time, I wasn’t aware of the specifics of React. Now that I’ve learned more about how React works and how a project is structured, I’m very glad I made the component switch. It made the conversion to React so much easier because Angular components are very similar to React components; you specify a template and you write some methods to add, read, or alter the template. The main difference is Angular built-in directives vs plain-old JavaScript. For example, to repeat elements in Angular, you would use ng-repeat. In React, you would call .map off of the array of data and return HTML with the data you were looking to display. A wiser developer said that Angular puts JavaScript in HTML; React puts HTML into JavaScript.

Converting to React

Since my application was already initially componentized, my next steps were to convert the Angular syntax to React. I’ll demonstrate the path I took with my Quiz component. It receives an object of questions and choices, then renders each question card. I’ve simplified the code quite a bit so it is easier to follow along, but you can check out the full examples in the QuizSimply GitHub repo.

{% highlight javascript %} angular.module(‘App’).directive(‘quiz’, function() { return { scope: {}, bindToController: { questions: ’&’ }, templateUrl: ‘./quiz-template.html’, controllerAs: ‘vm’, controller: function questionController() { const vm = this;

		vm.questions = vm.questions();

}); {% endhighlight %} And the template: {% highlight html %}

{{ question.questionTitle }}

{% endhighlight %}

First step was to remove the Angular decoration at the top and use the ES2015 (ES6) class declaration syntax to define the Questions component.

{% highlight javascript %} //Angular angular.module(‘App’).directive(‘quiz’, function() {});

//React class Quiz extends React.Component({}) {% endhighlight %} We can remove all of the boilerplate code that defines an Angular directive. If you are using the new 1.5 component syntax then this isn’t a problem. We can also add the render() function and the template.

{% highlight javascript %} class Quiz extends React.Component({ render() { return (

{{ question.questionTitle }}

); } }) {% endhighlight %} Let's touch up our template by removing the references to Angular directives and replacing them with The React Way:

{% highlight html %} // Angular

{{ question.questionTitle }}


{this.props.questions.map(question => { return (
{this.props.questions.map(choice => { return (
); })}
); } }) {% endhighlight %} The final version of our new Quiz component looks like this: {% highlight javascript %} class Quiz extends React.Component({ render() { return(
{this.props.questions.map(question => { return (