React学习（2）- React组件

React学习（1）- JSX
React学习（3）- 组件交互

导入React和ReactDOM

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

render() Method

React类组件必须有一个render()方法。这个方法应该返回一些用JSX创建的React元素。

class MyComponent extends React.Component {
  render() {
    return <h1>Hello from the render method!</h1>;
  }
}

React组件

React组件是一段可重用的代码，用于定义Web应用界面的一部分的外观、行为和状态。
组件可以使用函数定义，也可以用class类定义。

import React from 'react';

//函数定义
function MyFunctionComponent() {
  return <h1>Hello from a function component!</h1>;
}
 
//class类定义
class MyClassComponent extends React.Component {
  render() {
    return <h1>Hello from a class component!</h1>;
  }
}

JSX的大写字母

React要求组件的第一个字母必须大写。JSX将使用这个大写字母来区分HTML标签和组件实例。如果一个名字的第一个字母是大写的，那么JSX知道它是一个组件实例；如果不是，那么它就是一个HTML元素。

// 这是一个React组件
<ThisComponent />
  
// 这是一个JSX HTML tag. 
<div>

render()中的变量

一个React组件可以在任何JSX返回之前包含JavaScript。在返回语句之前的JavaScript会告知渲染组件所需的任何逻辑。
在示例代码中，我们看到在返回语句之前的JavaScript，它将数值四舍五入为一个整数。

class Integer extends React.Component {
  render() {
    const value = 3.14;
    const asInteger = Math.round(value);
    return <p>{asInteger}</p>;
  }
}

作为属性值的对象属性

在React, JSX属性值可以通过存储在常规JavaScript对象中的数据来设置。
在我们的代码例子中，我们首先看到我们的JavaScript对象seaAnemones和与这个图像一起存储的值。然后我们看到这些存储的值是如何被用来设置SeaAnemones组件的JSX表达式中的<img属性的。

const seaAnemones = {
  src:
    'https://commons.wikimedia.org/wiki/Category:Images#/media/File:Anemones_0429.jpg',
  alt: 'Sea Anemones',
  width: '300px',
};
 
class SeaAnemones extends React.Component {
  render() {
    return (
      <div>
        <h1>Colorful Sea Anemones</h1>
        <img
          src={seaAnemones.src}
          alt={seaAnemones.alt}
          width={seaAnemones.width}
        />
      </div>
    );
  }
}

参考资料：Codecademy