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

Part 1: 1 How to Install PostgreSQL on Windows 10

For one of my apps, I was responsible for the database, and there were some tricky things with Postgres! This post is part of a tutorial series on how to use Postgres!

Note: I also use Windows 10 and hosted my Postgres database on Digital Ocean, so I will be covering all the tricky parts I ran into!

This is the first in the series, and this is on how to install PostgreSQL for Windows 10.

Part 1: How to Install PostgreSQL for Windows 10

  1. Go to https://www.postgresql.org/download/
  2. Click on the link to your operating system. I selected Windows.
  3. On this new page, you have 2 options. You can download Postgres via EnterpriseDB or BigSQL. I used the interactive installer by EnterpriseDB because it easily allows you to download extensions (such as PostGIS) right after downloading PostgreSQL and pgAdmin 4.
  4. It takes you to the EnterpriseDB page to download. Select the version of Postgres (I selected 9.6.5 because it was the newest at the time).
  5. Select your operating system.
  6. Then click download.
  7. Once completed, it will download PostgreSQL. (It may download Microsoft Visual C++ first).
  8. You know you are finished with installing PostgreSQL when an installer for pgAdmin 4 comes up.

The next post in the series will be how to install pgAdmin 4.

 

Introduction to Amazon Alexa

This post is an introduction to Amazon Alexa. This is a blog post format of my original presentation on Google Slides.  This post and Google Slide presentation are for educational purposes.

Let’s get started!

What is Alexa?

Alexa is a software that a user can interact with by using their voice. A user would interact with Alexa through an Amazon Echo device. The Alexa software is hosted in the cloud (AWS) and is a VUI.

What is a VUI?

VUI stands for Voice User Interface meaning that a user can interact with the software using their voice. It is similar to a GUI or Graphical User Interface in the way that a VUI and GUI are both front ends. However, a VUI is not in competition with a GUI. A VUI is not meant to replace a screen.  A VUI is just another option in which a user can interact with software.

For Alexa, the software takes intents and utterances.  Intents are functions or actions that a user is available to invoke in an Alexa skill through an utterance. Since there are many different ways to express the same intent (or request), utterances are a set of likely spoken phrases for one intent. (In an upcoming blog, there will be code to illustrate this).

With VUI, there are different ways of expressing emotion. SSML is Speech Synthesis Markup Language. SSML gives a developer control on how Alexa should sound. SSML can make Alexa whisper, pause, or recite a number as a set of digits. Another way of expressing emotion is to use Speechcons. Speechcons are like emoticons.  Instead of a smiley face emoticon, a developer can use a speechcon to make Alexa say, “Hurrah!”

How Do You Use Alexa? (Utterance Syntax)

An utterance is what a user would say to interact with Alexa. The utterance maps to an intent, which invokes a function on an Alexa skill. What is an example of a spoken utterance?

“Alexa, start Space Facts.”

There are 3 parts to an utterance: 1. the wake word, 2. the phrase, and 3. the skill name. Here is a break down of an utterance:

  1. Wake word
    • Alexa
    • Amazon
    • Computer
  2. Phrase/verb
    • Start
    • Open
    • Begin
  3. Skill name/function invocation
    • Space Facts

The typical wake word is “Alexa”, and it is highly recommended to keep it as Alexa unless someone the user lives with has the name Alexa. If someone in the user’s household has the name Alexa, the user can change the wake word to “Amazon” or “Computer”. So the utterance would be “Amazon, start Space Facts”.

The phrase is the verb or word that causes an action. For example, “Alexa, start Space Facts” should start an intent that will invoke the Space Facts skill. Or “Alexa, stop” will stop the current action. “Alexa, help” will give some information about the skill.

This phrase or verb is where the developer will be concentrating making the different utterances for the same intent. So the utterances using “start”, “open”, “begin” will typically map the same intent. A developer will want to cover the many ways a user would say this command.

Lastly, there is the skill name or function invocation. An utterance using a skill name could be “Alexa, stop Space Facts”. Depending on the skill, there can be different functions a user can invoke that the skill will listen for.

Alexa Skill Request Lifecycle

Once a user says an utterance, what happens?

Once a user says an utterance such as, “Alexa, start Space Facts”, the Amazon Echo device picks that up and interfaces with the Alexa Skill. The skill sends the utterance to the cloud (AWS) where it does the fancy footwork. The cloud is the skill’s back end and where the code/functionality is located. The code maps the utterance to an intent, which runs code that will return a corresponding response via JSON to the Alexa Skill. The Alexa skill will then output the response to the user via the Amazon Echo device. In this example, if the user said, “Alexa, start Space Facts”, Alexa’s response will be probably be a space fact such as “A year on Mercury is just 88 days long”.

So that’s it on my introduction to Amazon Alexa. I will be writing an upcoming blog post on how to make a simple Alexa skill, and I will link it here. I will also update and adjust this blog post with some graphics. Please stay tuned!

Quick UI-Routing Tutorial in AngularJS

