---
title: "Converting Angular to React, Exploring The Basics | Netlify"
description: "Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!"
source: "https://www.netlify.com/blog/2016/07/27/converting-angular-to-react-exploring-the-basics/"
last_updated: "2026-07-11T01:26:54.000Z"
---
From my experience, Angular Controllers can easily get very heavy with the logic and complicated to tests, due to a large amount of direct dependency injection. React solves this elegantly with the use of Components that are aware of props and states.
At Netlify our app was Angular 1.x and with a completely redone [Angular 2](https://www.youtube.com/watch?v=fBeuaDOBk3s) on the horizon, we got to thinking about trying something new. In the [previous post](/blog/2016/07/26/our-conversion-from-angular-to-react/), I explored the steps we took to prepare our app for React and in this post I will show some basic things in React.
React prides itself in being the V in MVC, so the need for a separate controller is not necessary, due to its [declarative approach](http://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js). All the logic lives in the component or an import from a third party dependency. Making everything declarative makes working in the UI less about being a React expert and more about simply knowing your Frontend UI Components.
React code can also be written in the latest ES Next JavaScript, and it does not require you to learn another syntax otherwise. This is great because all modern browsers [support](https://kangax.github.io/compat-table/es6/) the majority of this new JavaScript syntax.
I [interviewed Kent C. Dodds](https://www.thisdevelopingstory.com/tds-56-kent-c-dodds) a few weeks back and we chatted a bit about the transition from Angular to React. He gave me the revelation that React is actually helping us be better JavaScript developers. This thought is valid, because the majority of the UI manipulation is happening in JavaScript.
For example rendering a list of items in React requires you to use the JavaScript map function instead of the Angular shorthand `item in items`.
```
import React from "React";import Item from "ItemComponent";
class ItemGrid extends React.Component { ...
render() { const {items} = this.props;
return ( {items.map(this.renderItem)}
); }
renderItem(p) { return (
); }}
```
Within the `render()` is JSX and we will cover the wonders this in the next post.
## Props and State
Props and State can be thought as attributes the Component is aware of. The difference between the two; Props are immutable and State is mutable.
Use the newer ES2015 classes
```
import React from "react";
class Item extend React.Component { // State gets set in the class constructor and accessible // by calling this.state constructor(props) { super(props) this.state = {title: "Item Component"} }
// Props get passed to the Item Component on declaration // and accessible using the this.props static propTypes = { content: React.PropTypes.string, };
render() { return (
{this.state.title}
{this.props.content} ); }}
```
## Lifecycle Methods
Lifecycle methods are various methods executed at specific points in the components life. This gives you the ability track and manipulates state during specified times that are, but not limited to mounting/unmounting, prop changes, and component updates.
For example, componentWillMount is available to you to perform asynchronous actions while the Component is rendering on the page. This allows you to fetch and manipulate data in preparation for this render.
```
import React from "react";import fecthApiData from "special-library"
class Item extend React.Component { ...
componentWillMount() { fecthApiData.then((res) => { // setState is method avaiable in React to mutate the state this.setState({ imageUrl: res.data }); } }
render() { return ( {this.state.title}
{this.props.content}
); }}
```
\*_This is a simple example of data fetching, In our React code we now fetch the builds asynchronously using [redux](https://github.com/reactjs/redux) and [redux-thunk](https://github.com/gaearon/redux-thunk) and pass it to the Components using a prop._
## No More $scope
Outside of States, Props, and LifeCycle Methods, you are essentially writing JavaScript when writing React. There is not many shortcuts and hidden syntax. The idea that React can be so declarative while writing has kept me coming back for more.
The idea of attaching things to a global `$scope` to have access and manipulate is no longer needed, now everything declared either using state or passing a prop — What you see is what you get.
Read our next post, [all about JSX](/blog/2016/08/17/converting-angular-to-react-jsx/).
### Share
- [X (fka Twitter)](https://twitter.com/intent/tweet?text=Converting Angular to React, Exploring The Basics&url=https://www.netlify.com/blog/2016/07/27/converting-angular-to-react-exploring-the-basics//)
- [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2016%2F07%2F27%2Fconverting-angular-to-react-exploring-the-basics%2F%2F)
- [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2016/07/27/converting-angular-to-react-exploring-the-basics//)
- [Bluesky](https://bsky.app/intent/compose?text=Converting Angular to React, Exploring The Basics+https://www.netlify.com/blog/2016/07/27/converting-angular-to-react-exploring-the-basics//)
* * *
### Tags
- [React](/blog/tags/react/)
- [Angular](/blog/tags/angular/)
## Keep reading
Opinions & Insights May 14, 2026
[
### How we built Netlify Database for AI-native development
](/blog/how-we-built-netlify-database-for-ai-native-development)
- 
Eduardo Bouças
Opinions & Insights May 6, 2026
[
### My experience building and deploying a project with Netlify Agent Runners
](/blog/my-experience-building-and-deploying-a-project-with-netlify-agent-runners)
- 
Conor Martin
## Recent posts
News & Announcements June 25, 2026
[
### Netlify Functions, designed for Agent Experience
](/blog/netlify-functions-designed-for-agent-experience)
- 
Eduardo Bouças
News & Announcements June 24, 2026
[
### How we measure Netlify’s Agent Experience
](/blog/how-we-measure-netlify-agent-experience)
- 
Sean Roberts
Guides & Tutorials May 15, 2026
[
### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend)
](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend)
- 
Nahrin Jalal
### How do the best dev and marketing teams work together?
[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)