React入门学习笔记1-在网站中添加React

741 阅读4分钟

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