React aka Reactjs

React aka Reactjs

So last week I did a little example app following instructions by Brad Traversy. To give credit where credit is due, I have linked his video right here in my post. I'm going to share the gist of what I learned here as part of this post. Because sometimes, you might just want to get an overview, you may not want to get hands on and start coding. This is a very high level overview of some of the concepts. And the source code can be found in my github repository.

The video by TraversyMedia covers the concepts in much more detail. So I highly recommend watching it if you are in for more detaails.

This post is just about giving an overview of some of the key concepts introduced as part of the course.

https://www.youtube.com/watch?v=sBws8MSXN7A

ReactJS Crash Course (2019)

What is it?

Confused What Is It GIF by Kim's Convenience https://gph.is/g/E3mKjmO

React/React.js/ReactJS is a front-end JavaScript _library _for building user interfaces for client side applications. Although, it was created by developers in Facebook, t is open-source and currently maintained by not just Facebook but also those amazing developers who contribute to open source projects in their free time.

Although a lot of people call it a framework, React is technically a library. The more react libraries you use, your project could be summed up using React framework. But every aspect of React front end development requires different React libraries. I also think that people call it a framework because they mostly compare it with other frameworks like Angular.

Why use React?

snl season 44 GIF by Saturday Night Live https://gph.is/2RTa3La

There are several reasons why one would choose to build an app using React.

Firstly, it is pretty easy to learn compared to learning an entire framework to get started. If you have already done javascript based development, you'll feel right at home. You are pretty much writing code in Javascript. So there is a lot of Javascript experience you can transfer that way.

One of the main reasons, front-end development got popular is because of the need to build applications that are feature rich but is served through a browser. That means, the DOM is continuously manipulated based on user interaction or events or other factors. Manipulating DOM is an expensive operation and will especially slow down the page of the web app and cause terrible user experience if done poorly.

To explain this in detail, let us take an example of displaying a list of items. A lot of UI frameworks out there, are able to render lists. However, when you click and select an item in the list, some of the frameworks render the whole list again, although really quickly, it is still rebuilt despite the fact that only one element had to re-rendered, the cost of this could increase based on the size of the list.

Virtual DOM

virtual GIF http://gph.is/2cX4Dch

React deals with this problem using something called a Virtual DOM. The reason DOM manipulation is expensive is because all the changes to the DOM have to re-rendered on the screen. React's use of Virtual DOM however, reduces this cost, by having an object representation of the DOM which can be manipulated behind the scenes, without having to render the entire set of elements on the site. This technique of having a Virtual DOM have been used by other frameworks too but React is basically designed around it.

  • React keeps track of Virtual DOM objects - which are mapped to the actual DOM elements * Every time something changes, React _diffs _the changes with the previous state of the element * Re-renders only the bits of the real DOM that have changed

You can read more at React Kungfu.

React is all about modularized UI components so it is pretty easy to create modularized applications, unless you are an absolutely keen on doing the opposite, which I hope you are not.

Where is the code?

You can find the source code of the app on github.

Brad's idea of building a Todo List app for learning React is a brilliant idea. I cannot think of a simpler or better way to get started on a framework like this.

screenshot of the todolist app

In order to create a react application, you can start by creating a directory and installing the relevant libraries manually. But there is always a quicker way to do this.

Use Create React App.

Because the project was created this way, the README file is mostly populated with instructions on how to run the app locally and this is super useful, especially if you are a full stack developer but not constantly working on the UI. It is easier to get back and remind yourself of what has to be done to get back on track.

Prerequisites

Let's go through the process of getting from creating the folder to getting to a functioning app.

Create the folder structure

After you get npm installed, create a directory and run the following:

npx create-react-app your-favourite-folder

npx is an npm command. It executes the binaries of the argument without having to download the entire library first, although it downloads everything behind the scenes. You can use this to run popular npm tools that you don't necessarily need in the project, but could use to get some cool stuff done.

What got installed?

Taking a quick look at the package.json

Libraries needed for development:

  • react - the core react library
  • react-dom - the thing that interacts with the dom - virtual dom stuff
  • react-scripts - webpack things wrapped under this one

You can also see that the scripts section is updated with a set of easy to run commands to get started with react.

public directory

This is where you'll find the landing page, index.html

As you can browse to the index.html on github - you can see that on line 21 there is this line

The root div

The entire react app is rendered inside this div.

