环境

• 安装较新的node
• 用脚手架创建一个 react项目npx create-react-app my-app
• 删掉src目录下的内容

• 在src中新建 index.js

  HelloWorld

• 引入相关模块

// React 用户识别 jsx语法
// React.Component 用于定义组件
// ReactDom 用户将组件绑定到页面元素上
import React, { Component } from 'react'
import ReactDom from "react-dom"

• 定义 HelloWorld 组件 ```jsx

// 1.组件需要继承 React.Component类 class HelloWorld extends Component { // 2.render() 就是生成虚拟 dom 操作, 等价于 return React.createElement(“h1”) render() { return (

hello, world!

- 绑定组件到页面元素
```jsx
ReactDom.render(
    <HelloWorld/>,
    document.getElementById("root")
)

• 运行程序即可看到 hello world!

  组件数据传递

ReactDom.render(
    // 1.传递参数 msg="react"
    <HelloWorld msg={"react"}/>,
    document.getElementById("root")
)
// 2.子组件通过 this.props 获取父组件传递的参数, 这里传递 msg, 替换上面的 world 为 react
// 修改 HelloWorld 组件的 render方法, 将world => {this.props.msg}, 刷新页面即可看到 hello react
render() {
  return (
    <h1>hello, {this.props.msg}!</h1>
  )
}