I wanted to write another Single Page Application, this time in React. I made an app that displays my latest online activities and put it on my portfolio site.
Take a look at the result: http://henrik.laueriksson.com/latest/
Take a look at the code: https://github.com/hlaueriksson/latest
You can also compare this with the previous post on Angular 2.
React was released more than 3 years ago and has proven to be quite popular.
Read the docs at: https://facebook.github.io/react/
React apps consists of:
- (You can also use TypeScript)
Visual Studio Code Extensions:
Create React App
To make React development less painful, use the Create React App tool.
Read the docs at: https://github.com/facebookincubator/create-react-app
To get started you need to install:
With Create React App you don’t need a build script or a task manager. No need for Gulp or Grunt anymore!
Here follows the account of what I did to write my “Latest” app…
Generate a new project with
- create all files needed to get started
- install npm packages
react-scriptsis a development dependency
Run a development server with
Then you can browse
Run unit tests with
After generating the project, the actual coding began…
The app displays my latest activities on:
- My blog
The Instagram API does not support CORS, so I could not access it directly from the React scripts. I ended up creating my own API as a proxy. It’s a ASP.NET Core Web API based on CommandQuery.
The API provides convenient queries for the React app to get my latest:
- Blog post
- GitHub repo and commit
- Instagram photo
Take a look at the code: https://github.com/hlaueriksson/latest-api
The API is hosted on Azure: http://hlaueriksson-latest-api.azurewebsites.net/api/query/
- The development server runs with a file watch. Just save the file you are working on in the editor. The code is then compiled and bundled. The browser reloads automatically. This is awesome!
- Tests end up in the same folder as the production code. It makes it easy to navigate the editor.
- Components can have their own CSS files. This makes styling very modular.
Build a prod dist with
npm run build:
I needed to specify the
package.json, because I’ll host the app in a subfolder on http://henrik.laueriksson.com/latest/
A really cool feature is direct deployment to GitHub Pages. I didn’t try this, maybe next time.
React vs Angular
React feels more lightweight than Angular. It does one thing really good. For the stuff that it does not do, use other libraries.
The Create React App tools is very similar to Angular-CLI. Actually it’s the other way around, Create React App is older.
Create React App does not provide:
- Code generation
- Dedicated end-to-end test script
- Dedicated lint script
- Git chore
Well, that does not really matter for me. The code was pretty easy to write by hand. There is also extensions for Visual Studio Code for that.
I like React more than Angular and I will probably use it again in the future.
Try React! You will learn something new if you are a backend developer like me.