react的简单使用-在网站中添加React
React从一开始就被设计为逐步采用,并且你可以根据需要选择性地使用React。
大多数网站不是、也不需要是单页应用程序,通过仅仅几行代码并且无需使用构建工具,先尝试在网站的一小部分中使用React,然后逐步扩展它的存在,或只将其涵盖在少数动态部件中。
1. 添加一个DOM容器到HTML
<!--其他html-->
<div id="like_button_container"></div>
<!--其他html-->
该容器通常是空标签,React会替换DOM容器内的任何已有内容。
2. 添加script标签
<body>
<!--html标签-->
<!--...-->
<!--注意:部署时,将"development.js"替换为"production.min.js"-->
<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组件-->
<script src="like_button.js"></script>
</body>
3.创建一个React组件
在html页面的同一目录下创建like_button.js的文件。
"use strict";
const e = React.createElement;
class LikeButton extends React.Component{
constructor(props){
super(props);
this.state = {liked:false};
}
render(){
if(this.state.liked){
return "You liked this.";
}
return e(
'button',
{onClick:()=>{this.setState({liked:true})}},
'Like'
);
}
}
const domContainer = document.querySelector("#like_button_container");
ReactDOM.render(e(LikeButton),domContainer);
提示:为生产环境压缩JavaScript代码
在将网站部署到生产环境之前,要注意未经压缩的JavaScript可能会显著降低用户的访问速度。
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
可选:使用React和JSX
在上面的例子中,我们只依赖了浏览器原生支持的特性,这就是为什么我们使用了JavaScript函数调用来告诉React要显示什么:
const e = React.createElement;
rerurn e("button",{onClick:()=>{this.setState({liked:true})}},"Like");
但是,React还提供了一种用JSX来代替实现的选择:
return (<button onClick="()=>{this.setState({liked:true})}">Like</button>)
这两段代码是等价的。
快速尝试JSX
在项目中尝试JSX最快的方法是在页面中添加<script>
标签。
<script src="https://unpkg.com/bable-standalone@6/babel.min.js"></script>
现在可以在任何<script>
标签内使用JSX,方法是在为其添加type="text/babel"属性。
<!--其他div标签-->
<!--其他需要引入的script标签-->
<script src="https://unpkg.com/bable-standalone@6/babel.min.js"></script>
<script type="text/babel">
const e = React.createElement;
class LikeComponent extends React.Component{
{/*...省略其他代码...*/}
{/*...这是关键代码,用JSX语法代替js函数...*/}
return (<button onClick="()=>{this.setState({like:true})}">Like</button>);
}
</script>
这种方式适用于学习和创建简单的示例,并不适用于生产环境
将JSX添加到项目
添加JSX就像添加CSS预处理器一样,唯一的要求是你在计算机上安装了Node.js
在终端上跳转到你的项目文件夹,然后执行:
npm init -y #这是创建package.json文件
npm install babel-cli@6 babel-preset-react-app@3
在这里使用npm只是用来安装JSX预处理器
运行JSX预处理器
创建一个名为src的文件夹并执行这个终端命令:
npx babel --watch src --out-dir . --presets react-app/prod
这命令启动了一个对JSX的自动监听器。
如果创建一个 src/like_button.js 文件,监听器会创建一个预处理过的 like_button.js 文件,它包含了适用于浏览器的普通 JavaScript 代码。当你编辑带有 JSX 的源文件时,转换过程将自动重新执行。
小插曲
-
gist.github.com 被墙无法访问解决办法
windows下 打开C:\Windows\System32\drivers\etc\hosts文件
编辑器打开,在最后行添加192.30.253.118 gist.github.com 保存。 -
npm脚本
npm脚本就是脚本,我们使用脚本来自动执行重复性任务。例如构建项目,最小化css和js文件。脚本还用于删除临时文件和文件夹等。
有很多方法可以实现这一目标,如:可以编写bash/batch脚本,也可以使用任务运行程序如Gulp或Grunt。但是许多人由于其简单性和多功能性而转向npm脚本。他们还提供了减少学习、使用和跟踪工具的可能性。
- package.json中的脚本对象 我们的大部分工作将在package.json中进行。这是运行时创建的文件npm init
{ "name": "super-cool-package", "version": "1.0.0", "scripts": {...}, "dependencies": { ... }, "devDependencies": { ... } }
注意scripts文件中的对象,就是我们的npm脚本的去向。npm脚本像通常的JSON键值对那样编写,其中键是脚本的名称,值包含要执行的脚本。
以下是常见的npm脚本,也是一种特殊的脚本
"scripts":{"start":"node index.js",...}
此示例说明了NPM脚本的第一个重要方面-它们只是终端命令。它们在执行它们的操作系统的外壳中运行。因此,对于Linux而言可能是bash,对于Windows而言可能是cmd.exe