React Demos – Episode 1 – Setting the Scene

Introduction

I’ve been using Angular for most of my frontend development activities.

However, I started exploring React as well, liked it well and wrote few posts about how to get started with it. You can check those posts in the related post section below.

Here my intention is to focus more on the practical usage of react by building various small demo projects. We’ll cover some theory as well along the way.

But, before we do that, we need to setup the stage. A starting point, for this learning journey.

In this post, we’ll take first step and create a react application using create-react-app. Further posts will cover different topics in an incremental manner and we’ll learn as we progress.

Lets start with a quick recap of React

• React is declarative (it describes the UI).
• React helps bring structure through components.
• React is component based. Each component is a separate concern. Think of component as simple functions in programming languages.
• React doesn’t really have the concept of a page. What the user perceives as a page is just composition of components.
• Components are little Lego pieces that give us more control how future user interfaces are implemented.
• A React component is a function that converts a model object into a pieces of user interface, that’s it.
• Two type of components are
  • function components (‘this’ not needed)
  • class components (complex, need to deal with ‘this’ and also need to ‘bind’ methods.)
• function components are recommended, however we may use class syntax occasionally.
• function components in combination with hooks enable straight forward components creating structured apps.

Core React Features

• Structure with components (reusability, have state).
• UIs declared in JS (rendered output changes when state is updated).
• Efficiency with reconciliation (only updates the part of the UI that changed).

Why Components in React

“A ship, a building and a car are merely collection of components” — Fedrio Holgado

in the same way “a modern web application built in react is merely a collection of components”.

Lightweight

• Just a component library.
• Can “sprinkle” on lagacy apps.
• 43K, Inferno is 9K, Precat is 3K.

Community

• Over a dozen mature component libraries.
• Over 20,000 components at facebook.
• Used by Walmart, Netflix, Airbnb, Reddit etc.

Stability

• Facebook rigid testing.
• Community supported.

Flexibility

Flexibility is another compelling reason to choose React. Once you learn it, you can build user interfaces for a huge variety of platforms and use cases.

React Architecture

Following diagram shows react architecture

React components

• props: are explicit, similar to HTML attributes
• state: is internal, state can be changed, props can’t.
• All React components must act like pure functions with respect to received props.
• elements that represent DOM tags are written in lower-case.
• user-defined elements/components must be an identifier starting with a capital letter.
• All props values and internal state is actively monitored by react.
• React re-renders a component when a prop or state value changes.

Component Life Cycle (Class components)

We’ll not be using class components that much, but there is a lot of react code written using class components.

React class components allows you to override lifecycle methods

• mounting:
  • constructor>ComponentWillMount>render>ComponentDidMount
• updating
  • CompponentWillReceiveProps>ShouldComponentUpdate>ComponentWillUpdate>render>ComponentDidUpdate

Hooks

React hooks adds the ability to manage react state and interfaces with react lifecycle events in functional components.

With react hooks, you never have to worry about the keyword ‘this’ again.

Detailed information about hooks can be checked on official website by visiting this link.

useState

This hook lets you add React state to function components.

useEffect

• useEffect enables us to create side-effects to functional components.
• You can think of it as very similar to ‘componentDidMount’, ‘componentDidUpdate’ and’componentwillUnMount’ in react class components but unified into a single API.

useRef

Primary used to allow access directly to an element in the DOM.

• Refs are ways of accessing underlying DOM elements that are wrapped by React components, so that, you can imperatively modify them. There are kind of a tool of last resort.
• Use React.CreateRef() method.

Setting The Scene

Lets start by creating a React app using CRA package as shown below

npx create-react-app myappName

above command will setup development environment and few files as starting point for the new application. We can open the folder in VS Code

open a terminal and run the following command to start the development server

npm start

It will open a browser and we’ll be presented with a simple page.

Add Bootstrap styling

Following screenshot shows to add bootstrap styling to the application.

Here I’ve copied the bootstrap css file and then reference it in index.html page as shown below.

Setting Up NavBar

Following screenshot shows the a very simple NavBar component, which is using various bootstrap classes and JSX

and here is the output

Installing Font-Awesome

We can install font-awesome package using following command

npm i font-awesome

and then add it to the application as follows:

React Router

Routing is a common concern in web applications. It routes users to destination.

React Router is a fully-featured client and server-side routing library for React. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native

npm i react-router-dom

Next, updated the index.js file with BrowserRouter entries as shown below

Next, we need to do a little setup for actual routes and React components for these routes in App.js file as shown below

In the setup above, we setup two routes, one for Home component and the other one is a NoMatch component. The root URL is linked with Home component.

Here is how the webpage currently looks like:

and if we enter some non existent route, it will show the NoMatch component as expected

Lets add another component (Misc) and corresponding routing:

Now in the NavBar component, we can add a link for this as shown below:

with these changes in place, we can see that routing is working as expected

These are currently very simple components (kind of a place-holder). We will add more routes and corresponding components in later posts.

Code Repository

You can download the source code from this git repo .

Summary

In this post, we started with a basic introduction of React and created an application using CRA. We also added bootstrap styling and font-awesome icons to the application and created a very simple Navbar.

We added routing to the application and created couple of presentational components to associate with routes.

We haven’t seen the React components code much, but we’ll deal with those later.

We’ll continue our learning in next posts. Let me know if you have some comment or questions. Till next time, happy coding.

Related Posts

• React.js Basics (for starters and Angular Developers) – Part1
• React.js Basics – Part 2 (for starters and Angular Developers)
• React.js Basics – Part 3 (for starters and Angular Developers)
• React.js Basics — Part 4 (for starters and Angular Developers)