组件与Props

JSX是一种类似于HTML的语法扩展，用于在React中描述用户界面。在JSX中，你可以在JavaScript代码中直接编写HTML标记，让编写UI变得更加简单和直观。

JSX基础语法

在React中，你可以使用JSX来定义组件的UI结构，如下所示：

const element = <h1>Hello, world!</h1>;

在上面的代码中，我们定义了一个简单的JSX元素，它会渲染一个<h1>标签，并显示文本Hello, world!。

元素渲染

要将JSX元素渲染到页面上，你可以在React应用的根组件中使用ReactDOM.render()方法，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;
ReactDOM.render(element, document.getElementById('root'));

在上面的代码中，我们将element元素渲染到id为root的DOM节点中。

组件与Props

在React中，你可以将UI拆分成独立的组件，每个组件都可以接收一些数据作为参数，这些参数被称为Props。

下面是一个简单的组件示例：

import React from 'react';

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

在上面的代码中，我们定义了一个名为Greeting的组件，它接收一个名为name的Props，并在页面上显示Hello, {name}!。你可以在其他组件中使用这个组件，并传入不同的name值来显示不同的问候语。

import React from 'react';
import Greeting from './Greeting';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

在上面的代码中，我们在父组件App中使用了Greeting组件，并传入不同的name值。页面上会显示三条不同的问候语。

这就是React.JS中JSX语法和元素渲染、组件与Props的基础教程。希望对你有所帮助！