React初体验

1.React定义与三大特性

用于构建用户界面的JavaScript库

1. 声明式编程
2. 组件化
3. 一次学习，随处编写

2.环境搭建与调试

创建项目：npx create-react-app react-basic
react-basic>src>index.js下输入代码：

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

const element = <h1> hello world </h1>;
ReactDOM.render(element, document.getElementById("root"));

react-basic终端运行代码即弹出helloworld页面：

npm start

3.什么是JSX

JSX是JavaScript的一个语法扩展，使用时一定要调用react

const element = <h1> hello world </h1>;

React Element(element)是不可变的对象

4.react组件

组件首字母要大写
最简单的函数组件：

function Welcome() {
    return <h1>Hello Jun</h1>
}

传值函数组件：

const element=<welcome name="Jun" age={17}/>
function Welcome(props) {
    return <h1>Hello,{props.name},your age is{props.age}</h1>
}

类组件：

class Welcome extends React.Component{
    render(){
        return <h1>Hello,{this.props.name},your age is{this.props.age}</h1>
    }
}

props是只读的（readonly）不能被修改