React Fundamentals

React Fundamentals

By |2018-07-03T11:17:43+00:00June 29th, 2018|Categories: Front-end Development, Programming, Web|Tags: , , |0 Comments

The web has become the dominant programming model of our time, but building rich web applications can become extremely complicated and now a day the need to create reusable UI components is more needed  and React was built to solve one main problem: building large applications with data that changes over time and to simplify the process of building complex UIs.

ReactJS Overview

In this article React Fundamentals, you will learn foundational knowledge of React. First, you will learn how to structure an application out of components and how to build those components with React. Next, you will discover JSX syntax and how to use it to connect React components together. Finally, you will explore application state management with Redux. At the end you will have the skills and knowledge to build a maintainable user interface with React.

Prerequisites to use react :

Before you dive in you should be familiar with JavaScript and web development.

JavaScript basics

  • Declaring variables
  • Creating and invoking functions
  • DOM the Document Object Model (basically how Javascript Talks to the Browser)

ES2015

  • Class syntax
  • Arrow functions
  • spread operator

Here in TreeNodes Software Development , we hope you can join us to learn more about how to build successful UI’s components using React so let’s get down to business.

Introducing React

There are some amazingly powerful client-side web-interfaces libraries/frameworks out there as they are evolving fast and free some large frameworks cover the entire client-side requirements such as AngularJS, BackboneJS, MeteorJS and EmbreJS.

React mainly focuses on the rendering and event handling of client-side user interface components and it depends on the developer to choose other specialized components to complete their application. It gives the programmer the flexibility to achieve the business requirements of the project.

How was the idea to develop React conceived ?

Short: Conceived at Facebook. Heavily used on products made by Facebook and Instagram. Built to simplify the process of building complex UIs.

The story of React started within the confines of Facebook. React was created by Jordan Walke, a software engineer at Facebook. Jordan deserves all the credit for creating React. He was influenced by XHP, a PHP-based component system that is still in use at Facebook, but also by functional programming ideas.

Pete Hunt wanted to use React at Instagram, so he helped to extract React from Facebook-specific code. This prepared React to be open sourced.

Later, Facebook put a team of engineers behind React and also received great contributions from the open source community. Significant contributors include Sebastian Markbåge and Ben Alpert, among many others. Source

Sites Using React

Facebook, Instagram, Dropbox, NETFLIX, Airbnb, PayPal and More.

To understand some of the concepts under which React operates.

  • Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Source

I.e React is the V (View) in MVC that is used to render views like HTML pages dynamically based on some Props/state, which is often in the form of data. React then updates the generated views whenever the original state changes.

Declarative views make your code more predictable and easier to debug.

  • The virtual representation of views in memory

For the browser’s case, we write HTML using JavaScript in React relying on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. Enhancing HTML is what other JavaScript frameworks usually do (for example, Angular.js extends HTML with features like loops, conditionals, and others). Source

  • Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs. Source

Since component logic is written in JavaScript instead of templates(Such as AngularJS), you can easily pass rich data through your app and keep state out of the DOM.

  • Learn Once, Write Anywhere

You can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

In order to write your first react components you have to be familiar with some of the features react offers like How to:

  • Write React components
  • Render data to the page
  • Communicate components i.e pass data from one component to another?
  • Handle user events
  • Capture user input
  • Talk to remote servers.

Now that we know what React is and what you have to cover to write your React first component. Let us look at the advantages and disadvantages of React, While React is a general purpose browser application UI library, it might not be suitable for every project or team so it is useful to understand the high-level differences between major libraries so why not contrast React with its major competitor, Angular. So let’s start first things first,

What is React?

React is an open-source JavaScript library for creating rich user-interfaces that run in user’s web browsers. It focuses only on providing rendering and event handling functionality. Rendering is the conversion of data that describes the state of the user interface into document object model objects(DOM) that the browser can use to produce a user interface that the user can see and interact with.
React’s event handling lets the programmer detect when a user interacts with their program and to specify how the program should respond. As we mention that React was created by and is maintained by Facebook. Its architecture borrows many ideas from functional programming including modelling components as functions, programming by transforming values, and separating the calculation of UI changes from the application of those changes. This properties leads to React’s greatest strength and also The Virtual DOM. The Virtual DOM is the JavaScript object model that React uses to calculate user-interface changes. By performing this calculation logically, React can free the programmer from tracking individual UI changes and be fast. React has no special UI template syntax. Instead, it relies on regular JavaScript. for example: If a piece of UI is conditional, use a JavaScript conditional expression. To render a collection of things, use the JavaScript arrays map function and so on.

A React application is a set of components, each of which declaratively defines a mapping between some states and the desired user interface. The interface is only changed by changing the state. The declarative style has the advantage of being easier to reason about and easier to prevent bugs. Being easier to reason about means that the code makes it obvious how it works.
It’s easy to see how code changes or events will affect the program’s outcome. The trade off is often that the declarative style requires the programmer to think through the problem more completely at the start. Once you understand how the program needs to work, you can represent that with React’s declarative style. The result is a program that communicates how it works without requiring the reader to trace through code and track changes over time. React components are self-contained units of functionality. They publish a simple interface that defines their inputs as properties and their outputs as callbacks. By implementing the interface, React components can be freely nested within each other. With a bit of thought, composition can lead to a lot of easy reuse. Consider how much use Facebook get out of the like and comment components.

Let’s start exploring how to build things in the next article (Next article will be published on Thursday 5/7/2018).

 

About the Author:

Neri Barakat is the co-founder and lead developer at Treenodes and AutoFileMove. She is a full stack engineer with a keen passion for all things tech. She loves building things for the web and sharing the things she learned through her writing.

Leave A Comment