A Quick Start of React for Java Developers

By Qianxing

1. What Is React?

Before React emerged, there were three important libraries and frameworks in the Frontend.

jQuery solves the problem of browser compatibility and shortcut operation of DOM elements, and its chain operation API has a profound impact on the subsequent frontend framework.
Knockout puts forward the MVVM layering of frontend code, in which data is mapped to UI views through templates, significantly reducing DOM operations.
AngularJS introduces two-way binding based on MVVM. Data changes are reflected in UI automatically, and operations on views are updated in reverse automatically. It improves the flexibility of the template engine by expanding HTML with instructions. Unfortunately, the author has introduced massive concepts using server programming for reference, which has led to a sharp rise in the learning cost of AugularJS and a slight lack of performance.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The core idea of React is to combine short, independent code fragments into complex UI interfaces. These code fragments are called components. Compared with the MVC framework, React is more like the V in the MVC framework, which is only responsible for rendering the user interaction view.

React has three disruptive ideas I will introduce in the following chapter:

JSX uses JavaScript to express UI and interaction, taking full advantage of the flexibility of JavaScript.
fx(props) = UI, data-driven UI, one-way data flow, function-style page components
In Virtual DOM, the server and the client use the same set of code rendering—isomorphism—to solve the problem of frontend application SEO.

2. Initialize the React Project

Use Create React App [1] to initialize a React Web project:

$ npx create-react-app learn-react --template typescript
$ cd learn-react
$ npm start

After the npm start is executed, the browser opens the project homepage at http://localhost:3000.

3. Debug React Applications

React provides React Developer Tools[2], which is integrated into the Chrome Dev Tools, so you can view the React component tree and its corresponding Props and State.

app.tsx

import React, { useState } from 'react';

function Button(props: { count: number }): JSX.Element {
  const [count, setCount] = useState(props.count);
  return (
    <button
      onClick={() => {
        setCount((c) => c + 1);
      }}
      >
      {count}
    </button>
  );
}

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <Button count={5} />
    </div>
  );
}

export default App;

index.tsx

import React from 'react';
import * as ReactDOMClient from 'react-dom/client';

import App from './app';

const rootElement = document.querySelector('body') as Element;
const root = ReactDOMClient.createRoot(rootElement);

root.render(<App />);

Open the Chrome Dev Tools, and the Components tab has been added:

4. Todo Project

Next, let's do a Todo project to experience React:

5. Use JSX for Better Focus Separation

Before you start writing React programs, you need to understand JSX. JSX is React's syntax extension to JavaScript, which is used to express the view and interaction logic of the page through the HTML-like markup within the JavaScript file.

<div className="container">
  <CustomComponent 
    onClick={() => {alert('Hello')}}
  >
    Hello {props.name}!
  </CustomComponent>
</div>

Web pages are composed of HTML content, CSS styles, and JavaScript interactions. For a long time, web developers have separated the three into independent files, which are separated according to technology.

The traditional page content is mainly defined by HTML, and JavaScript logic is embellishment. As modern web page interactivity improves, page content is dynamically generated by JavaScript logic to a large extent. At the same time, rendering logic is intrinsically coupled with other UI logic (such as binding processing events in UI), notifying the UI when the state changes at a certain time and displaying prepared data in UI.

React uses JSX to integrate rendering logic with HTML markup.

This way, developers shift their focus from technical implementations (such as HTML templates and JavaScript rendering logic) to page functional units (such as Sidebar and Form).

6. Use JSX to Write React Components

Functions that return JSX are React's simplest components and can be nested (like HTML markup). React uses the props parameters to pass data to components to improve the reusability of components.

/**
 * The JSX syntax implicitly calls React.createElement.
 * So, although there is no statement to call React in the code, you still need to introduce it.
 */
import React from 'react'; 

interface IButton {
  /** Click the button to show copy */
  text: string;
  /** Click the button to jump to the link  */
  link?: string;
  /** Click the button to customize the event */
  onClick?: (event?: Event) => void
}

function Button(props: IButton) {
  const { text, link, onClick } = props;

  const redirectHandler = () => {
    location.href = link;
  };

  return (
    <div
      className="button"
      onClick={onClick | redirectHandler}
    >
      {text}
    </div>
  );
}

export default Button;

When a component is used, it is assembled into a props object through the attributes of its tag and passed to the component. The syntax is similar to the HTML attribute, but the value can be any JavaScript object.

import React from 'react';

/**
 * Import the default content of the export in the./button.tsx file and name it Button.
 * The .tsx extension name can be omitted.
 */
import Button from './button';

interface IDialog {
  title: string;
  content: Element;
  showClose: boolean;
}

function Dialog(props: IDialog) {
  const { title, content, showClose = false, children } = props;

  const hideDialog = () => {
    // ...
  }

  return (
    <div>
      <div className="dialog-title"> {title} </div>
      <div className="dialog-body"> {content | children} </div>
      {/* The attributes defined by Button props are exposed through the tag attribute */}
      <Button
        title="Cancel"
        onClick={hideDialog}
      />
      <Button 
        title="Confirm"
        onClick={() => { }}
      />
    </div>
  );
}

export default Dialog;

After the component is written, the component is rendered to the page through the react-dom [3].

import React from 'react';
import ReactDOM from 'react-dom/client';
import Dialog from './dialog';

// Render the component to the element whose page id is root.
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(
  <Dialog 
    title="demo dialog" 
    content="this is a dialog"
    showClose={false}
  />
);

7. JSX Rules

React components have several conventions:

Component names use the Pascal style (the first letter is capitalized) to distinguish them from HTML native markup (div, p, a, etc.).
The component only accepts props to expose the component's configurable attributes, and its children components are injected by React through the children's attribute.
Props is read-only inside the component and cannot be modified.

