React is one of the most popular front end web frameworks and is something I've wanted to learn for a while now. I recently had some down time and decided to finally learn it. I started my journey to React about two months ago with the goal of learning core React and building a simple app to validate my knowledge. In this post, I will describe my journey and initial reactions from the perspective of an Angular developer.
My first task was to determine how to learn React. After some preliminary research, I discovered that there were two ways to build components in React; the class method or the functional method. The former is the older more established way of building React components. The latter method is relatively new, but appears to be the preferred method going forward. I chose to learn the functional method. There are not many books on building React apps using functional components to chose from. I picked Learning React from O’Reilly. The book started off good, but I kind of got lost about half way through. I decided to switch to the official React beta documentation, which turned out to be excellent! Even though it was beta, it appeared mostly complete. The challenges at the end of each section were also very helpful for applying the concepts in practice.
For my first React app, I chose to re implement a timecard app I built in Angular a few years ago, with a small enhancement. I originally built the app to help me track my time on various hourly jobs. The app allows me to punch in and out of jobs and has a cool feature which displays updated totals for time and money every second. This initial version used the browser’s localstorage for data storage. For the React version, I plan to use IndexedDB, which is a key/value style NoSQL database inside the browser.
Project setup was very easy with Create React App. This tool generated my project directory with a placeholder App component and start and build scripts. It is similar to running ng new in Angular CLI. I wanted to use TypeScript in my React project so I added the typescript template parameter when running the create-react-app command. I was able to open the project in my VS Code editor and use syntax highlighting and auto completion without additional plugins.
React feels simpler, less verbose, a bit more low level and less abstracted than Angular. There is no two way data binding, forms abstractions, or dependency injection. Each component is defined using a plain JavaScript function encapsulating state and event handlers and returns a view written in a HTML like syntax called JSX. The life cycle of a component is also very simple; whenever the state changes, the view re renders itself. Side effects like making HTTP requests or invoking browser APIs cannot occur during the rendering. They can only occur in event handlers or special functions called effects which can be configured to run on component load or when any subset of the component’s state changes. React does include built in support for reducers to centralize the management of application state and state changes, but I did not find them very useful because they lack support for triggering side effects in response to actions like in NgRx effects. React does have a very useful third party component library similar to Angular Material called MUI which I used to make the app’s UI look nice.
I finished building the app in about two weeks and deployed it using Azure's Static Website service. The app is live here.
I enjoyed building my first React app and am happy to add React to my front end development toolbox. I plan to use it in future projects.
