从零开始react(1)

一.React脚手架-从零开始创建项目

创建方式1: 

1. 先全局安装脚手架工具包 (命令：npm i -g create-react-app )
2. 用脚手架工具来创建项目(create-react-app your-project-name(your-project-name 表示项目名称，可以修改 ) )

创建方式2:

• 直接使用npx来创建项目: npx create-react-app your-project-name

目录:

 

 

 二.理解react-dom

在package.json文件中:

rect包 提供必要功能来定义react组件。

react-dom包用来将react组件渲染到dom中。

react-native包 用来将react组件渲染到IOS和Android程序中。

在页面创建一个h1标签:(index.js)

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// 创建元素
const title = React.createElement('h1', {id:'box'}, '第一个小demo')

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

小练习:在页面渲染如下结构:

<div>
  <h1>
    第一个react程序
  </h1>
  <p>
    react是用来构建用户界面的js库
  </p>
</div>

实列代码:

React.createElement的格式:

React.createElement('标签名',{标签上的属性1：值},子元素1，子元素2)

 三.jsx基本使用

为什么会使用jsx?

由上面的小案例我们会发现在使用createElement比较繁琐,不能够直观看出所描述的结构,在使用中也不美观,开发使用中代码体验很差.

当我们使用jsx来完成上面demo时候,代码如下:

由上面代码可以看出 代码结构非常明确,在我们开发中相当如在写html结构.

小问题:为啥在js代码中可以直接写jsx的代码？

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

jsx这么好用那我们在使用中有哪些注意事项?

• jsx必须要有一个根节点
• 属性名不能用js中的关键字。例如class, for
• 单标签要闭合
• 换行建议使用()包裹
• 老版本(16.8)先引入react才能使用jsx

两种根节点格式: 

• 格式1：<> 内容</>
• 格式2：<React.Fragment> 内容</React.Fragment>

四.JSX-嵌入表达式

通过上面的学习，我们已经可以使用jsx来描述一段静态结构了，更多的情况下，我们需要动态的结构。例如，在页面上输出一个随机值

格式:{js表达式} 

大括号是一种特殊的语法，让 JSX 解析器知道它需要将它们之间的内容解释为 JavaScript代码 而不是字符串

作用：执行{}内部的代码，并输出结果。

花括号里面可以写什么?

 五.JSX-条件渲染

条件?

• if/else
• 三元运算符
• 逻辑与(&&)运算符

简单情况(三元表达)

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-列表渲染

在JSX中使用数组的map方法来生成列表结构

场景:

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

// 需要生成的结构

<ul>
  <ol>技能1：html</ol>
  <ol>技能2：css</ol>
  <ol>技能3：js</ol>
</ul>

如何实现???

代码如下:

七.JSX 样式处理

1.行内样式 - style:

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

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

 2.把样式写在额外的.css文件中，然后引入.css文件

import './index.css'

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

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

 要点:

1---为啥有两个{{ }}?

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

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

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

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