React JSX

React JSX

React使用JSX来代替常规的JavaScipt。
JSX是一个看起来很像XML的JavaScript语法扩展。
我们不需要一定使用JSX,但它有以下优点：

  • JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
  • 它是类型安全的，在编译过程中就能发现错误。
  • 使用JSX编写模板更加见到那快速。
    我们先看下以下代码
    1
    const element = <h1>Hello,world!</h1>;
    这种看起来可能有些奇怪的标签语法即不是字符串也不是HTML。
    它被称为JSX,一种JavaScript的语法扩展，我们扩展在React中使用JSX来描述用户界面。
    JSX是在JavaScript内部实现的
    我们知道元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。
    与浏览器的DOM元素不同,React当中的元素事实上就是普通的对象，React DOM可以确保浏览器DOM的数据内容与React元素保持一致。
    要将React元素渲染到根DOM节点中，我们通过把他们都传递给ReactDOM.render()的方法来将其渲染到页面上:
    1
    2
    var myDivElement = <div className="foo" />;
    ReactDOM.render(myDivElement,document.getElementById('example'));
  • 注意*
    由于JSX就是javaScript,一些标识符就像class和for不建议作为xml属性名。作为替代，React DOM使用className和htmlFor来作对应的属性。

使用JSX

JSX看起来类似HTML，我们可以看下实例：

1
2
3
4
ReactDOM.render(
    <h1>Hello,World!</h1>,
    document.getElementById('example')
);

我们可以在以上代码中嵌套多个HTML标签，需要使用一个div元素包裹它，实例中的p元素添加了自定义属性data-myattribute,添加自定义属性需要使用data-前缀。

1
2
3
4
5
6
7
8
ReactDOM.render(
    <div>
    <h1>欢迎学习React</h1>
    <p data-myattribute = "somevalue">这是一个不错的JavaScript库！</p>
    </div>
    ,
    document.getElementById('example')
);

独立文件

你的React JSX代码可以放在一个单独的文件上，例如我们创建一个helloworld_react.js文件,代码如下:

1
2
3
4
ReactDOM.render(
    <h1>Hello,world!</h1>,
    document.getElementById('example')
);

然后再HTML文件中引入该JS文件:

1
2
3
4
<body>
    <div id="example"></div>
    <script type="text/babel" src="helloworld_react.js"></script>
</body>

JavaScript表达式

我们可以在JSX中使用JavaScript表达式。表达式写在花括号{}中。实例如下：

1
2
3
4
5
6
ReactDOM.render(
    <div>
        <h1>{1+1}</h1>
    </div>,
    document.getElementById('example')
);

在JSX中不能使用if else语句，但可以使用conditional(三元运算)表达式来代替，以下实例中如果变量i等于1浏览器将输出true,如果修改i的值，则会输出false

1
2
3
4
5
6
7
ReactDOM.reder(
    <div>
        <h1>{1 == ? 'True!' : 'False'}</h1>
    </div>
    ,
    document.getElementById('example')
);

样式

React推荐使用内联样式。我们可以使用camlCase语法来设置内联样式，React会在指定元素数字后自动添加px。以下实例演示了为h1元素添加myStule内联样式：

1
2
3
4
5
6
7
8
var myStyle = {
    fontSize: 100,
    color: '#FF000'
};
ReactDOM.render(
    <h1></h1>,
    document.getElementById('example)
);

注释

注释需要写在花括号内，实例如下：

1
2
3
4
5
6
7
ReactDOM.render(
    <div>
    <h1>React注释</1>
    {/*注释....*/}
    </div>
    document.getElementById('example')
);

数组

JSX允许在模板中插入数组，数组会自动展开所有成员：

1
2
3
4
5
6
7
8
var arr = [
    <h1>裴雷</h1>
    <h2>欢迎来到React的世界</h2>
];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
);

展开全文 >>

React元素渲染

React元素渲染