(1) There Must Be a Root Node

Like the simple demos written above, JSX must have a root node. Even if multiple sibling elements have no parent nodes, they need to be wrapped with a virtual node <></>.

{/* Illegal JSX */}
<div id="box1"></div>
<div id="box2"></div>

{/* Legal JSX */}
<>
<div id="box1"></div>
<div id="box2"></div>
</>

(2) All Labels Need to Be Closed

Markup doesn't necessarily need to be closed in HTML.

<meta charset="UTF-8">
<br>
<img src="https://g.alicdn.com/logo.png">

HTML native markup can be mixed in JSX, but all markup must be closed.

<>
<meta charset="UTF-8" />
<br/>
<img src="https://g.alicdn.com/logo.png"/>
</>

(3) Differences in HTML Attributes

DOM features and attributes (including event handling) commonly used in React are named with a lower camel case. For example, the attribute of React corresponding to the tabindex attribute in HTML is tabIndex.
Some HTML attribute names conflict with JavaScript-reserved words, and alternative names are required in JSX.

HTML attribute name	JSX attribute name
class	className
for	htmlFor

The style attribute value is an object composed of CSS attributes. In order to make it conform to JavaScript syntax rules, we name the attribute name with lower camel case (fontSize, backgroundColor) instead of the hyphen used by CSS attributes, which can easily set dynamic styles, but static styles should depend on the cooperation of className and CSS files.

function HelloWorldComponent(props) {
    const divStyle = {
      // You can easily set dynamic styles.
      backgroundImage: 'url(' + props.imgUrl + ')',
    // However, the static style should try to set the class through className and solve it through css file.
    // Static styles like color: 'blue' are not recommended to be written directly in JSX.
    color: 'blue',
  };

  return (
    <div style={divStyle}>
      Hello World!
    </div>
  );
}

React supports the defaultValue attribute for Form form, sets default values, and uses the HTML-consistent value attribute at runtime.

(4) Automatically Escape the Content

JSX escapes text that is set directly to prevent XSS attacks.

const content = `
  A picture should be shown here<br>
  <img src="https://sc02.alicdn.com/kf/HTB1gUuPUkzoK1RjSZFl761i4VXaw.png" />
`;
<div>
  {content}
</div>

Page effect:

When security is guaranteed, you can disable the escape effect through dangerouslySetInnerHTML to display raw HTML.

const content = `
      A picture should be shown here<br>
      <img src="https://sc02.alicdn.com/kf/HTB1gUuPUkzoK1RjSZFl761i4VXaw.png" />
  `;
<div dangerouslySetInnerHTML={{ __html: content }}/>

8. TODO in JSX Uses {} to Support JavaScript Expressions

In JSX, you can use {} to wrap JavaScript expressions to handle dynamic logic (such as attribute value and child elements). The most common usage is:

{variable name} reads the variable value. The double-layer {{}} is not a special syntax. It is a shortcut to {object}.

<div style={{ color: 'red' }}></div>

// Equivalent to

const styleObj = { color: 'red' };
<div style={styleObj}></div>

Ternary expressions handle if-else(if-else is a statement, not an expression)
The map processes the loop logic and generates elements in batches.

interface IStuff {
  name: string;
  sex: 'male' | 'female';
}

function App () {
  const list: Array<IStuff> = [
    { name: 'Byron', sex: 'male' },
    { name: 'Casper', sex: 'male' },
    { name: 'Junice', sex: 'female' },
  ];

  return (
    <ul className="stuff-list">
      {
        list.map(stuff => { // Generate multiple
          const { name, sex } = stuff;
          return (
            {
            <li
              /* The actual programming className setting has a better expression. Here, only the demo ternary expression is used. */}
                className={sex === 'male' ? 'stuff-male' : 'stuff-female'}
              onClick={() => { alert(name) }}
            >
              // Read the variable value
              {name}
            </li>
          );
        })
      }
    </ul>
  );
}

Annotations in JSX also need to be wrapped in {}, but this writing is inconvenient. Most compilation tools can handle double slash style // annotations.

9. Behind the JSX

The return value of JSX is neither a DOM element nor an HTML string but a JSON description of the DOM, which is React Element:

<button id="9527" className="btn-primary">
   <span style={{ color: 'red' }}>
     This is a Button
   </span>
</button>

JSX is expressed in such a structure:

{
  "type": "button",
  "props": {
    "id": "9527",
    "className": "btn-primary",
    "children": [
      {
        "type": "span",
        "props": {
          "style": { "color": "red" },
          "children": "This is a Button"
        }
      }
    ]
  }
}

After compilation, it is called like this:

React.createElement("button", {
  id: "9527",
  className: "btn-primary"
},React.createElement("span", {
  style: {
    color: 'red'
  }
}, "This is a Button"));

React.createElement(type, props, ...children), As mentioned above, React automatically injects children into props during this process.

After understanding JSX, you can start writing static React Components.

References

[1] https://create-react-app.dev/

[2] https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

[3] https://www.npmjs.com/package/react-dom

Community

A Quick Start of React for Java Developers

1. What Is React?

2. Initialize the React Project

3. Debug React Applications

4. Todo Project

5. Use JSX for Better Focus Separation

6. Use JSX to Write React Components

7. JSX Rules

(1) There Must Be a Root Node

(2) All Labels Need to Be Closed

(3) Differences in HTML Attributes

(4) Automatically Escape the Content

8. TODO in JSX Uses {} to Support JavaScript Expressions

9. Behind the JSX

References

SunLuyong

You may also like

Comments

SunLuyong

Related Products

Web Hosting Solution

YiDA Low-code Development Platform

Web Hosting

mPaaS