--- title: "Converting Angular to React, JSX | 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/08/17/converting-angular-to-react-jsx/" last_updated: "2026-07-11T03:08:38.000Z" --- React introduces an entirely new markup, [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is short for JavaScript XML and resembles XMl in a way but operates very similar to HTML. I very briefly mentioned JSX in the first post of this series, and provided the following example: ``` // jsx sample render() { return (
);) ``` The idea of including markup amongst JavaScript seemed foreign and even began a point of contention for me. Inline markup however, is no stranger to Angular with Directives and actually provides an elegant solution for working Components. The idea is to have everything about your Component encapsulated into one file, including styles. JSX is the key piece that makes React ideal constructing UI. ![open-source-modal](/v3/img/blog/open-source-modal.png) ``` // OpenSource Modal Component import React from "react";import Modal from "react-bootstrap/lib/Modal";import heartIcon from "../../images/heartIcon.svg"; export default class OpenSource extends React.Component { render() { const {show, close, onSubscribe} = this.props; return (

We Heart Icon Open Source

If you are working on open source or non-commercial projects, you can get a full pro plan for free!

Free plans are a gift to the open-source community and should not be used for commercial projects. We reserve the right to revoke any free plan that is not an open-source or developer project at any time

); }} ``` All the code needed to make the above modal work is encapsulated in the OpenSource component. This component can be moved and reused wherever we choose to use it thanks to the use of ES2015 exports declarations before the `class`. The requirements to export JSX from React components only requires a `render()` function that returns markup. Note that I am using a pre-built `` component from the React Bootstrap library and passing children elements using standard HTML tags and attributes. The only difference in my markup to standard HTML is the use of `className` and `class`. Due to this being JavaScript, JSX opted to use something other than `class` attributes to avoid name collisions. So going back to the comparison to Angular, Most of this can be done in an [Angular Directive](https://docs.angularjs.org/guide/directive) with some inline HTML. The only drawback would be the amount of code written boiler needed for connecting Angular Controllers, Templates, and Modules as the Directive grows to become more complex. ``` // example of Angular Directive taken from their docs angular.module('docsTabsExample', []).directive('myPane', function() { return { require: ['^^myTabs', 'ngModel'], restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, controllers) { var tabsCtrl = controllers[0], modelCtrl = controllers[1]; tabsCtrl.addPane(scope); }, templateUrl: 'my-pane.html' };}); ``` The beauty of React is most of the Tribal Knowledge lives within the confines of JavaScript and not so much React. I have been using Angular for over a year and still have to look at the documentation to figure out what short-hand boilers are needed in my Directive declarations. Today at Netlify we are using React and loving it. Not only has it enabled our Frontend team to create great UIs, it has also enabled our Designers as well. The entirety of this Component was actually styled by our Designer, thanks to the clear layout JSX provided for them. As a reminder from the [last post](/blog/2016/07/27/converting-angular-to-react-exploring-the-basics/), we also don’t need to attached $scope variables for data access in our markup. Everything done in JavaScript is available within the confines of the Component. Hopefully these last few posts have been enlightening. If you are using React with Netlify, lets us know on [Twitter](http://ctt.ec/8Qao8) If you are not, we wrote a post just for you and how you can [deploy React on Netlify in 30 seconds](/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/) ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=Converting Angular to React, JSX&url=https://www.netlify.com/blog/2016/08/17/converting-angular-to-react-jsx//) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2016%2F08%2F17%2Fconverting-angular-to-react-jsx%2F%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2016/08/17/converting-angular-to-react-jsx//) - [Bluesky](https://bsky.app/intent/compose?text=Converting Angular to React, JSX+https://www.netlify.com/blog/2016/08/17/converting-angular-to-react-jsx//) * * * ### Tags - [React](/blog/tags/react/) - [Angular](/blog/tags/angular/) ## Keep reading ![](/_astro/cfdc437592ee2bf75a62690af707d52533d08063-1600x900_2njoni.webp) Opinions & Insights May 14, 2026 [ ### How we built Netlify Database for AI-native development ](/blog/how-we-built-netlify-database-for-ai-native-development) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças ![](/_astro/97a103abeebc73c01640f04a5c7555c1d10469aa-1200x675_Z8E0d4.webp) 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) - ![Profile picture of Conor Martin ](/_astro/d1f759333090a4801940b47bf8701c441c6bd4a4-375x375_Bsg02.webp) Conor Martin ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) 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) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)