React 创建组件

1.React 创建一个组件

import React ,{Component} from "react " ;

==>import React from " react " ;const Component = React Component;

//组件名首字母需要大写

class TodoList extends Component{

    constructor(props){  //构造函数，优于其他函数，最先执行

        super(props);//固定写法

        // 定义数据

        this.state={}

    }

    render(){

        return ( //加个括号使得我们能在多行编写JSX的写法

            <div>//JSX语法规定最外层只能放一个标签，return的html标签不需要用双引号包裹，如果不想显示div在dom节点中，则可以用React的<Fragment> 占位符标签代替； 注：import React ,{Component， Fragment } from " react " ; 

                <div className="todoList">Hello React! </div>//需要写样式时，增加样式名不能用class，而应该用className；

                <p>如果我有两个标签，那就要在最外层加一层标签包裹</p>

            </div>

        )

    }

}

export default TodoList;//记得暴露组件，用于调用

2.调用组件，渲染到页面

import React from 'react';

import ReactDOM from 'react-dom';

import TodoList from 'TodoList';

ReactDom.render(

<TodoList />,document.getElementById('todoList');//将TodoList组件渲染至页面id为todoList的Dom节点中

);