React Basic

React

React is a library of JavaScript. It is not like Angular framework It doesn’t help with server communication, translations, routing. React is thin and it’s extremely easy to mix it with other 3rd party libraries. React use JSX syntax. It is declarative. In React use declarative style to write components. In React make HTML, JS and often CSS together as a component.

JSX

JSX is a syntax extension to JavaScript. It using with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React element. JSX syntax is

React.createElement(component, props, …children)

JSX code:

<div color=”red”>
<h1>hello world</h1>
</div>

Compile code. If any one compile use the online Babel compiler.

/*#__PURE__*/
React.createElement(“div”, {
color: “red”
}, /*#__PURE__*/React.createElement(“h1”, null, “hello world”));

If any element has no child can use self-closing tag.

Props

There are many different ways to specify props in JSX.

Props in JavaScript

<Component sum={1 + 2 + 3 + 4} />

In Component, the value of props.sum is 10.

String literal

A string can pass as a prop. When a string literal, its value is HTML unescaped. These two JSX expressions are equivalent.

<Component message="hello world" />
<Component message={'hello world'} />

Props default `true`

If no value pass for a prop, it defaults true. These two JSX expressions are equivalent. But should send value in props.

<Component message /> // message value is true 
<Component message={true} />

Spread Attributes

If already have props as an object, and you want to pass it in JSX, should use ... as a “spread” operator to pass the whole props object. These two components are equivalent:

function() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}
function() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;}

React Element Type

When an element type starts with a lowercase letter, it refers to a built-in component like <div> and results in a string 'div' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

JSX code :

<div color=”red”>
<h1>hello world</h1> // h1 build in html tag
<Foo toWhat=”World” /> // Foo custom define , if foo is small later its show compile error
</div>

Output:

/*#__PURE__*/
React.createElement(“div”, {
color: “red”
}, /*#__PURE__*/React.createElement(“h1”, null, “hello world”), /*#__PURE__*/React.createElement(Foo, {
toWhat: “World”
}));

React Hook

A hook in a React component is a call to a special function. All hooks functions begin with the word “use” like useEffect(). Hooks are very powerful. React hook functions can only be used in function components. If we want to make our website not static , we should use state hook. Get value from any find of the webpage and set in setState() without reload the pages. The function setState() is asynchronous.

React Virtual 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.

When run a React app, its render a tree of elements in the browser and first generates a virtual representation of that tree. React keeps it in memory. Then it’ll proceed to perform the DOM operations that will make the tree show up in the browser. When React app update any component, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory. To render the updated tree in the browser, React does not discard what has already been rendered. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the browser.