(一)vscode准备:
推荐插件:Atom One Dark Theme (主题类)、Bracket Pair Colorizer(方便代码识别，有线条)、open in brower(直接在浏览器打开html代码)、Live Server(直接在本地帮你启动一个服务,让html页面跑在服务中,页面改变后自动刷新)
为了避免在vscode中输入标签没有提示，操作如下：
vscode--首选项--设置--搜索:emmet.includeLanguages然后添加选项键值:"javascript": "javascriptreact"(注意在vscode中没有引号),
没加之前的效果.png
(二)第一个应用:
开发应用可以采取两种方式:
1.在线引用(本例中使用的)
2.脚手架创建(后期案例中使用)
2.1React开发依赖
- react(包含核心代码,比如react和react native的)
- react-dom(渲染web和native端不同平台核心代码)
- babel(把jsx语法糖转换为React代码工具)
2.2注意script标签添加type类型
crossorigin的作用:将远程的js脚本的一些错误体现打印在浏览器控制台(拿到跨域脚本的错误,通过npm包管理的时候实际上是没有这个的)。
demo示例:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个React在线Demo</title>
<!-- 此处是三个依赖 -->
<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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<!-- 注意: 使用jsx,并且script 标签要识别jsx 语法的话 必须添加type的类型-->
<script type="text/babel">
ReactDOM.render(<h2>Hello,World</h2>,document.getElementById('app'))
// 渲染的东西都会覆盖id=app的这整个div,当然也有办法让它不覆盖，后续补充这
// render('渲染的内容',挂载的元素)
</script>
</html>
(三)应用改进:
我想实现的效果是，页面上增加一个按钮，并且点击按钮的时候,页面由"Hello,World"变为"Hello,React"
<script type="text/babel">
let message="Hello ,World!";
function btnClick(){
message="Hello,React!";
console.log(message);
}
ReactDOM.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>点击改变</button>
</div>,
document.getElementById('app'))
</script>
注意:根标签最外层只有一个标签,故用div或者fragment标签进行包裹。
结果:发现页面并没有改变，思考为啥?控制台打印出来的message显示已经变了。
原因:react没有做到自动界面响应式变化，换句话说，只需我们重新调用一下React.render()函数即可。
(四)应用完成代码:
<script type="text/babel">
let message="Hello ,World!";
function btnClick(){
message="Hello,React!";
console.log(message);
render();
}
function render(){
//将渲染过程单独封装成一个函数render()
ReactDOM.render(
<div>
<h2>{message}</h2>
<button onClick={btnClick}>点击改变</button>
</div>,
document.getElementById('app'))
}
render();
</script>
到目前为止我们基本上实现了最初的需求，但是代码看起来比较凌乱，我们做最后一步的优化工作:内容封装成组件==>组件render()函数，函数return真实渲染的内容。
优化第一步:
<script type="text/babel">
//组件名称 大小开头
class App extends React.Component{
constructor(){
super();
this.message="Hello,World";
}
render(){
// 返回的时候最外层需要有一个根节点包裹,取变量或者函数必须添加this
return (
<div>
<h1>{this.message}</h1>
<button onClick={this.BtnClick.bind(this)}>点击改变</button>
</div>
)
}
BtnClick(params) {
// 如果在触发点击事件的时候不绑定this,那么this默认是undefined,赋值操作就会报错,绑定后才指向App实例,不会出现报错
this.message="Hello,React";
console.log(this.message);//打印出 Hello,React,但是界面并没有刷新
//在组件中,千万不要手动的调用render()函数,因为并不知需要根据你最新的数据去生成jsx重新渲染,应该交给App实例自己去管理
// this.render() 这是错误的用法
}
}
// 现在渲染内容 记得是组件<App/>而不是其它元素 或者单纯的App类名
ReactDOM.render(<App/>,document.getElementById('app'))
</script>
(五)优化最终代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个React在线Demo</title>
<!-- 此处是三个依赖 -->
<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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<!-- 注意: 使用jsx,并且script 标签要识别jsx 语法的话 必须添加type的类型-->
<!-- 注意2：多个标签最外层(根),最外层只有一个标签 -->
<script type="text/babel">
//组件名称 大小开头
class App extends React.Component{
constructor(){
super(); //初始化父类
this.state={
message:"Hello,World"
}
}
render(){
// 返回的时候最外层需要有一个根节点包裹,取变量或者函数必须添加this
return (
<div>
<h1>{this.state.message}</h1>
<button onClick={this.BtnClick.bind(this)}>点击改变</button>
</div>
)
}
BtnClick(params) {
//this.state.message="Hello,React"; //错误用法
// console.log(this.message);//打印出 Hello,React,但是界面依然不刷新
this.setState({
message:"Hello,React"
})
}
}
// 现在渲染内容 记得是组件<App/>而不是其它元素 或者单纯的App类名
ReactDOM.render(<App/>,document.getElementById('app'))
</script>
</html>
网友评论