Post
Ask Question

React - Learn From Scratch - Part One

What is React?

 
React is another JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. The initial Release came on May 29, 2013. Current version is 16.12.0. [Ref: Wikipedia]
 

Background

 
There was a time when JavaScript was mainly used for forms validation or for building UI controls. As client side development increased so JavaScript frameworks started appearing. But if we want to see a point which changed & opened new doors of client side development, then that would be the appearance of jQuery. When we talk about client side development, we mainly talk about how to find/add/edit/delete something in DOM (Document Object Model). jQuery made this very easy and people started using it almost in every web application. jQuery plugins were introduced as reusable components. As jQuery doesn’t guide us how to manage/structure our JavaScript code on client side so different JavaScript frameworks came into the picture; some with jQuery and some without jQuery. AngularJS (Angular v1.0) framework was introduced in 2010. It introduced a new way to develop single page applications but it had some technical flaws and therefore Google had to introduce a re-written version (Angular 2) in 2016. Angular 2+ versions are simply called Angular. But between 2010 and 2016, another library (React) came. This was initially used by Facebook internally and then it was released for public usage. It is similar to Angular in some concepts and quite different in some other concepts. It would not be wrong to say that the failure of AngularJS gave a huge boost to React in popularity. We’ll do a comparison later. (Note: Never compare React with AngularJS (Angular v1.0), it is a trap.)
 

How do we work with plain JavaScript or jQuery

 
If we use plain JavaScript (vanilla JavaScript) for client side development, we use the following approach,
 
We write plain HTML,
  1. <input type=”text” id=”firstname” />  
  2. <button id=”btnSave”>Save</button>  
We write separate JavaScript in which we find DOM elements (e.g. document.getElementById) and read or write its properties.
  1. var o = document.getElementById(‘btnSave’)  
  2. o.onclick = function(){  
  3.    alert(document.getElementById(‘firstname’).value);  
  4. }  
Or we may write some inline JavaScript with HTML,
  1. <button id=”btnSave” onclick=”alert(alert(document.getElementById(‘firstname’).value);”  
  2. >Save</button>  
This was a very simple example but it becomes very complex if we try to do DOM manipulation using plain JavaScript. With jQuery we use the same approach but jQuery provides a lot of functions to ease our work. Also if there is a change in data, we have to update the UI by ourselves as jQuery doesn’t maintain state => UI or UI=> state changes. Angular & React do. Don’t worry, we’ll explore this in detail.
 
Note
Remember Playing with DOM in the browser is a costly operation.
 

What is different with React?

 
React is another JavaScript library (like jQuery) which is going to help us building UI (or playing with DOM in this case) easier. Before we start playing with React, try to understand & memorize following points.
  1. Think of UI (user interface) as a combination of components. You may think of a component as a Tag. We’ve built-in tags (e.g. H1, div) but now we are going to develop our own tags. For example <Person> tag. A component will have its own HTML & JavaScript. This component can be reused in the same application again & in other applications.
  2. a.Exercise: Check how many unique (reusable) components we can identify on Facebook home page. Try to have a component as simple as we can have. Then list what data/state we have in that component. Can we break this component into more components?
  3. Now we are not going to find DOM elements as we do with plain JS or jQuery.
  4. For event binding, we are going to use inline approach.
  5. React is not going to provide everything we need for client side development. It is just a UI Library. For other tasks (e.g. HTTP communication, Routing), we’ll have to use other libraries according to our choice. There are some popular and widely used.
  6. React uses the concept of virtual DOM. Virtual DOM means an in-memory representation of actual DOM but with React elements. We play with virtual DOM and then React intelligently updates actual DOM. It is like we want to translate Urdu to French but instead of direct translation, text is translated to English first (whole sentence for example) and then English text is translated to French. Just FYI. It also gives React power to use same virtual DOM and render it to something else (other than Web DOM). For example React Native.
  7. React updates UI automatically when “relevant” data (state) is changed. Developer focuses only on when & what to change in data (state). React provides a mechanism how to define this state & how to update this state.
Note
At the end the browser only understands JavaScript, HTML & CSS.
 

Let’s start with React

 
Note
We are going to create an element (h3) programmatically and append it in an existing element in page. 
  1. Create an empty html page (e.g. index.html) in your favorite editor. I am going to use Visual Studio Code.
  2. Add the following basic HTML in page
    1. <html>    
    2. <head>    
    3. </head>    
    4. <body>    
    5.     <div id="app">    
    6.     </div>    
    7. </body>    
    8. </html>    
  3. Now add the following script file references in head tag. Check here
    1. <head>    
    2.    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>    
    3.    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>    
    4. </head>    
  4. Now add the following script in body section. Open page in browser and check if alert appears or not. If alert appears, we are good to proceed next.
    1. <body>    
    2.     <div id="app">    
    3.     
    4.     </div>    
    5.     <script>    
    6.         if(React){    
    7.             alert('React is available')    
    8.         }    
    9.     </script>    
    10.     
    11. </body>    
  5. Now let's create a React Element using React.createElement() function. First parameter is HTML tag, second parameter is JS object to set any attribute and third paramter is its children. 

  6. ReactDOM.render() function renders a react element in some existing DOM element. Check the following complete script.
    1. <body>    
    2.     <div id="app">    
    3.     
    4.     </div>    
    5.     <script>    
    6.         // if(React){    
    7.         //     alert('React is available')    
    8.         // }    
    9.         var el = React.createElement('h3',{id:'myheader',class:'test'},"Bilal Shahzad");    
    10.         ReactDOM.render(el,document.getElementById('app'));    
    11.     </script>    
    12.     
    13. </body>    
  7. Now let's run the page in Chrome and inspect it, we should see something like this. We can see that React.createElement() has rendered a normal HTML element in the page. "el" is a react element (wrapper) which is rendered as DOM element eventually.

Summary

 
In this part 1, we saw some background and then we saw how we can create a very simple example in React. We learned that it is just another JS library which allows us to play with DOM. We learned how we can create a new DOM element (using React element). In the next part, we'll continue from here.


Similar Articles