React学起来还是蛮快的,除了基于es6的内容需要过一遍之外,其他都很好理解。
这里再详细写一个标准笔记避免以后用的时候遗忘,再百度就慢多了。每一行哥都写有注释哦……
import React from "react"; //引入react
import ReactDOM from "react-dom";//引入react-dom 输出到网页必备
class Zhaohu extends React.Component { //创建一个 Zhaohu 组件 从 React.Componet中继承
render() { //render()渲染函数,感觉类似vue中的 el: ,想输出都要有render
return <li>你好,{this.props.content}</li>; // 在 React 中,函数式组件会默认接收一个 props 参数,然后返回一段 JSX
}
}
class App extends React.Component {
render() {
const todoList=["张三","李四","王五","张三小弟"]; //定义一个常量
return (
<ul>
<Zhaohu content={todoList[0]}/> //给Zhaohu这个组件的content赋值
<Zhaohu content={todoList[1]}/>
<Zhaohu content={todoList[2]}/>
<Zhaohu content={todoList[3]}/>
</ul>
);
}
}
ReactDOM.render(<App />, document.getElementById("root")); // 将App这个组件中的赋值结果 ,输出到id标签为root的html块中。