React For Web Development

                                                                                                              The fear of the Lord is the beginning of knowldege                                                                                                                                                             Proverbs 1:7 

What is React?

React is an external library used for web development. It is a powerful JavaScript used for building modern, fast and interactive user interfaces. It uses virtual DOM to update only specific parts of the screen that need to change.

To create and run react pages, the three basic requirement would be

• a code editor to write the code. Download Visual Studio Code code editor.
• a browser to run and view the page created in react. Google Chrome or Mircosoft edge.
• a runtime environment (node.js) to run the development server. Node.js automatically installs npm (Node Package Manager) which handles installing the React library and project dependencies. Download Node JS

Creating Your First React web page.

Create a local folder say "D:\java\react_course".

In this folder create and save the below html code.

react-basics.html

<!DOCTYPE html>
<html>
  <head>
    <title>React Basics</title>
  </head>
  <body>
    <div class="js-container"></div>
    <script>
      console.log('hello world');
    </script>

    <script src="https://unpkg.com/supersimpledev/react.js"></script>
    <script src="https://unpkg.com/supersimpledev/react-dom.js"></script>

    <script src="https://unpkg.com/supersimpledev/babel.js"></script>
    <script type="text/babel">
      const container = document.querySelector('.js-container');
      ReactDOM.createRoot(container).render(<h1>Welcome to SuperSimpleDev React Course</h1>);
    </script>
  </body>
</html>

To edit this code, Open Visual Studio Code and File->Open Folder-> D:\java\react_course.

To run the react page, open react-basics.html in the chrome or edge browser.

To see the javascript 'hello world', in the browser, right click and inspect and in the Console tab you can see the javascipt log statement.

You can also load javascript code from a .js file or from a any site on the internet.

Example to load javascript code from a .js file.

<script src="react-basics.js">
      <!-- console.log('hello world'); -->
</script>

Example to load javascript code from the internet.

<script src="https://unpkg.com/supersimpledev@8.6.4/external-library.js">
      <!-- console.log('hello world'); -->
</script>

The output on Console table when you reload the page and inspect is

console.log('This is an external library.');

Thus we see different ways how we can run javascript code in react.

Understanding the Basic React Code

The next two lines of the react code are loading the react libraries to run react web pages.

<script src="https://unpkg.com/supersimpledev/react.js"></script>

<script src="https://unpkg.com/supersimpledev/react-dom.js"></script>

If we load both these urls in a browser you can see the javascript code for react.

react.js and react-dom.js are used for creating websites.

react.js  and react native js are used for creating mobile applications. 

<script src="https://unpkg.com/supersimpledev/babel.js"></script>
    <script type="text/babel">
      const container = document.querySelector('.js-container');
      ReactDOM.createRoot(container).render('Welcome to SuperSimpleDev React Course');
</script>

This snippet of code loads the babel javascript compiler.

The script element "text/babel" indicates that the code inside that element is .jsx code and instructs babel to transform or compile it to standard javascript that browser engines can understand.

document.querySelector searches your HTML file for an element with the class name js-container and saves is in an element called container. This is because react needs a spot on the webpage where it can safely inject and display its content.

ReactDOM.createRoot takes the HTML element (container) and initializes it as a React Root.  

.render injects the content inside the () into the root element. Which is then displayed on the browser.

Rendering to HTML

The code which babel compiles so that the browser can run it is as below

const container = document.querySelector('.js-container');
ReactDOM.createRoot(container).render(
  React.createElement('h1', null, 'Welcome to SuperSimpleDev React Course')
);

In this, the browser's DOM API is used to locate the CSS class element (js-container) in your HTML page. This element serves as the mount point.

ReactDOM.createRoot creates a root instance (manager) attached to that DOM element  (container) which manages the virtual DOM and handles scheduling, updating and rendering UI efficient components inside container.

React.createElement() returns a lightweight JavaScript object describing the UI element as shown in the javascript below.

.render takes this element and mounts it into the DOM.

JavaScript

{
  type: 'h1',
  props: {
    children: 'Welcome to SuperSimpleDev React Course'
  }
}

React then uses the standard browser APIs namely document.createElement('h1') and document.createTextNode(...) to create DOM nodes in memory.

Finally, React appends the newly created <h1> node inside your target container.

The final HTML code which is created in the browser's HTML DOM is

<div class="js-container">
  <h1>Welcome to SuperSimpleDev React Course</h1>
</div>

Sample code to add and render a paragraph on your browser page

const paragraph = <p1>paragraph of text</p1>
const container = document.querySelector('.js-container');
ReactDOM.createRoot(container).render(paragraph);

Sample code to add and render a button element on your browser page

const button = <button>Submit</button>
const container = document.querySelector('.js-container');
ReactDOM.createRoot(container).render(button);

References 

React Tutorial

God's Word for the day

Anger and Vengeance

Refrain from strife and your sins will be fewer;

  For the hot tempered kindle strife,

and the sinner disrupts friendships. 

  and sows discord among those who are at peace.

In proportion to the fuel so will the fire burn,

  and in proportion to the obstinacy, so will strife increase.

In proportion to a person's strength will be his anger,

  and in proportion to his wealth he will increase his wrath.

A hasty quarrel kindles a fire, and a hasty dispute sheds blood.

Sirach 28:8 - 11

Gospel teachings of Jesus

Jesus' Triumphal Entry into Jerusalem

When they had come near Jerusalem and had reached Bethphage, 

 at the Mount of Olives, Jesus sent two disciples, saying to them,

"Go into the village ahead of you, and immediately you will find

  a donkey tied, and a colt with her; untie them and bring them to me.

If anyone says anything to you, just say this, 'The Lord needs them.'

  And he will send them immediately. This took place to fulfill what

had been spoken through the prophet saying,

"Tell the daughter of Zion, 

   Look your king is coming to you,

humble and mounted on a donkey,

  and on a colt, the foal of a donkey"

The disciples went and did as Jesus had directed them; they brought

  the donkey and the colt, and put their cloaks on them, and he sat on

them. A very large crowd spreak their cloaks on the road, and others 

  cut branches from the trees and spread them on the road. The crowds

that went ahead of Him and that followed were shouting,

  "Hosanna to the Son of David!

    Blessed is the one who comes in the name of the Lord!

    Hosanna in the highest heaven!"

When he entered Jerusalem the whole city was in turmoil, asking,

  "Who is this?" The crowds were saying, "This is the prophet 

Jesus from Nazareth in Galilee."

Mathew 21:1 - 10