react初体验

这是我参与8月更文挑战的第24天，活动详情查看：8月更文挑战

安装react的环境

npm install -g create-react-app

最后利用脚手架建立项目demo01

create-react-app demo01

（关于create-react-app很慢的问题）由于某原因,在拉取各种资源时,往往会巨慢

解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。

npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry
-- 或npm info express

设置成功后，再执行create-react-app my-app，就会有惊喜。

\

react的优缺点：

优点：

1、JSX写在javascript里，执行更快，编译为javascript代码时进行优化

2、类型更安全，编译过程如果出错就不能编译，及时发现错误

3、JSX编写模板更加简单快速（不要跟vue比）

\

注意：

1、JSX必须要有根节点

2、正常的普通HTML元素要小写，如果是大写，默认认为是组件

\

JSX表达式

1、由HTML元素构成

2、中间如果需要插入变量用{}，且不用写""或者''

3、{}中间可以使用表达式

4、{}中间表达式中可以使用JSX对象

5、属性和html内容一样都是用{}来插入内容

\

JSX的class是className, 而不是直接class（当然，直接class也不会出错）

import React from 'react'
import ReactDOM from 'react-dom'

const classStr = "regBg"
const element = (
    <div>
        <h1 className={"abc " + classStr}>hello world</h1>
    </div>
)

ReactDOM.render(element, document.getElementById('root'))

结果：

如果classname是数组形式 =>

如：

import React from 'react'
import ReactDOM from 'react-dom'

const classStr = ["regBg", "red"]
const element = (
    <div>
        <h1 className={classStr}>hello world</h1>
    </div>
)

ReactDOM.render(element, document.getElementById('root'))

则会报错， {}内可写数组，可无法识别

结果：

如果数组的拆分再合并，则可以 如 =>

import React from 'react'
import ReactDOM from 'react-dom'

const classStr = ["regBg", "red"].join(' ')
const element = (
    <div>
        <h1 className={classStr}>hello world</h1>
    </div>
)

ReactDOM.render(element, document.getElementById('root'))

结果：

JSX的style

如果在JSX里面写style，是没有-的，并且第二个字母需要大写（borderBottom: 1px solid #ddd;）

import React from 'react'
import ReactDOM from 'react-dom'

const exampleStyle = {
    background: "skyblue",
    borderBottom: "1px solid #red"
}

const element = (
    <div>
        <h1 style={exampleStyle}>hello world</h1>
    </div>
)

ReactDOM.render(element, document.getElementById('root'))

1、class、style中，不可以存在多个class或者style属性

<div class='abc' class={active}></div>   // 错误的表示

2、style样式中，如果存在多个单词的属性组合， 第二个单词开始， 首字母大写, 也可以用引号''写起来

const exampleStyle = {
  backgroundColor: "skyblue",
  borderBottom: "4px solid red",
  'background-image': "url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)"
}

3、注释

必须要括号的表达式内书写，否则报错 => {/* 代码 */}