A Quick Intro to React.js

React empowers the creation of dynamic websites rendered entirely within the browser. Its core element is JSX, a syntax resembling HTML and XML.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

Illustrative Examples

HTML

<div>
  <h1 id="This-is-heading">This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div>

XML

<example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example>

JSX

function ExampleReactComponent() {
  return (
    <div>
      <h1 id="This-is-heading">This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}

The similarity between HTML, XML, and JSX is evident. JSX uniquely integrates HTML within JavaScript, hence its name: JavaScript XML.

This fusion of HTML and JavaScript enables dynamic HTML manipulation. For instance, a button click could toggle a class name.

React Components

React facilitates the definition of custom components that return JSX. Essentially, a React component is a JavaScript function generating JSX.

Upon rendering a root React component, JSX is automatically converted into HTML and integrated into the webpage. React allows creating custom components (akin to custom tags) for inclusion within other components.

Here's a component utilizing the ExampleReactComponent:

function RootReactComponent() {
  return (
    <div>
      <h1 id="This-is-the-main-Component">This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}

Props

Similar to HTML attributes, React components employ props.

function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1 id="Props-Example">Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1 id="This-is-the-Main-Component">This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}

Rendering MainComponent invokes PropsExample with { exampleValue: "example-value" } as the props argument. Note that JavaScript variables are embedded within JSX using {}.

State

Data is typically stored in variables for display. React utilizes "state" for data management, acting as a getter/setter mechanism. When state is modified, React automatically updates the component's HTML.

This example demonstrates automatic HTML updates upon state changes:

import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}

Building React Apps with Vite

Tools like Vite streamline the bundling of React components and JSX into browser-executable JavaScript.

To initiate a React project:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Conclusion

This introduction to React.js provides a foundational understanding. After setting up a Vite project, experiment with creating React components to deepen your comprehension. Further learning resources are available at https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421.

The above is the detailed content of A Quick Intro to React.js. For more information, please follow other related articles on the PHP Chinese website!