This post is a quick tutorial about UI-Routing in AngularJS. This tutorial is not comprehensive but a quick look for fast reference.

What Is UI-Routing For?

It allows different AngularJS components to be switched out. (If you were using the Internet in the late 90’s to early 2000’s, you can think of it similarly to frames)

What’s The Example About?

In our example, when someone comes to our web app (ie. mywebapp.com), we want the component to appear.

When a user clicks on the Login link in our navbar, we want the component to appear, which allows the user to login.

How Do We Set This Up?

Below we have our main index.html. It will load the AngularJS components <navbar> and <ui-view>

index.html

<navbar></navbar>
<ui-view></ui-view>

Now let’s set up the ui-routing in app.js.

Firstly make sure to include ‘ui-router’ in your module. Next pass in a function to config. Inject $stateProvider and $urlRouterProvider. Inside this anonymous function, we will list different states. ‘home’ is the name of the first state (this is what will be used in the ui-sref). Next, state takes in an object. There are a lot of possible properties that we can include in this object. url is the endpoint that if the user lands on, for example, mywebapp.com/, the template listed is what will render in the <ui-view> on index.html. So for ‘home’, when a user lands on mywebapp.com/, it will show the <navbar> and then the <home> component.

My second state is called ‘login’. When a user lands on mywebapp.com/login, <ui-view> on index.html will render what is in the ./client/login.html template.

At the end $urlRouterProvider catches the rest. If a user goes to mywebapp.com/ or mywebapp.com/jsgasldgjskd, it will go the url ‘/’ and default to that view.

app.js

angular.module('app', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider){
    $stateProvider
      .state('home', {
        url: '/',
        template: '<home></home>'
      })
      .state('login', {
        url: '/login',
        templateUrl: './client/login.html'
    });

    $urlRouterProvider
      .otherwise('/');
    });
  });

You can allow the user to change the view they see by having links.

When you make an <a>, instead of using href, you can use ui-sref with the name of the state you want your <ui-view> to change to.

navbar template

<a ui-sref="home">Home</a>
<a ui-sref="login">Login</a>

 

Manatee Mistakes: elements.classList is undefined

Welcome to another post of Manatee Mistakes where I go over a mistake I made and how I fixed it.

This time it’s about document.getElementsByClassName() and elementNodeReference.classList.toggle().

I wanted to toggle the elements with the same class name. I thought I could implement it similar to document.getElementById(). But it returns undefined.

For example:

&lt;div id="unique" class="one two"&gt;&lt;/div&gt;
&lt;div class="one two"&gt;&lt;/div&gt;
&lt;div class="one two"&gt;&lt;/div&gt;
&lt;div class="one two"&gt;&lt;/div&gt;

Using document.getElementById(), I can toggle an element’s class list:

var element = document.getElementById('unique');
console.log(element.classList);
// Will log ['one', 'two']

element.classList.toggle('three');
console.log(element.classList);
// Will log ['one', 'two', 'three']

I was familiar with the above, and I wanted to do something similar with classes.

I thought I could implement:

var elements = document.getElementsByClassName('one');

console.log(elements.classList);
// Will log undefined

Undefined? I was stuck for awhile why elements.classList was logging undefined. It stumped me for a little bit. I logged what elements was.

console.log(elements);

This logged:

[&lt;div id="unique" class="one two"&gt;, &lt;div class="one two"&gt;, &lt;div class="one two"&gt;]

Why was elements.classList not working? And logging undefined? Why was elements.classList.toggle(‘three’) not toggling?

Then it dawned on me that since elements is an array, you cannot toggle all the elements in the array’s classList at once. You need to do it to each individual element.

I figured out the solution. To toggle all the elements with the same class name, you would:

elements.forEach(function(element) {
  element.classList.toggle('three');
});

 

Manatee Mistakes: Error: listen EADDRINUSE :::8080

This edition of Manatee Mistakes is about the error I encountered:

Error: listen EADDRINUSE :::8080

I was running node (or nodemon to be precise) in GitBash. I thought my selected window was Sublime, so I pushed control + z to undo some typed text. However, I was actually in GitBash, and the control + z was executed in GitBash. This ungracefully closed my nodemon.

I started nodemon again, but I got this error:

Error: listen EADDRINUSE :::8080

(8080 was the port I was using)

Using Google, I found this Stack Overflow Q/A: https://stackoverflow.com/questions/9898372/how-to-fix-error-listen-eaddrinuse-while-using-nodejs

Answers gave several options, which were all for UNIX, but I’m on Windows 10 using Git Bash.

The kill -15 PortNumberHere trick did not work for me as the kill command is unrecognized in Git Bash on Windows 10.

However, it gave me a clue to end the process with the PID. Thus, I went to Windows Task manager and I found the PID. From the Windows GUI, I selected the PID and pushed “End Task”.

That killed the process for me, and I was able to use port 8080 again.

Node EADDRINUSE Error in Windows 10
Received the EADDRINUSE error in Windows? Go to Task Manager and select the PID you want to end.

Another work around would be to use another port. (But that process from the original port would still be open in the background).

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