React js introduction

REACT JS

Introduction

What is React?

• The most popular JavaScript library
• Renders your UI and responds to events
• It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates theresulting differences, and then updates the browser’s displayed DOM efficiently
• Used to create a UI (User Interface) components for Web and Mobile applications

React History

• 2011 Created by Facebook programmer Jordan Walke
• 2012 used Instagram, 2013 open-source
• 2015 React Native was implemented

Features

• Virtual DOM - Is faster than JS regular DOM
• JSX (JavaScript eXtention) – HTML + JS
• One-way communication flow – flux, redux
• Use of State and Props
• Single-Page programs are used

JSX

• JSX (JavaScript eXtention) – HTML + JS
• Easy and interactive - JavaScript code can be executed

const element =

Hello, World! {4*10}

;

JSX

React.createElement{ ‘div’, {className: ‘hello’}, ‘Hello, World’};

Hello, World!

;

In plain JS, the initial user interface is generally created in HTML on the server. Meaning, HTML is dynamically created on the server, and might look something like this:

Grocery List

Milk

Bread

Eggs

In contrast, a React app will start with a fixed HTML file that looks like this:

...which is blank! So how does the UI get created?

Instead of defining the initial UI on the server, the UI gets defined on the browser. So the app starts with a blank container (a div in this case), and then the UI gets loaded into that container.

function GroceryList(props) {

return (

Grocery List

Milk

Bread

Eggs

)

};

Button is HTML

Button is React JS

Reference

• React – A JavaScript library for building user interfaces (reactjs.org)
• React vs. Plain JavaScript | Framer
• React Tutorial (w3schools.com)
• React — Википедия (wikipedia.org)
• React.js: понятное руководство для начинающих / Хабр (habr.com)