Tag: react

How to Build a Barebones React App (for Beginners)

How to Build a Barebones React App (for Beginners)

This post is about how to build a barebones React app. This is nothing fancy, but this is a manual way to create a React app on your own without using any extra Node Modules or Create-React-App. This post was inspired by my friend, David Kang, who showed me how to do this today.

Requirements

To do this tutorial, you will need some basic knowledge of:

  • HTML
  • JavaScript
  • Git
  • Using the terminal

Let’s start!

How to Build a Barebones React App

  1. Create your repo (folder) locally.
  2. (Optional but recommended) Create your repo on GitHub. Connect it to your local repo.
  3. At your terminal use npm init to create your package.json.
  4. Next create an index.html in the root of your repo.
  5. Put in the basic HTML to create a page. It should look something like this:
    1. Barebones HTML
  6. Let’s add React and ReactDOM to our project. We can do this by getting the React CDN from the official React website.  The official website will always have the latest or most stable version. Remember for non-production projects such as the one you’re probably working on, make sure you use the regular, non-minified version. So what does that look like?
  7. Take the CDNs and put them in your index.html file. Remember to place the JavaScript near the end of the html right before the </body> tag (unless you want to use the attribute async).
    1. Add CDNs to your HTML
  8. Next you will need the CDN for Babel to transpile ES6 and the React code or JSX to ES5, so that all browsers can show this. Again go to the official Babel website because the official websites have the latest or most stable version. Use the non-minified version. (You can typically do that by taking out the .min from the file name to access the full version).
    1. Add Babel CDN
  9. These are the tools for your barebones React app. Now you can start writing JSX!
  10. Let’s do a little to show what you’ve got so far! First in your <body>, add a div with the id of root. This element is where your app will render:
    1. index_html_img_4
  11. Nothing has happened yet. Let’s do some JSX! You can do this by using
    1. Add script with type of "text/babel"
  12. Inside of this <script> tag we can write JSX! Let’s render to the DOM! We can do this using ReactDOM.render(). This function takes in at minimum two arguments. The first argument will be your app. In our example, our app will only be “Hello, world!”. The second argument is the element whose innerHTML will be replaced with your app.
    1. Add JSX
  13. You can check this out in your browser now!
    1. Barebones React App
  14. To keep building your app, I recommend the Getting Started section of the official React website.

If you have any questions on the above, please feel free to comment below!

Advertisements

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