This is the first part of a multi part tutorial on getting started with a new application.
This tutorial covers:
- the workflow of developing a React app at JCU
- getting your tools and environment set up
Workflow
JCU uses the React framework to build most of our interactive web applications. React is a JavaScript library. It focuses on making it easy to describe user interfaces in a declarative way, and quickly rendering those interfaces in web browsers.
Modern web interface development uses a build step, to allow developers to work in productive modern JavaScript and compile that down to the less powerful Javascript implemented by browsers. A build step also allows a number of other efficiencies to be build in to the code that ends up in users' browsers.
We use Create React App, a setup created by the React team, to manage the build process that puts React apps together.
The usual workflow is this fairly common software development path:
is an action you take ---> L2 L2((" ")) -. dotted line:
happens automatically ..-> L3 L3((" ")) end subgraph LDC["Local Development Cycle#nbsp;"] APLAN(["💭
Have a plan"]) --> CODE CODE(Write some code) --save--> TOOLCHAIN TOOLCHAIN("React + CRA + Node
⇣
Development Server
⇣
Your local browser") -.-> DTEST DTEST{Developer Testing
is it working?} --NO--> CODE DTEST --YES--> COMMIT COMMIT(git commit) --> DEVAL DEVAL{Developer Testing
Is it ready
for users?} DEVAL --NO
needs work--> CODE DEVAL --YES--> GoUDC(["go to 🢂
User Development Cycle"]) end subgraph UDC["User Development Cycle#nbsp;"] ACODE(["𝍌
Have working code"]) --commit--> BB BB("BitBucket
⇣
Jenkins
⇣
Artifactory") -.-> DEPLOY CFGREPO("Config repo
(in BitBucket)") --update version--> DEPLOY DEPLOY(Jenkins) -.deploys.-> APPHOST APPHOST(App hosting) --> UEVAL UEVAL{User Testing
Does the feature satisfy?} --YES--> RELEASE UEVAL --NO--> DEVMORE(["🢀 Back to
Local Development Cycle"]) RELEASE(["💙
Schedule release"]) end end
You need a command-line environment with Node and git
You'll need a version of Node.js you can run at a command line. If you don't have that already, this section gives you one way to get there.
on Windows
Recent versions of Windows 10 support WSL (Windows Subsystem for Linux) which is great for getting a "proper" bash command line for development.
There's a great Terminal program from Microsoft.
Once you have WSL installed, add Node. At time of writing the best way to get Node is to follow Microsoft's WSL specific instructions.
You may already have git since it's included with WSL Ubuntu and most other flavours of WSL, otherwise you can install git by following these instructions: https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-git
on Mac
Macs come with a proper terminal and a version of git already (although recent versions default to zsh as the shell rather than bash, yuck). All you need to do is run an official Node installer.
Are you ready to continue?
If you're setup correctly, you will be able to get to a command line, run the command below, and see something like the result shown:
71WW992 ~ $ node --version && git --version
v12.6.0
git version 2.20.1
You need an editor
Most people use either Microsoft's VSCode (free), or IntelliJ IDEA Ultimate (licenced). Install either of those and you're ready.
| Next >> | |
|---|---|
| Customising The Template |