React is the number one frontend, but it is remarkably hard to discover what it actually brings to the party. What is the problem that React seems to solve? The only way to find out is to strip it bare of its tools, UI declarative language and Node and take it right back to basics.

React is something of a star at the moment and while its documentation is good, it always approaches using it via the most advanced route - ES8, JSX and Babel at a minimum. Even if it abandons one of these technologies to demonstrate how things work it keeps the others. This makes it very difficult to see what it is you are buying into.

After all there is the core idea of React and then there are the tools and elaborations that surround it.

So let's strip the elaborations away and see what React is doing in the most basic JavaScript and HTML terms.

React Without npm or Anything Else 

The first problem we have in getting started is that the React documentation only really explains how to get started with node.js and npm and many other tools. If you are coming from a clientside background you may well not have any idea what all this is about and so spend time learning new technologies that really don't have anything much to do with React. This can be off putting and it confuses the action of adopting React with adopting a set of tools. 

In fact, it is perfectly easy to use React without node.js, npm or any of the toolchain. You can use a content delivery network (CDN) to download the two JavaScript libraries that you need or you can download them and serve them yourself locally. This has the advantage of putting the use of React on the same level ground as using any other traditional library such as jQuery. 

To load the two libraries you need add: 

<script crossorigin 
src="https://unpkg.com/react@18/umd/react.development.js">
</script>
<script crossorigin src=
"https://unpkg.com/react-dom@18/umd/react-dom.development.js">
</script>

to the header of the web page.  These are full unminified version for production code you should use:

<script crossorigin 
src="https://unpkg.com/react@18/umd/react.production.min.js">
</script>
<script crossorigin src=
"https://unpkg.com/react-dom@18/umd/react-dom.production.min.js">
</script>

Hello World

Once you have the libraries loaded the next thing to do is write a "hello world".

The first idea in React, that you have to understand, is that you create the UI by creating JavaScript object that represent the UI. You might think at this point that these objects are DOM objects but this isn't the case. React uses JavaScript objects to create a parallel DOM, or rather a representation of a fragment of the DOM. To make the React elements visible in the DOM you have to render them. 

To create an element you simply use:

React.createElement(type, props, children ...);

The type parameter can be a HTML tag name as a String, e.g. "div", or it can be a "class" that represents a React element. More about elements as classes later.

The props parameter is an object with properties that customise the element. If you include a valid HTML element attribute in props then it will be used to set the attribute on the element. 

The final parameter, children, can be repeated as often as you like and each parameter specifies a child element of the element. 

For example:

var helloElement=React.createElement(
                    "div", null, "Hello World");

creates an element that is a div with no props and one child, the text node containing "Hello World". We don't usually think of text nodes as children but they are.

Now we need to render the element. To do this we need a tag to act as a container in the HTML. The element will be rendered as a child of the container. 

In this case all we need is some minimal HTML:

<div id="root"></div>

The id makes it easy to retrieve the DOM element that corresponds to it. 

The render function is:

ReactDOM.render(element,container,callback);

The callback is optional and there can only be one element specified. The contents of the container are erased and replaced with the element as DOM objects. If you do provide a callback then it is called every time the contents of the container change. 

For example:

ReactDOM.render(helloElement,
                 document.getElementById('root'));

This changes the effective HTML to:

<div id="root">
 <div data-reactroot="">Hello World</div>
</div>

If you know about the DOM and perhaps jQuery it is difficult to get excited about this because manipulating the DOM is fairly easy. For example using jQuery:

$("#root").empty().append("<div>Hello World");

you can build up more complex elements by including multiple children:

var helloButton=React.createElement(
 "button", null, "Click Me");
var helloBreak=React.createElement(
 "br", null, null);
var helloElement=React.createElement(
 "div", null,"Hello World",helloBreak,helloButton);
ReactDOM.render(
 helloElement,document.getElementById('root'));

In this case we have a button element, a break element and a div and a textnode, break and button are the child elements within the div. The resulting DOM is equivalent to:

<div id="root">
 <div data-reactroot="">
  <!-- react-text: 2 -->
    Hello World
  <!-- /react-text -->
  <br>
  <button>Click Me</button>
 </div>
</div>

You can tell that this isn't going to be a fun way to work and React does have better ways of doing the same job. Note that in jQuery the same task is just as easy if not easier:

$("#root").empty().append(
          "<div>Hello World<br><button>Click Me");


If you want to give the Button an id then you can use the props:

var helloButton=React.createElement("button",
                      {id:"Button1"}, "Click Me");

This creates a Button with id "Button1". Any props that aren't recognized as HTML element attributes are ignored. However they are of use when you create a component.

Functional Components

React elements are the lowest level UI atom. In most cases you want to make use of a component which has a lot more functionality. 

There are two component functional and class. 

A functional component is just a function that returns a react element.

function myComponent(props){
 code
 return element;
}

For example:

function Hello(){
 var helloButton=React.createElement(
    "button",{id:"Button1"}, "Click Me");
 var helloBreak=React.createElement(
    "br", null, null);
 var helloElement=React.createElement(
    "div", null,"Hello World",
       helloBreak,helloButton);
 return helloElement;
}

which simply creates the element used in the example earlier - the Hello World text and a Button. 

What is the advantage of using a functional component? 

The first is that you can use the function to group together multiple createElement calls to put together a component that involves more than one element and then return the component as if it was just one thing. However you don't call the function as part of a render you first use createElement to create an instance of the component and then you render it.

For example you could render the hello component using:

var hello1=React.createElement(Hello,null,null); ReactDOM.render(
        hello1,document.getElementById('root'));

You can also use props to customize the component beyond setting HTML attributes. 

For example:

function Hello(props){
 var helloButton=React.createElement("button",
        {id:"Button1"}, props.buttonmessage);
 var helloBreak=React.createElement(
        "br", null, null);
 var helloElement=React.createElement(
        "div", null, props.hellomessage,
           helloBreak,helloButton);
 return helloElement;
}

Notice that now we are using props.buttonmessage and props.hellomessage to supply the text. You can use any props properties you care to invent but when you use createElement you have to make sure to provide them. For example, to create an instance of the component and render it we have to use:

var hello1=React.createElement(Hello,
       {buttonmessage:"click me",
        hellomessage:"Hello World"},
         null);
ReactDOM.render(
  hello1,document.getElementById('root'));

Notice that now we have a way to customize components using nothing but JavaScript.