React Tutorials and How To's

Background

React is a javascript framework that combines templating, rerendering during user activity and reusable components. We've chosen Material-UI as a CSS framework to give us a functional, responsive and modern website without having to create the web components ourselves. While Material-UI provides building blocks for us to use material.io is google's open source design system which has best practices for using material.

I suggest reading about all 3 before jumping in. https://reactjs.org/ https://material-ui.com/ https://material.io/

Setup

To write React code you need Node.js and your favourite IDE or text editor. I'm biased towards Visual Studio Code for javascript development (https://code.visualstudio.com/)

Node and npm Installation

Windows: Install node from here: https://www.npmjs.com/get-npm.

Linux: Install node with instructions from https://github.com/nodesource/distributions#installation-instructions

e.g.

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install -y nodejs

Where the setup version should match the version on the first line of the Dockerfile (e.g. For version 10, this was "FROM node:10-alpine").

Starting Out

If you're new to React I would suggest doing the tutorials on their website. There's a Hello-World doc that goes through the features of React and makes a handy guide later here: https://reactjs.org/docs/hello-world.html. There's also a tutorial here: https://reactjs.org/tutorial/tutorial.html though jumping into Material-UI's many examples can also work. https://material-ui.com/getting-started/learn/