React.js Basics (for starters and Angular Developers)

Introduction

JavaScript world has seen some great libraries, frameworks and practices throughout its history.

Jquery is one of the great library when it comes to JavaScript development.

Everyone knows popularity of jQuery and the ease it provides to build rich client-side applications. Later, jQuery UI was developed and jQuery plugins eco-system resulted in great many plugins and reusable code which is still in use even today by many websites across the globe.

However jQuery UI, reached to its final release in2019 and project is now in a maintenance-only state. As per post on official blog, jQuery UI team will make sure the library is compatible with new jQuery releases and that security issues are fixed but no new significant feature work is planned.

The project is now with OpenJS foundation in Emeritus stage category, which is for projects which have completed their lifecycle and are retired.

Change is sometimes not that pleasant. Years of learning and mastering a tool and it just goes away, not that easy right?

Well, change is not that bad either. We saw KnockoutJS rose to popularity with its two-way data binding approach and was appreciated by developers as it let us clean up some jQuery selectors intensive code and was followed by AngularJS.

AngularJS then lead to Angular2 and naming alone confused people for few following months. Eventually, it was cleared up and world moved on.

Angular is a great framework for building web applications. I myself, have used Angular for many projects.

However while Angular is a framework, React is a library and based on your requirements, you may find one better or the other or it may be due to some personal taste or application needs or development team preferences etc., we are not going in to those debates of which one is better Angular or React etc.

Here we will will just try to cover some react basics and see how we can start using react for our web development projects.

React – Getting Started

React is a popular framework for developing web applications. It was created in 2011 by Facebook and was open sourced in 2013. React Native was open sourced in 2015.

React is a declarative way to build User Interfaces. It is component based and promotes reusability.

Each React component is a separate concern.

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

React is less opiniated than its competitors. It’s a library, not a framework. While Angular/Ember/Vue.js are frameworks.

React has three simple and fundamental concepts you need to understand and which drive its popularity.

1. Component

Components are used to define user interfaces.

You can think of components as simple functions in any programming language.

Typically in programming languages, we call functions with some input and they gave us some output. We can reuse functions as needed and compose bigger functions with smaller ones.

React Components are exactly like the functions. In React components following are input and output:

• Input:
  • Props, State
• Output
  • User Interface

One thing we said that react components are like functions. However, unlike functions we do not invoke react components. We just simply use components in HTML, like regular HTML elements.

In react we work with components using their input properties and state (input) and a component output is a description of a user interface which is similar to HTML.

• Components are reusable and composable.
• Can manage a private state.

React components can be of two types:

• Function Components
• Class Components

Both types can be statefull and have side effects or they can be purely presentational.

Function components are simple. Class Components were commonly used.

2. Reactive

When the state of the component, the input, changes, the user interface it represents, the output, changes as well.

3. Virtual Views in Memory (Virtual DOM)

React depends on JavaScript rather than enhancing HTML (e.g. Angular).

React performs tree reconciliation to write only different HTML in DOM.

Props and State

The prop input is an explicit one. It is similar to a list of attributes an HTML can have.

The state input is an internal one, but is really the more interesting one because how react uses it to reflect changes in the browser.

These two input objects have one difference within a component:

• state object can be changed.
• props are immutable.

components can only change their internal state, not their properties. This is a core idea to understand in React.

Setting Up React Application

Using create-react-app CLI and ES6 is a common practice to start with react application.

The fastest way to get started with React is using Create React App (CRA) generator. This will generate a fully-functional React app with many common features built-in like Babel, Webpack, Jest, and a hot reloading development server.

The following command will setup a react-app shell.

npx create-react-app my-react-app

Another way is to just install the packages via npm as shown below and manually setup your environment.

npm install react react-dom

There are planet of different ways to setup your development environment. If you like, you can use online playground to experiment without needing to setup your own environment.

I however am using ParcelJS for some of my front-end projects. Here is the link to ParcelJS website to show how to setup react.

So I installed the react and react-dom packages using npm install react react-dom .

Next, wrote the following code inside a JavaScript file:

Rule: A react component name has to start with an uppercase letter. Capitalization is not optional.

Next, Introduced a div root on the HTML page which will hold our react application:

and then wrote following code in the JavaScript file:

So, we imported React libraries, wrote a simple function component called App, which is returning some HTML like structure (JSX) and then get the reference of DOM element (root) by its Id and then used the render method and passed the App component and the target div to it.

So, once we have all this place and if the development-server is running, you should be able to see the results. Here is how it is shown on my side.

(Note, I have an application-shell and styling setup for my demos. I am rending react application inside this shell, you can just use simple index.html page for testing purposes or if you used create-react-app, it will have index page etc. setup for you.)

Ok, the red border box, shown above, is the output of our react code.

So App is a react component. In this example, it is a functional type component (here it is mostly presentational). Inside the component we are returning some simple HTML like structure (actually it is JSX, more about it later). We then used ReactDom.Render function to render this component to DOM.

Getting Started – React is a good place to check for an overview of the React documentation and related resources. There are couple of easy to follow tutorials directly available on the home page of reactjs.org, it will help you put together a very simply app in minutes and will give a taste of applications development with react.

Here I’ve created few simple react components using the sample on reactjs website and then used those on the page as shown below:

Here is how the web-page looks like:

Tips

• Avoid class components if possible – Fast Refresh only works with function components (and Hooks).
• Export only React components – If a file exports a mix of React components and other types of values, its state will be reset whenever it changes. To preserve state, only export React components and move other exports to a different file if possible.
• Avoid unnamed default exports – Declaring components using a default exported arrow function will cause state to be reset when it is changed. Use a named function, or assign the arrow function to a variable instead.
• Keep entry components in their own files – Entry components should be in a separate file from the one that calls ReactDOM.render or they will be remounted on every change.
• Install react developer tool extension for your browser( e.g. chrome extension).

Summary

React is a great library for UI development. Its very popular and once your understand its design concepts, then its mostly JavaScript.

Starting with react is simple and there are great many resources available online to help you begin this journey and then gradually take you to the next level.

I myself had no difficulty in learning those concepts and actually Angular background was assisting a me lot. For example angular also have a concepts of components, which are self contained building blocks and this is very similar in react on conceptual level.

I will be sharing more about my react journey in coming post and will also encourage you to give it a shot and I am positive that you’re gonna like it a lot.

We will cover more of the react in upcoming posts. Till next time, Happy Coding.

My Recent Books