This is where the react app is loaded while you run the app.

Let us take a look at the code. Go to index.js

This file is responsible for loading your app inside the index.html file.

Render the App Inside the root div

Most of your components generally go inside the src folder, you can determine how you want group your code inside this components folder. It is completely upto you.

What are the components in here?

  • App - the parent component
  • TodoItem - represents an item in the TodoList
  • Todo - represents the TodoList - it just renders every TodoItem
  • AddTodoItem - A component that lets you input new TodoItems
  • Header - A component to render the Title and links

Building a UI Component - Intro to JSX and other concepts

Jason Voorhees GIF by memecandy not jason x

UI components are written in files with a js extension but these weird files with JS and snippets of HTML are called a JSX file. If you have have built applications using ASP .NET or JSP or PHP you are probably familiar with this sort of a special file, which is populated with some server side components. But this one on the other hand, is fully rendering UI elements.

App class

The app class

Our primary component, the App component is a class that extends the Component class in React. Every component class has a render method that has the code required to display the app, which can refer to other components too.

The render function after the demo Todolist app is fully built

If your component is pretty simple and doesn't have any state associated with it, then you can pretty much just write it as a function that returns what has to be rendered.

When you run create-react-app, this is how the app.js looks like

Fragments

Fragments are a special concept in react that lets you group multiple elements without adding extra nodes to the DOM. These days, cool kids, use a Short Syntax to write these special elements.

Fragment that groups, other components like AddTodoItem and Todos

Props

Inputs to components are called props. So in the earlier screenshot:

AddTodoItem takes addTodoItem as a prop which can be accessed within the AddTodoItem component to do whatever you have to do with it

In the above example screenshot, addTodoItem is a reference to a function in App.js.

You refer to the input passed into a component using this.props.inputParamName where inputParamName is the name of the input you param you just passed in.

State

Components can hold some state information. In a highly interactive feature rich app, there might be multiple components that have to communicate changes to its state based on user interactions. This is exactly what the state is for.

**State **and **Props **are both parts of the application that gets modified by the components. They are simple javascript objects however, State is private to the component, it isn't exposed outside the component for modification directly. Whereas props are essentially input to the component.

AddTodoItem - has the state that has a title propery

AddTodoItem File on Github

Similarly it takes in a props by the name addTodoItem which is a reference to a function in its parent component

States are to be considered immutable - meaning, everytime a part of the state changes, you basically create a new object cloned from the previous state. This is crucial to make it easy for you to understand changes happening to the state overtime.

Route management

React being a library that primarily helps build single page applications, it is important to manage navigation between different parts of the application. Every time a user clicks on a link, a different component is rendered in the index page under the appropriate route.

For this you need to install react-router-dom.

Routes are generally declared in your main App.js and different components are rendered inside different route specifications.

two routes - / and /about

Two different routes - / and /about render different set of components. The root, loads the react fragment containing the AddTodoItem and the Todos, whereas the /about loads a simple About component.

exact keyword for Router

The exact keyword, ensures that that routes elements are only rendered when the uri exactly matches /. Without this, the UI would render both routes together as the /about also has / in it.

Routing, seemed to me as a simple pattern match of the url. But I hope the earlier screenshots give you an idea of how simple the routing is. Of course, I haven't come to passing input through routes yet.

HTTP

In todays world, most of our apps, are built with some sort of API interaction. So it is crucial that we have the ability to render ui elements that are populated with data fetched from a web api.

React doesn't dictate what you use for HTTP interaction, which is great, because you can use your favourite http client library! I say this because, when I was learning Angular 2 years ago, was the first time I had to learn RxJS. Reactive programming is an entirely different paradigm and with little experience, it is a bit hard to get your head around the concepts. This can slow you down. However, we all make regular requests using HTTP and promises are simple to understand and definitely simpler than event streams to program around. Hence, it helps you get on track faster.

So in the TodoList app, I have made use of axios, a library that brad suggested. But any http client that lets you do all the HTTP requests based on a Promise, would be a good place to start.

Axios inside a lifecyle method

axios in action inside one of the lifecycle methods - https://github.com/lonelydev/react-todolist/blob/main/src/App.js

Other stuff

While following along, I learned a couple of other great things.

Two nifty apis that can be used for creating fake backends.

What next?

I will cover other more details as part of a different post. But for now.

thats all folks GIF http://gph.is/2bXpOHM

comments powered by Disqus