How it feels to learn JavaScript
  • How it feels to learn JS
  • Table of Contents
  • Introduction
    • Is EcmaScript is JavaScript? TC39
  • JS Basics
    • Basic Concepts
    • Objects
    • Function vs Method
      • Anonymous Function
    • Scopes and keyword "this"
    • Prototypical
  • Dependencies / Packages Management
    • Chapter: Dependencies / Package Management
    • NPM
    • Bower
  • JS-Engines
    • Browser vs Node.js
  • Super / Sub - Lang
    • Chapter: Super / Sub Languages
    • TypeScript
      • Architectural Overview
  • Framework / Library
    • Angular
      • Bootstrapping
      • Change Detection
      • Singleton Services
    • React
  • Paradigms
    • Reactive
      • Rx.js
  • Web API's
    • Web Sockets
    • Web Worker
    • Service Worker
  • Testing
    • Testing Essentials
  • Patterns
    • IIFE (Immediately Invoked Function Expression)
Powered by GitBook
On this page
  1. Framework / Library

React

JS Library

React is developed by Facebook & open sourced it. It follows functional paradigm over object oriented approach.

Let's see how hello world looks like in react vs pure Javascript

React

Base JS files imports:

 <script src="react.development.js"></script> 
 <script src="react-dom.development.js"></script> 
 <script src="babel-browser.min.js"></script>
// html
<div id="root"></div>
//script
<script type="text/babel">
ReactDOM.render(
  "Hello, world!",
  document.getElementById('root')
);
</script>

Vanilla JavaScript using DOM API

  // create a new div element 
  var divTag = document.createElement("div"); 
  // and give it some content 
  var contentNode = document.createTextNode("Hello World"); 
  // add the text node to the newly created div
  divTag.appendChild(contentNode);  
  // adding 'id' attribute with value "root" to div element. 
  divTag.setAttribute('id', "root");

PreviousSingleton ServicesNextReactive

Last updated 6 years ago