title: How to fix "Warning: Unknown prop `ng-app` on <body> tag. Remove this prop from the element" error?
body: <p>I'm trying to render a webpage through React with the addition of some code the uses Angular. I packaged my page with Webpack. When I run my HTML, I get the following errors:</p>
  
  <pre><code>Warning: Unknown prop `ng-app` on &lt;body&gt; tag. Remove this prop from the element.
  
  Warning: validateDOMNesting(...): &lt;body&gt; cannot appear as a child of &lt;div&gt;.
  
  Warning: Unknown DOM property class. Did you mean className?
  
  Warning: Unknown props `change-background`, `colorcode` on &lt;div&gt; tag. 
  
  Warning: Unknown prop `ng-click` on &lt;li&gt; tag. Remove this prop from the element.
  </code></pre>
  
  <p>My HTML is:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="cssWEB.css"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
      &lt;script src="public/bundle.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JSX file is:</p>
  
  <pre><code>import angular from 'angular';
  
  
  angular.module('App', [])
    .directive('changeBackground', ['$animate', function($animate) {
      return {
        restrict: 'EA',
        scope: {
          colorcode: '@?'
        },
        link: function($scope, element, attr) {
          element.on('mouseenter', function() {
            element.children().addClass('change-color');
            element.children().css('background-color', $scope.colorcode);
          });
          element.on('mouseleave', function() {
            element.children().removeClass('change-color');
            element.children().css('background-color', '@red');
          });
        }
      };
    }]).directive('myClick', () =&gt; {
      return {
        restrict: 'A',
        link: (scope) =&gt; {
          scope.clicked = () =&gt; {
            console.log('pppp');
            window.location.hash = "#snap1";
          }
        }
      };
    }).directive('click2', () =&gt; {
      return {
        restrict: 'A',
        link: (scope) =&gt; {
          scope.clicked2 = () =&gt; {
            console.log("aaaaaa");
          }
        }
      }
    })
  
  //REACT//
  import React from 'react';
  import ReactDOM from 'react-dom';
  import {Element, scroller} from 'react-scroll';
  
  
  const Component = React.createClass({
      componentDidMount: function() {
          scroller.scrollTo('myScroller', {
              duration: 1500,
              delay: 500,
              smooth: true
          });
      },
  
      render: function() {
          return (
              &lt;div&gt;
                &lt;link rel="stylesheet/less" href="style.less" type="text/css" /&gt;
                &lt;script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"&gt;&lt;/script&gt;
                &lt;link type="text/javascript" href="jscode.js"&gt;&lt;/link&gt;
  
  
                &lt;header&gt;
                  My Page
                &lt;/header&gt;
  
                &lt;body ng-app="App"&gt;
                  &lt;div class="cube" change-background colorcode="#f45642" ref={(el) =&gt; { this.messagesEnd = el; }}&gt;
                    &lt;div class="front"&gt;&lt;span&gt;Resume&lt;/span&gt;&lt;/div&gt;
                    &lt;div class="back"&gt;&lt;/div&gt;
                    &lt;div class="top"&gt;&lt;/div&gt;
                    &lt;div class="bottom"&gt;&lt;/div&gt;
                    &lt;div class="left"&gt;&lt;/div&gt;
                    &lt;div class="right"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="wrap2"&gt;
                    &lt;div class="cube" change-background&gt;
                      &lt;div class="front" colorcode="#f45642"&gt;&lt;span&gt;Work&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="back"&gt;&lt;/div&gt;
                      &lt;div class="top"&gt;&lt;/div&gt;
                      &lt;div class="bottom"&gt;&lt;/div&gt;
                      &lt;div class="left"&gt;&lt;/div&gt;
                      &lt;div class="right"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="wrap3"&gt;
                    &lt;div class="cube" change-background&gt;
                      &lt;div class="front" colorcode="#f45642"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/div&gt;
                      &lt;div class="back"&gt;&lt;/div&gt;
                      &lt;div class="top"&gt;&lt;/div&gt;
                      &lt;div class="bottom"&gt;&lt;/div&gt;
                      &lt;div class="left"&gt;&lt;/div&gt;
                      &lt;div class="right"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/body&gt;
  
                &lt;Element name="link1"&gt;
                  &lt;div class="bg2" id="linkhere"&gt;&lt;/div&gt;
                &lt;/Element&gt;
  
                &lt;div class="slide1"&gt;
                &lt;/div&gt;
  
                &lt;div class="slidechild1"&gt;
                &lt;div class="centerbox"&gt;
                &lt;div class="center"&gt;
                  &lt;ul&gt;
                    &lt;li ng-click="clicked2()" id="B1"&gt;aa&lt;/li&gt;
                    &lt;li id="B2"&gt;cc.i&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  });
  
  ReactDOM.render(
    &lt;Component /&gt;,
    document.getElementById("root")
  );
  </code></pre>
  
  <p>What is raising these errors regarding props? Is this a problem caused by having my file to be .jsx? How can I fix them?</p>
  
  <p>Update:</p>
  
  <p>Using Mathew Cawley's answer I manged to fix some of the errors by using data-ng-app instead of ng-app in all of my ng directives. Now I get the following errors:</p>
  
  <pre><code>Warning: validateDOMNesting(...): &lt;body&gt; cannot appear as a child of &lt;div&gt;.
  
  Warning: Unknown DOM property class. Did you mean className?
  
  Warning: Unknown props `change-background`, `colorcode` on &lt;div&gt; tag. Remove these props from the element. 
  </code></pre>