Tag: react

Manatee Mistakes: Uncaught ReferenceError: ReactDOM is not defined

I am going to start blogging about errors and mistakes I have made while programming and what I did to fix them or circumvent them!

Here is my first entry:

Uncaught ReferenceError: ReactDOM is not defined

I made this error the first time I used a CDN for React (instead of downloading the npm module or using Webpack).

I google’d and used the first link: https://cdnjs.com/libraries/react

For development, I want to use the full version (not minified), so I selected  https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js.

I loaded only this script tag.

https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.js

I got the error:

Uncaught ReferenceError: ReactDOM is not defined

What? I thought that this was all I needed!

I tried to import on my index.jsx (which had the ReactDOM.render()), but that didn’t alleviate the problem.  I read Stack Overflow. Apparently, I needed to also include the script react-dom file as well. So I did:

https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.js

Doing just that gave me a really strange error (something like “do not use externally or you will be fired”), that I wish I took a screenshot of!

Thoroughly confused, I got the help of a mentor, and he got new CDNs for both React and React-DOM. Plus we used the crossorigin attribute, and that cleared all errors up. The ReactDOM.render() worked perfectly!

First Time with CDN
First Time with CDN
Quick Comparison of AngularJS, Backbone, and React

Quick Comparison of AngularJS, Backbone, and React

This past week, my bootcamp dived into  MVC and the AngularJS, Backbone, and React frameworks.

Since this went all very fast, I would like to do a quick comparison of those 3 framework’s similarities and differences. This would give me insight on what to look for when I use other frameworks

Or if you are familiar with one of these frameworks, and you wanted to dive into another, this could help you relate the two.

To note, for our use of AngularJS, we focused on using components over directives

Quick Comparison of AngularJS, Backbone, and React
Topic AngularJS Backbone React
Documentation AngularJS Backbone React
Templating {{ }} <%= %> {} to escape JSX, “, ${}
Libraries or Dependencies jQuery, Underscore ES6, Babel
Relation to MVC Module, View, Controller/Whatever Model, View, Collection View (Component)
AJAX Calls $http.get() .fetch() $.get()
Designing the Front-End Use HTML templates and/or edit HTML files Use HTML templates and/or in JS files append HTML elements to DOM Edit JSX files using React Code or JSX which acts like HTML
How to Pass Data We used AngularJS similar to React passing down data from parent to children. To receive data,  HTML should pass down the info from the parent. Then ensure  component in JS file has specified bindings. The Model is an instance. Models are passed to a Collection. Collection of Models is passed into View by creating instances of View. Views have initialize and render functions. Models, Collections, and Views all extend respective Backbone classes. (Ie. var MyView = Backbone.View.extend({})) Pass down data through Views or Components. All Views are instances of React.Component Ie. class MyView extends React.Component{}. In addition to constructor methods, they have render methods. Children cannot interact with each other; only parent can communicate to children and pass props down through JSX.
Things to Look Out for camelCase in JS. kebab-case in HTML. Ie. When passing down a function with name onClick, use on-click in HTML Determine if writing React Code or JSX and ES6 or ES5

What are some things you look out for when learning new frameworks?

 

Image Credits:
By AngularJS – https://github.com/angular/angular.js/tree/master/images/logo, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=31016280
By Unknown –
https://upload.wikimedia.org/wikipedia/commons/2/20/Backbone.js_logo.svg
By Facebook – https://github.com/facebook/react/blob/master/LICENSE-docs, https://en.wikipedia.org/wiki/File:React-icon.svg#file