React Introduction: Core Concepts, Component Architecture, and JSX Fundamentals
React, an open‑source UI library created by Facebook, uses a virtual DOM and component‑based architecture—both class‑based and functional—to build modular, reusable interfaces, while JSX provides an XML‑like syntax that compiles to JavaScript, enhancing development efficiency and maintainability.
React, originally an internal project developed by Facebook for Instagram, was open-sourced in May 2013. Since its release, it has gained significant popularity among developers due to its unique design philosophy, excellent performance, and simple code logic.
React's Key Advantages:
1. Virtual DOM: When the state of the DOM tree needs to change, React's Virtual DOM mechanism compares the DOM trees before and after the same Event loop. If differences exist, React only modifies the specific DOM regions that require changes, enabling highly efficient DOM operations and rendering. When component state is modified, React marks it as "dirty" and calculates the final state changes at the end of the Event loop, performing a single batched re-render instead of multiple individual renders.
2. Component Composability and Modularity: React components are encapsulated, reusable UI modules representing fine-grained DOM regions. They can be nested together, creating component hierarchies with dependency relationships. Components can be used like script modules with CommonJS, AMD, or CMD specifications.
Important clarifications: React is a pure View layer and is not designed to handle dynamic data directly—it complements rather than replaces traditional frameworks. React excels at building component-based pages where UI is constructed like building blocks.
React Component Characteristics:
1. Composable: Components can be easily combined with other components or nested within each other, enabling complex UIs to be broken down into simpler components.
2. Reusable: Each component has independent functionality and can be used across multiple UI scenarios.
3. Maintainable: Each component contains its own logic, making it easier to understand and maintain.
Two Ways to Write React Components:
1. ES6 Class Component:
// Note: Component names must start with a capital letter
class MyComponent extends React.Component {
// render is the only required method for Class-based components
render() {
return (
<div>Hello, World!</div>
);
}
}
// Insert <MyComponent /> into the DOM element with id 'app'
ReactDOM.render(<MyComponent/>, document.getElementById('app'));2. Functional Component:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>Understanding JSX:
JSX provides XML-like syntax extensions on top of ECMAScript. While similar to HTML, there are differences—for example, the class attribute in HTML becomes className in JSX. Since browsers don't natively support JSX, it must be compiled to JavaScript using tools like Babel.
JSX Usage Methods:
1. Using bundlers like Browserify or Webpack with Babel preprocessing
2. Client-side parsing in the browser
JSX can be embedded inline:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>Or loaded externally: <script type="text/jsx" src="main.jsx"></script> In summary, React is built entirely on the concept of Components. JSX is an ECMAScript syntax similar to XML that leverages JavaScript's full power without relying on cumbersome template languages. While JSX is not mandatory (all JSX is ultimately transformed into JavaScript), it significantly improves development efficiency.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent Cloud Developer
Official Tencent Cloud community account that brings together developers, shares practical tech insights, and fosters an influential tech exchange community.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.