Author Archives: admin

High Tea React App Deployed on AWS

I am inordinately proud of a React App I just built.

It is an update of one of the first Rails Apps I ever made, and that I still use to this day – my app to rate high teas.

This new version is a React app that pulls data from my old version via an API. I then deployed it onto AWS S3. The code can be found here, but some details that I want to point out are:

  • I was originally very bamboozled by how to set up a JS project, thus I recorded some notes here.
  • I used webpack to bundle it up, and then deployed the dist folder to an s3 bucket on AWS with: aws s3 sync dist/ s3://high-tea --acl public-read --delete --profile profileName 
Leave a reply

Setting up a JS project

I’m sure the instructions for this change all the time, but at the moment this is how I set up my latest JS repo.

To create the package.json file that will contain all the meta data for your project:

yarn init

Add a linter so that you can get into the practise of writing good JS

yarn add eslint --dev

Add webpack, which will bundle all your javascript, libraries and what you have written, into a single JavaScript file.

yarn add webpack webpack-dev-server --dev

Install babel, so that you can write in whatever JS you want, and browsers will be able to read it. E.g. you can write in ES6 and Babel will translate it for you.

yarn add babel-loader babel-core babel-preset-es2015 --dev

or

npm install --save-dev babel-preset-es2015

Then set up your .babelrc file to include that preset:

{
  "presets": ["es2015"]
}

Set up your webpack.config.js – making sure to include Babel details in it.

module.exports = {
  entry: "./src/app.js",
  output: {
    filename: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/, 
        loader: 'babel-loader', 
        exclude: /node_modules/ 
      }
    ]
  }
}

Finally, you probably want to ignore the node_modules folder with a .gitignore file.

Set up your HTML and JS pages
Create an index.html page and an app.js. Note that the html page shouldn’t call your
app.js file, it should call whatever is the name of your output JS file in your webpack.config.js. In this case it is ./src/index.js.

Run locally
Run your app locally using hot reloading

webpack-dev-server ./src/app.js --hot --inline

You can use your linter by running

eslint ./src/app.js

Adding React

I wanted to make this repo a React App, so I added React and ReactDom

yarn add react react-dom

Then I added the Babel preset

npm install --save-dev babel-cli babel-preset-react

And updated my .babelrc

{
  "presets": ["es2015", "react"]
}

To get started with React I referenced a ‘root’ div in my HTML and then imported React into my App.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
MyElementsGoHere
,
document.getElementById('root')
);

And this is what that repo would look like at that point  

Leave a reply

Props vs State in React

I’ve recently started learning React. The Facebook React docs are fantastic for getting started, highly recommend.

Before I went completely through the docs I was getting very confused between Props and State in React, but as I went through the Docs I learnt some things to help distinguish them:

Props

  • Passed down from parent to child
  • Both class and function components can use props
  • Props are read only, they cannot be updated

State

  • State is set up when you create a component – i.e. in a constructor.
  • Only components that are built from classes can use state, components built from functions cannot.
  • Unlike props, state can be updated
  • Reserved for interactivity – i.e. state is updated by user in put

Is it a state or a prop?  (from React Docs)

  1. Is it passed in from a parent via props? If so, it probably isn’t state.
  2. Does it remain unchanged over time? If so, it probably isn’t state.
  3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Passing information up and down the inheritance tree

You pass information down via props.

You pass information up via callback (event handlers). Read these docs on how to lift state up, i.e., pass state up from child to parent, by using callbacks

A note on initialisers:

From the React Docs

The constructor is the right place to initialize state. If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

Side note about what I’m building in React:

The project I’ve decided to work on is an evolution of my High Tea app. This was one of the first Rails apps I ever built, back in 2013. I haven’t worked much on it since then, but have kept it going and done a few tweaks just because, unlike other little apps I made, this is one that I actually still use. I keep updating it with all the new High Teas I go to.

So, I’ve decided to create a React front end to it, and develop some API endpoints for my old app, so that I can practice some React.

Leave a reply

How it looks matters

I’m not good at design, and for some reason I believe this is an innate thing that won’t change about me. I can’t imagine getting better at design, and I also don’t have the drive. (Example A, this website. Example B, my high tea app, and so on and so forth).

However, I have come to accept that I need things I build to look some basic level of decent, or no one will use them. I can take ages making a little site that does something amazing to some user input, but invariably when I show it to someone they will say something like “Can you make it look better?”, “Maybe put some images?”. And I’ll huff and puff and get annoyed and say – who cares what it LOOKS LIKE, look what it can do!!!

But, the fact is. People prefer things that look nice, and sometimes that look even makes it easier to use and understand.

I’m not thinking I’m going to get great at design any time, but there is this tiny tutorial I’ve looked at many times, and I’m posting it here to remember it when I need a reminder to make the design of my things just a bit less crap - http://jgthms.com/web-design-in-4-minutes/

Leave a reply

Why on earth would you want to be less tough on yourself?

When you make a mistake at work, in a social situation, with parenting, whatever, do you accept it and move on? Or do you beat yourself up about it?

Maybe you don’t even recognise that you’re being hard on yourself. You just think you’re showing self awareness and self-discipline. Maybe you think it’s normal to excessively dwell on mistakes you’ve made, and self-indulgent to go easy on yourself.

Continue reading

Leave a reply