React.js Basics – Part 2 (for starters and Angular Developers)

Introduction

In previous post on this topic, we started with the basics of React.js .

We learned that, React is a JavaScript library to create and compose components. Writing a react app is creating components and putting them together.

Each component has a name and three distinct characteristics:

• Props: Component can accept input from other components by using props. In JSX, these are written like HTML attributes.
• State: Components can maintain an internal state.
• Render: Component knows how to render itself.

We also learned that we can use create-react-app tool to setup a bootstrapper application. However, for our demo purposes, I am going to setup a basic environment without that tool.

Setting up Application Shell

I have setup a git repository with some packages installed like bootstrap, parceljs, react, react-dom etc.

Here is the initial structure looks like.

index.js file is the entry point for our application and here how it looks:

and here is how it currently looks in the browser:

Now, we saw a basic todo application example in previous post, I have moved that code in this repo:

and here is the updated index.js file, which renders TodoApp:

and the browser update is:

With this our basic application shell is done and we will extend it as needed. I will be using this application setup for other upcoming posts as well.

(Note, I am using PacelJS as a bundler and have written few posts on its usage. So you can check those posts if you are new to ParcelJS. You can use any other bundler as you see fit.)

I have setup a git repo for these demos and you can download the source code from this git repository.

Furthermore, this is not part of react learning, but I am writing on AWS topics as well, so I’ve setup a static website where I’ll be publishing this react app (as we progress) and you can check it on the following URL:

https://reactpage.awsclouddemos.com/

Development Tool

As part of development environment setup. I’ve installed React developer tools (chrome extension and simple react snippet for visual studio code. I will be using visual studio code for the exercises.

Thinking in React

Ok, with this environment setup, we can start exploring react a little bit more.

One of the great resource we can check, mentioned on React official website as follows:

Many React users credit reading Thinking in React as the moment React finally “clicked” for them. It’s probably the oldest React walkthrough but it’s still just as relevant.

I’ll highly recommend to read this article, as this will provide a very good jump start for this learning path and for our practice. So, go ahead read the article and next, to solidify our learning, we can build something very similar for our exercise.

Exercise

We will build a react components to show vehicles data in a table:

it is a very basic example and I have following resources created:

so vehicles data is available from fleet-data.js file as shown and vehicle-data-service just read this data in JavaScript objects. Now, this data is static, but it can come from some web API as well. But we are ok with static data for this exercise.

Here is how we can work with these objects:

and how the data looks:

So far vanilla JavaScript and at this point, we have vehicles data available and next we will display it using a react component.

React Component

If you have already read the article ‘Thinking in React’ mentioned earlier, it shall be very straight forward to build such components.

I have build following two components:

• VehicleTable component
• VehicleRow component

and here is the VehicleRow component, which is child of VehicleTable:

and here is how it is rendered:

and here is table output:

You can also see the deployed application on this URL.

Now, you can download the code, change it, add may be a search control etc.

Summary

In this post, we continued our journey and setup a basic application shell to help us exercise React development.

There are some great resource available online and I will share more of those with you as we progress. Feel free to share some links, which helped you learn react easily.

We also build a simple data table which displays static vehicle data.

For Angular developers, component design is almost the same concept. HTML (JSX), however is being handled differently in react, but this is not that difficult to grasp and with more practice, this will come natural to you.

The way we used static data is very general in JavaScript and overall I find it easy to follow building components in this way.

We will cover some more in coming days and build on top of what we covered.

Let me know, if you have some questions or comments. Till next time, Happy coding.

My Recent Books