元素是构成React应用得最小单位

1
const element = <h1>Hello,world!</h1>;

与浏览去得DOM元素不同，React当中的元素事实上是普通的对象,React DOM可以确保浏览器DOM的数据内容与React元素保持一致。

将元素渲染到DOM中

首先我们在HTML页面中添加一个id="example"的<div>

1
<div id="example"></div>

在此div中的所有内容都将由React DOM来管理，所以我们将其成为”根“DOM节点
我们用React开发应用时一般只会定义一个根节点，但如果你是一个在已有的项目中引用React的话，你可能会需要在不同的部分单独定义React根节点。
要将React元素渲染到根DOM节点中，我们通过把他们都传递给ReactDOM.render()的方法来将其渲染到页面中：

1
2
3
4
5
const element = <h1>Hello,world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

更新元素渲染

React元素都是不可变的。当元素被创建之后，你是无法改变其内容或者属性的
目前更新界面的唯一办法激素hi创建一个新的元素，然后将他传入ReactDOM.render()方法：
来看一下这个计时器的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
function tick(){
    const element = (
        <div>
            <h1>Hello,world!</h1>
            <h2>现在时{new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('example')
    );
}
setInterval(tick,1000);

以上实例通过setinterval()方法。
我们可以将要展示的部分封装起来，以下实例用一个函数来表示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function Clock(props){
    return (
        <div>
            <h1>Hello,world!</h1>
            <h2>现在时{props.date.toLocaleTimeString()}.</h2>
        </div>
    );
}
function tick(){
    ReactDOM.render(
        <Clock date={new Data()} />,
        document.getElementById('example')
    );
}

setInterval(tick,1000);

除了函数外我们还可以创建一个React.Component的ES6类，该类封装了要展示的元素,需要注意的是render()方法中，需要使用this.props替代props:
React只会更新必要的部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Clock extends React.Component{
    render(){
        return()
        <div>
            <h1>Hello,world!</h1>
            <h2>现在是{this.props.date.toLocaleTimeString()}.</h2>
        </div>
        );
    }
}

function tick(){
    ReactDOM.render(
        <Clock date={new Date()} />,
        document.getElementById('example')
    );
}

setInterval(tick,1000);

指的主义的是React DOM首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

展开全文 >>

React 安装

React可以直接下载使用
直接使用Staticfile CDN的React CDN库，地址如下：

1
2
3
4
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

官方提供的CDN地址

1
2
3
4
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

注意：在浏览器中使用Bael编译JSX效率是非常低的。

使用示例
以下示例输出了，Hello,world!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>

实例解析：
实例中我们引入了三个库：react.min.js,react-dom.min.js和babel.min.js

  • react.min.js-React的核心库
  • react-dom.min.js-提供与DOM相关的功能
  • babel.min.js-Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平
    1
    2
    3
    4
    ReactDOM.render(
        <h1>Hello,world!</h1>,
        document.getElementById('example')
    );
    以上代码将一个h1标题，插入id=”example”节点中
  • 注意*
    如果我们需要使用JSX,则标签得type属性需要设置为text/babel

通过npm使用React

cnpm安装

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：

1
2
3
4
cnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

项目的目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

manifest.json 指定了开始页面 index.html，一切的开始都从这里开始，所以这个是代码执行的源头。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
尝试修改 src/App.js 文件代码：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>欢迎来到菜鸟教程</h2>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
  }
}
 
export default App;

展开全文 >>

随笔

windows10自带unbutu16.4 LTS忘记root密码

1、进入Ubuntu，打开一个终端
2、sudo passwd root
3、输入新密码，确认密码。
4、修改密码成功，切换至管理员账号su root,输入新密码，成功

Ubuntu更改其他用户密码（如user）步骤：

1、进入Ubuntu，打开一个终端，输入 sudo su转为root用户。 注意，必须先转为root用户！！！
2、sudo passwd user(user 是对应的用户名)
3、输入新密码，确认密码。
4、修改密码成功，重启，输入新密码进入Ubuntu

