React 的介绍和脚手架安装

一.什么是 React

• React是由Facebook（脸书）开源的一个进行创建用户界面的一款JavaScript库，如今已应用于Facebook及旗下的Instagram应用。
• React 是一个简单的 javascript Ui 库,用于构建高效,快速的用户界面.使用React可以将一些简短、独立的代码片段组合成复杂的UI界面，这些代码片段被称为”组件”

二.React 的特点

• 高效灵活: react 使用 VDOM,减少了 DOM 的交互,而且它能与以知的库或框架完美配合
• react 的组件可以代码复用
• react 的单向响应的数据流会比双向绑定的更安全,速度更快

三.React的基本使用

1. 使用
   1. 引入react和react-dom两个 js 文件;

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

2. 创建React元素；
3. 渲染React元素到页面中;

// 指定要渲染的范围；
 <div id="root"></div>
 ​
 <script> 
      // React.createElement()方法用于创建react元素；
      // - 返回值：React元素
      // - 第一个参数：要创建的React元素名称
      // - 第二个参数：该React元素的属性
      // - 第三个及其以后的参数：该React元素的子节点，节点也可以是标签
    
     const h1 = React.createElement('h1', null, '哈哈哈哈')
     const span = React.createElement('span', null, '小明')
     const p = React.createElement('p', { className: 'so' }, '大明', span)
    const div = React.createElement('div', null, '我是div', p, h1)
 ​
     // ReactDOM.render() 说明
    // - 返回值:React元素
    // - 第一个参数：要渲染的React元素
     // - 第二个参数：DOM对象，用于指定渲染到页面中的位置(要渲染的内容存放容器)
     // - 第三个参数: callback, 渲染后的回调函数
     ReactDOM.render(div,document.getElementById('root'))
 </script> 

四.React脚手架

1. react 脚手架的安装

1.先检查自己是否安装node.js
	如果安装了,就执行第二步;没有的话就去node.js管网下载
	检查是否安装 node -v
2.全局安装react脚手架
在命令行窗口输入: npm i -g create-react-app
或者
在命令行窗口输入: yarn global add create-react-app
3.创建项目
在命令行窗口输入: create-react-app 项目名称
或者通过npx的方式
npx cerate-react-app 项目名称
创建成功之后，在命令窗口输入cd todolist(进入当前的文件夹)
4.启动项目
在命令窗口输入: npm start(启动当前的项目)
一般我们默认的端口号是3000
启动项目成功后就是下面的页面

2.react 脚手架项目目录介绍

node_modules — 项目依赖包文件夹
public — 静态资源文件夹
	favicon.icon — 网站偏爱图标
	index.html — 主页面
	logo192.png — logo图
	logo512 — logo图
	manifest.json — 应用加壳的配置文件
	robots.txt — 爬虫协议文件
src — 源码文件夹
	App.css — App组件的样式
	App.js — App组件 
	App.test.js — 给App测试
	index.css — 样式
	index.js — 入口文件
	logo.svg — logo图
	reportWebVitals.js — 页面性能分析文件（需要web-vitals库的支持）
	setupTests.js — 组件单元测试的文件（需要jest-dom库的支持）
	
gitignore — git的选择性上传的配置文件
配置不会上传的文件信息。git ignore 从名称就可以看到。
package.json — Webpack配置和项目包管理文件
README.md ----项目介绍文件

五.JSX

1.JSX的介绍

• JSX是JavaScript XML的简写，表示在 JavaScript 代码中写 XML（HTML） 格式的代码
• 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
• JSX 是 React 的核心内容
  1. JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展
  2. 需要使用 babel 编译处理后,才能在浏览器环境中使用
  3. create-react-app 脚手架中已经默认有该配置,无需手动配置
  4. JSX 是 React.createElement 方法的语法糖

注意点:

调用 React.createElement() 方法创建 react 元素
1. 不建议使用这种,代码繁琐
2. 不直观,无法一眼看出所描述的结构
3. 可以使用 JSX 替代

2.JSX 的基本使用

1.在 index.js 中
// 使用jsx语法创建react元素
// const title = React.createElement('h1',null,'Hello React!!!!!!!!!')
// const title = React.createElement(
		'h1',
		{className:'c1'},
		'Hello React!!!!!!!!!'
)
// 使用jsx
const title2 = <h1>哈哈哈哈哈 <span>我是span标签</span></h1>
const name = '张三'
// 渲染react元素到页面上
ReactDOM.render([title2,name],document.getElementById('root'))

3.在JSX中使用javascript表达式

切入 js 表达式
语法: {javascript表达式}
单大括号中可以使用任意的 JavaScript 表达式 （值，变量，函数调用，三元运算符，数组）
注意点:

1. 语法中是单大括号,不是两个大括号
2. 不能在{}中出现语句(比如:if/for)
3. 只有一个顶层的包含元素

const age = 20
const title2 = (
    <h1 className="title" key="1">哈哈哈哈哈 <span>我是span标签今年{age}</span></h1>
)
ReactDOM.render([title2,name],document.getElementById('root'))

4.JSX 的条件渲染

也可以使用三元运算符
loading ? console.log('loading当前正在加载中....') : (<div>loading加载失败</div>)
// 条件渲染
const loading = true;
const btn = () => {
    if(loading) {
        return console.log('loading当前正在加载中....')
    }
    return <div>loading加载失败</div>
}
const title = (
    <button>
        点击触发事件:
        {btn()}
    </button>
)
// const name = <div key="2">张三</div>
// 渲染react元素到页面上
ReactDOM.render([list,title],document.getElementById('root'))

5.JSX 的列表渲染

• 如果要渲染一组数据,应该使用数组的 map() 方法
• 注意: 渲染列表时应该添加 key 属性,key属性的值要保证唯一
• 原则: map() 遍历谁,就给谁添加 key 属性
• 注意:尽量避免使用索引号作为 key

// 列表渲染
const songs = [
    {id:0,name: '小明',age:20},
    {id:1,name: '中明',age:15},
    {id:2,name: '老明',age:23}
]
const list = (
    <ul>
        {songs.map(item => <span key={item.id}>{item.name}</span> )}
    </ul>
)

const name = <div key="2">张三</div>
// 渲染react元素到页面上
ReactDOM.render([title2,name,list],document.getElementById('root'))

6.JSX 样式

1. 行内样式 ------- style

• 注意点: 是双大花括号;

const c = {color:'blue'}
const rec = (
  <div>第一个react
    <h1 style={c}> 
    // <h1 style={{color:'blue'}}>
      JSX 的样式处理
    </h1>
  </div>
)

2. 类样式 ----- className (推荐)

• 推荐使用 className 的方式给 JSX 添加样式
• 注意: 使用小驼峰命名

<h1 className="title"> 
   JSX的样式处理 
</h1>

7. react 的事件绑定

• React 事件绑定语法和 DOM 事件语法相似
• 语法: on + 事件名称 = {事件处理程序}, 比如: onClick={() => {}}
• 注意: React 事件采用驼峰命名法,比如: onMouseEnter,onFocus
• 在标签中绑定事件:

const b = <div onClick={()=> alert('点击成功')}>{true && '渲染成功'}</div>

总结: 今天学习了什么是react,react的基本使用,还有react的脚手架的搭建以及目录的介绍,和JSX语法