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 = (<> 
Hello React
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 {girl.skills.join(',')}
}
const baseInfo = (
  

    姓名: {girl.name}
    妙龄: {girl.age}
  
)

const content = (
  

    
jsx-表达式

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

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

    {/* {}可以包表达式 */}
    
爱好:{girl.skills}
    
字符串:{'abc'}
    
字符串:{'{'}
    
数组:{[1, 2, 3]}
    
数值:{100}
    
函数：{f1()}
    
算数表达式：100/2={100 / 2}
    

      三元表达式：{girl.age < 28 ? '芳龄' : '年龄'} {girl.age}
    

    {/* 2. {}可以用在属性值上 */}
    
类名组合
    

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

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

JSX的条件渲染

实现方式

• if/else

• 三元运算符

• 逻辑与(&&)运算符

• switch case

三元:

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

短路运算符:

const isLogin = true
const content = (
{ isLogin && '您登录了'}
)

复杂情况: 用额外的函数

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

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

JSX的列表渲染

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

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

如何实现呢?

直接map呗

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

const list = 
{t}

注意:

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

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

最后

JSX样式处理

// 行内样式

  我是黑底红字的h1

要点: 

1. 为啥有两个{ { }}

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

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

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

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

使用ClassName

jsx可不是class了,是 className

// 类名

  我是黑底红字的h1


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

小结: 

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

• 外部： className

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

JSX整体总结:

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

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

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