React is a library (set of tools) built by Facebook to develop single page web apps.  What is a single page web app?  With a single page web app you can update content on the page dynamically without reloading the web browser, which makes it feel more like a desktop application.  This is in contrast to a traditional webpage, which needs to reload the browser for any change on the page.  Below you will find a practical overview of React and how to use it to build a single page web app.  This is not mean to show you a million ways to build a web app, but to show you some basic ways for the primary use cases of a web application.

Why would you want to build a single page web app?  If you are here reading this I assume you have your reasons, but here are the main points from my perspective:

  • Building a full web application can automate many types of process, business, personal etc.  This automation may be accessed from anywhere in the world on any computer or mobile device, and has the ability to scale up, unlike building a physical machine or brick and mortar business, that is very powerful.
  • Single page web applications have the potential to be much easier for your users/customers to use, which makes them more effective, in turn providing more value.
Tools

Here are important tools that you will want for React.  We will go over each tool in more depth later, but this is provided as a convenient list of links to their resources.

  • A computer, preferably a Mac because it has a Unix based operating system, which many programming tools are geared for, and how everything will be presented on this site.  Could use a Linux computer as well.
  • Digital Ocean A web host for a server (third party computer in a distant location that you do not own).  I have been using Digital Ocean with ubuntu servers.
  • React website
  • Create React App
  • React Bootstrap
  • React Router
  • Cloudinary
  • Postman
  • Robo 3T
  • Atom
Skills

A list of useful skills:

  • Unix terminal navigation
  • Unix permission changes on files
  • Javascript ES6
  • HTML
  • CSS
Basic Functions

Essentially CRUD - Create, Read, Update, Delete:

  • Display static information
    • hard coded
    • from database
    • text
    • images
    • video
  • Display of dynamic information
    • hard coded
    • from database
    • text
    • images
    • video
  • Navigation
  • Input from user
    • text box
    • button
  • Upload
    • text
    • image
    • video
  • Search
  • Users
  • Login & Password protection

Under construction, more to come.