React脚手架-从零开始

创建方式1

1.安装脚手架

npm i -g create-react-app

2.用脚手架创建项目

create-react-app your-project-name

创建方式2

直接使用npx来创建项目

npx create-react-app your-project-name

解释：

• npx create-react-app 是固定命令，create-react-app 是 React 脚手架的名称

• your-project-name 表示项目名称，可以修改

tip: npx 是 npm v5.2 版本新添加的命令，用来简化 npm 中工具包的使用

-------------------------------------------

JSX是什么

JSX：是 JavaScript XML的缩写,在 JS 代码中书写 XML 结构

注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。

理解为js中可以写html就行

 jsx注意事项:

1. jsx必须要有一个根节点

2. 属性名不能用js中的关键字。例如class, for

3. 单标签要闭合

4. 换行建议使用( )包裹

5. 老版本(16.8)先引入react才能使用jsx

示例:

import ReactDOM from 'react-dom'

const title = (<> <h1>Hello React</h1><p>p标签</p> </>)

ReactDOM.render(title, document.querySelector('#root'))

jsx的嵌入表达式

 花括号内些表达式:  {js表达式} 

就是跟Vue的插值语法类似, 只不过react可以写更多类型

可以写:

1. 表达式

   定义：数据类型和运算符的组合（可以单独出现数据类型，也可以数据类型+运算符的组合）

   特点：有值（或者能够计算出一个值）； 能被console.log()

2. 其他的jsx表达式(html结构)

3. 注释

不可以写:

1. 对象

2. js语句：if 语句/ switch-case 语句/ 变量声明语句

看下面这段示例吧

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

const girl = {
  name: '小芳',
  age: 19,
  logo: 'https://create-react-app.dev/img/logo.svg',
  skills: ['唱歌', '收稻子']
}

const f1 = () => {
  return <i>{girl.skills.join(',')}</i>
}
const baseInfo = (
  <div>
    姓名: {girl.name}
    妙龄: {girl.age}
  </div>
)

const content = (
  <div style={{ padding: 50 }}>
    <h1>jsx-表达式</h1>

    {/* 1. {} 可以用在内容上 */}

    {/* {}可以包其他的jsx */}
    {baseInfo}

    {/* {}可以包表达式 */}
    <p>爱好:{girl.skills}</p>
    <p>字符串:{'abc'}</p>
    <p>字符串:{'{'}</p>
    <p>数组:{[1, 2, 3]}</p>
    <p>数值:{100}</p>
    <p>函数：{f1()}</p>
    <p>算数表达式：100/2={100 / 2}</p>
    <p>
      三元表达式：{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}
    </p>

    {/* 2. {}可以用在属性值上 */}
    <p className={['class1', 'class2'].join(' ')}>类名组合</p>
    <img width="80" src={girl.logo} />

    {/*
    下面是错误的示范
    不能输出对象，不能使用语句
    <p>{{ a: 1 }}</p>
    <p>{var a =1 }</p> */}
  </div>
)
ReactDOM.render(content, document.getElementById('root'))

-----------------------------------------------------

JSX的条件渲染

实现方式

• if/else

• 三元运算符

• 逻辑与(&&)运算符

• switch case

三元:

const flag = 0
const content = (<div>{flag ? '达成' : '没有达成'}</div>)

短路运算符:

const isLogin = true
const content = (<div>{ isLogin && '您登录了'}</div>)

复杂情况: 用额外的函数

const loadData = (isLoading) => {
  if (isLoading) {
    return <div>数据加载中，请稍后...</div> 
  } else {
    return <div>数据加载完成，此处显示加载后的数据</div>
  }
}
const content = <div>{loadData(true)}</div>

--------------------------------------------

JSX的列表渲染

从后端取回来的数据保存在数组中，需要用列表展示。这里的数组如下：

const skills = [
  { id: 1, name: 'html' }, 
  { id: 2, name: 'css' }, 
  { id: 3, name: 'js' }
]

如何实现呢?

直接map呗

// 完整格式
const t = skills.map(function(item) {
            // 循环要设置key哦
  return <ol key={item.id}>技能{item.id}: {item.name}</ol>
})

const list = <ul>{t}</ul>

注意:

循环要加key哦  React 内部用来进行性能优化时使用的，在最终的HTML结构中是看不到的。

---------------------

最后

JSX样式处理

<dom元素 style={ {css属性1：值1,css属性2：值2} }></dom元素>

// 行内样式
<h1 style={ {color: 'red', width: 200, backgroundColor: 'black'} }>
  我是黑底红字的h1
</h1>

要点: 

1. 为啥有两个{{ }}

   1. 外层的{}表示 要开始写js了

   2. 内层的{}表示是一个对象

2. 属性名是小驼峰格式 (background-color ===> backgroundColor)

3. 属性值是字符串, 如果单位是px，可以简写数值

使用ClassName

jsx可不是class了,是 className

// 类名
<h1 className="title">
  我是黑底红字的h1
</h1>

.title{
  color: red;
  width: 200px;
  background-color: black;
}

小结: 

• 行内： style={{对象，小驼峰}}

• 外部： className

--------------------------------------

JSX整体总结:

• React 使用 JSX 来编写 UI（HTML）

• React 完全利用 JS 语言自身的能力来增强 UI 的编写 - 能用 JS 来实现的功能绝不会增加一个新的 API

• 现在，就可以使用 React 来编写任意 UI 结构了