Components are first-class citizens of React, and when you use react, you are using components
A component represents a subset of functionality in a page
Combine multiple components to achieve complete page functionality
Component features: reusable, independent, combinable
There are two ways to create a react component
1. Create a component using a function
Function Component: A component created using a function (or head-cutting function) from JS
Convention 1: Function names must start with a capital letter
Convention 2: A function component must have a return value that represents the structure of the component
If the return value is null, nothing is rendered
function Hello(){
return (<div>这是一个函数组件</div>)
}
ReactDOM.render(<Hello />,document.querySelector('#root'))
2. Create a component with a class
Class Component: Use ES6 class to create a component
Convention 1: Class names must start with a capital letter
Convention 2: Class components should inherit from the React.Component parent class, allowing you to use the methods and properties provided in the parent class
Convention 3: Class components must provide a render() method
Convention 4: The render() method must have a return value that represents the structure of the component
class Hello extends React.Component {
render(){
return (<div>Hello class Component</div>)
}
}
ReactDOM.render(<Hello />,document.querySelector('#root'))