windows10自带unbutu16.4 LTS安装界面

切换清华源

备份源文件并更改源

1
2
sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak
sudo vim /etc/apt/sources.list

把里面的都注释，然后直接把完整源放在文件后面

1
2
3
4
5
6
7
8
9
10
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-updates main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-backports main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-security main restricted universe multiverse
deb https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse
deb-src https://mirrors.tuna.tsinghua.edu.cn/ubuntu/ bionic-proposed main restricted universe multiverse

执行

1
sudo apt-get update

安装三个软件,xorg,xfce,xrdp

1
2
3
sudo apt-get install xorg
sudo apt-get install xfce4
sudo apt-get install xrdp

升级node 版本(linux)

npm install -g n
报错

1
2
npm ERR! notsup Unsupported platform for n@2.1.8: wanted
{“os”:”!win32”,”arch”:”any”} (current: {“os”:”win32”,”arch”:”x64”})

解决方案

1
npm install -g n -force

创建react项目出错

1
internal/modules/cjs/loader.js:584

结局方案：删除npm系统文件夹内的node_modules中的create-react-app文件夹
然后执行命令

1
2
cnpm install -g create-react-app
create-react-app my-app

React错误1 JSX表达式必须具有一个父元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Failed to compile
./src/TodoList.js
  Line 10:13:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   8 |                 <input /><button>提交</button>
   9 |             </div>
> 10 |             <ul>
     |             ^
  11 |                 <li>学英语</li>
  12 |             </ul>
  13 |         )
This error occurred during the build time and cannot be dismissed.
问题原因：return必须整体包含在一个大的元素中。
解决办法:1,最外层手动添加一个标签
2.,React16中提供了Fragment标签

import React, {Component,Fragment} from ‘react’;
import { render } from ‘react-dom’;

class TodoList extends Component {
render(){
return (





  • 学英语

  • Learning React



)
}
}
export default TodoList;

1
2
3
## React中得响应式设计思想和事件绑定
#
``

TypeError: Cannot read property ‘state’ of undefined
handleInputChange
D:/react/todolist/src/TodoList.js:33
30 | )
31 | }
32 | handleInputChange(e) {

33 | this.state.inputValue= e.target.value;
34 | // console.log(e.target.value);
35 | }
36 | }
View compiled▶ 22 stack frames were collapsed. This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

1
2
3
4
5
6
7
8
9
this只想问题
console.log(this)打印指向
# JSX语法细节
编写注释
<Fragment>组件中
{//}
class替换为className
转义
dangerouslySetInnerHTML={{}}

展开全文 >>

hexo引入音乐

引入音乐

通过网易云插件

通过https://music.163.com/网站搜索音乐

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=448184048&auto=1&height=66"></iframe>

展开全文 >>

博客编写文章指南

头部

  • title 标题：文章的题目
  • data 日期：可有hexo new命令自动生成也可自己编写
  • tags 标签：可快速找到对应文章

    正文

    图片引用

    例子：


音乐引用

文字加粗

设置文字加粗的语句是给文字加上一组双星号

表格

语法：
表头|表头|表头
—|:–:|—:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。

  • 有一个就行，为了对齐，多加了几个
    文字默认居左
  • 两边加：表示文字居中
  • 右边加：表示文字居右
    注：原生的语法两边都要用 | 包起来。此处省略

    加密

    安裝
    1
    npm install --save hexo-blog-encrypt
    更改站點目錄的config.yml 新增
    1
    2
    3
    4
    # Security
    ##
    encrypt:
        enable: true
    password: 加密的密碼
    abstract: 是該部落格的摘要，會顯示在部落格的列表頁，與description相同，可省略
    message: 密碼輸入框上面的描述文字

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

林深时见鹿<br>海蓝时见鲸