1、React的起源
1、React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
2、js开发
vscode的Emmet Abbreviate语法结构
!：直接生成HTML代码片段
1、练习原生实现Hello World点击按钮更改为Hello React
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 class="title"></h2>
<button class="btn">改变文本</button>
<script>
// 命令式编程：每一个操作都是计算机给出啊的一步步命令
// 声明式编程：
// 1、定义数据
let message = "Hello World";
const titleEl = document.getElementsByClassName("title")[0];
titleEl.innerHTML = message;
const btnEl = document.getElementsByClassName("btn")[0];
btnEl.addEventListener("click", e => {
message = "Hello React";
titleEl.innerHTML = message;
})
</script>
</body>
</html>
3、React 开发
1、依赖三个库
1）、react：包含react所必须的核心代码
2）、react-dom：react渲染在不同平台所需要的核心代码
3）、babel：将jsx转换成React代码的工具
注：react和react-dom拆分原因：react中包含了react和react-native所共同拥有的核心代码。
react-dom针对web、native所完成的事情不同
web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中
native端：react-dom会将jsx最终渲染成原生的空件（比如android和ios中控件）
2、Babel
浏览器并不支持ES6的语法，通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。
React和Babel的关系:
1）、默认情况下开发React其实可以不使用babel。
2）、但是前提是我们自己使用 React.createElement 来编写源代码，它编写的代码非常的繁琐和可读性差。
3）、我们就可以直接编写jsx(JavaScript XML)的语法，并且让babel帮助我们转换成React.createElement
3、开发react需要引入的三个库
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
通过react实现Hello World刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 标记代码能够被babel解析 -->
<script type="text/babel">
let message = "Hello World";
class App extends React.Component {
constructor() {
super();
this.state = {
message: "Hello World"
}
}
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClicked.bind(this)}>改变文本</button>
</div>
)
}
btnClicked=()=> {
this.setState({
message: "Hello React"
})
}
}
ReactDOM.render(
<App />, document.getElementById("app")
);
</script>
</body>
</html>
网友评论