React JS

React is a JavaScript library not a frame-work. From React, we get idea about building user interfaces (UI).

A User Interface (UI) is anything we put in front of users to have them interact with a machine.

DOM

DOM is “Document Object Model”. It’s the browsers’ programming interface for HTML (and XML) documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.

ReactDOM.render

This is basically the entry point for a React application into the browser’s DOM. It has 2 types of arguments:

1. The first argument is WHAT to render to the browser. This is always a “React element”.
2. The second argument is WHERE to render that React element in the browser.

React.createElement

React.createElement can also be used to create elements from React components.React elements are created in memory. To actually make a React element show up in the DOM, we use the ReactDOM.render method which will do many things to figure out.

Updating React elements

Let’s do an update operation on the DOM trees that we have so far. Let’s simply make the time string tick every second.

We can easily repeat a JavaScript function call in a browser using the setInterval Web timer API. Let’s put all of our DOM manipulations for both versions into a function, name it render, and use it in a setInterval call to make it repeat every second.

A user code:

// jsdrops.com/react-dom2
const render = () => {
 document.getElementById(‘mountNode’).innerHTML = `
 <div>
 Hello HTML
 <input />
 <pre>${new Date().toLocaleTimeString()}</pre>
 </div>
 `; ReactDOM.render(
 React.createElement(
 ‘div’,
 null,
 ‘Hello React ‘,
 React.createElement(‘input’, null),
 React.createElement(
 ‘pre’,
 null,
 new Date().toLocaleTimeString()
 )
 ),
 document.getElementById(‘mountNode2’)
 );
};setInterval(render, 1000);

JSX is not HTML

JSX is not understand by browsers. What browsers understand is the React.createElement API calls. The same button example can be written without JSX as follows:

// jsdrops.com/bx2
function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}ReactDOM.render(
  React.createElement(Button, { label: "Save"}),
  mountNode
);

Component

A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render method). React component is used in the program when we find similar in look and different in data.

If we want to create a card component which show a link & image, we will apply the bellow code:

const Card = ({ props }) => {
   return (
       <img src={props.src} />
       <a href={props.href}>Link</a>
    )
};

React Hooks

React Hook is a call to special function & is used only in function components. All hooks functions begin with the word “use”. For example:

• useState()
• useEffect()
• useHistory()
• useRef()
• useLocation()

useState

The argument to React useState() is used as the initial value of the state element.

const Button = () => {
  const [count, setCount] = useState(0);  
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
};

useEffect

The argument to React useEffect() is used as the re-initial value of the useState element.

const Button = () => {
  const [count, setCount] = useState(0);
  useEffect((evt)=>{
    setCount(evt.setCont);
}, [])  
  return (
      <button onClick={() => handleCount(count + 1)}>
      {count}
    </button>
  );
};