第一个react应用程序,初体验

最新推荐文章于 2024-09-06 17:28:41 发布

qq_46015513

最新推荐文章于 2024-09-06 17:28:41 发布

阅读量275

点赞数

分类专栏： React 文章标签： react.js

本文链接：https://blog.csdn.net/qq_46015513/article/details/120053548

版权

React 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、React

1.1、概述

1.2、特点

1.3、浏览器扩展与vscode开发扩展安装

2.3、在 jsx 中语法中的 js 表达式

学习目标:

使用render方法渲染页面显示
了解jsx的语法规则
使用jsx的语法进行界面渲染

一、React

网址：https://reactjs.org/

1.1、概述

React 起源于 Facebook(脸书) 的内部项目，它是一个用于构建用户界面的 javascript 库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来 Web 开发的主流工具之一。

1.2、特点

声明式

你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI

基于组件

组件时React最重要的内容，组件表示页面中的部分内容 -- react元素 -- 虚拟dom

学习一次，随处使用

使用React可以开发Web应用(React-dom)，使用React可以开发移动端(react-native)，可以开发VR应用(react 360)

1.3、浏览器扩展与vscode开发扩展安装

Chrome 浏览器扩展：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN

vscode安装react开发扩展

1.4、第一个react应用程序

react开发需要引入多个依赖文件，其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。

react.js 是核心，提供创建元素，组件等功能

https://unpkg.com/react@17/umd/react.development.js

react-dom.js 提供DOM相关功能

https://unpkg.com/react-dom@17/umd/react-dom.development.js

下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后，通过script引入到当前的网页中

// React 的核心库



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

//DOM 相关的功能



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

在html中定义reactjs渲染容器id和进行React实例化相关操作,完成helloworld显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试一下</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script>
    ReactDOM.render(React.createElement('div',{},'你好世界'),document.querySelector('#app'));
  </script>
</body>
</html>

二、JSX

2.1、简介

由于通过React.createElement()方法创建的React元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

React使用 JSX 来替代常规的JavaScript，JSX 可以理解为的JavaScript语法扩展，它里面的标签申明要符合XML规范要求。

jsx浏览器认识吗？

答：浏览器只能识别 js，对于jsx不能识别。浏览如果来识别 jsx呢？

答：react工程化中内置了一个将jsx=》js的编译工具 => babel

xml是什么?

答：严格的标记性语言。

简单的理解，xml当作是一个严格的html语言

标签有开始就必须要有结束

<div></div> <img />

属性值必须要有引号括起来

<img src="" alt="" />

React不一定非要使用JSX，但它有以下优点：

JSX 执行更快，因为它在编译为JavaScript代码后进行了优化

jsx是浏览不能够直接运行的，它需要一个转译器进行转译(babel),转为js

它是类型安全的，在编译过程中就能发现错误
声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率速
jsx语法中一定要有一个顶级元素包裹，否则编译报错，程序不能运行

js != jsx jsx => js+xml集合版本，js增强版，js有的它有，js没有它也有

2.2、重构helloworld

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签，引入解析jsx语法的babel类库，注意后续的script标签块中使用了jsx语法，则一定要申明类型 type="text/babel"，否则babel将不进行解析jsx语法。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

重构helloworld

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>jsx重构helloworld</title>

</head>

<body>

  <div id="app"></div>

  <script src="./js/babel.min.js"></script>

  <script src="./js/react.development.js"></script>

  <script src="./js/react-dom.development.js"></script>

  <script type="text/babel">

  ReactDOM.render(

    <div>你好世界</div>,

    document.getElementById('app');

  );

  </script>

</body>

</html>

2.3、在 jsx 中语法中的 js 表达式

2.3.1、嵌入JS表达式

在jsx语法中，要把JS代码写到 { } 中，所有标签必须要闭合。

let num = 100

let bool = false;

// JSX 语法

var myh1 = (

  <div>

    {/* 我是注释 */}

    {num}

    <hr />

{/* 三目运算 */}

{true ? "条件为真" : "条件为假"}

  </div>

)

2.3.2、属性绑定动态值

const title = '你好世界';

// 一定要会使用它，这样用法在工作中天天用

<button title={title}>按钮</button>

<style>

/* class 是es6定义类的关键词，在jsx中不能使用，只能通过 className来调用定义好的样式类 */

.btn{color:red;}

</style>

// classèclassName一定要牢记，因为在工作，写样式就要用到

// for è htmlFor

<button className="btn">按钮</button>

# jsx中绑定样式 style 只绑定对象

<div style={ {color: 'red'} }></div>

# 动态显示html元素 dangerouslySetInnerHTML 可以进行对html标签进行反转义

# 在react17中jsx可以直接解析html，但是对于转义后的html还不会自动转义，需要使用它

const html = 你好 ©世界

# 不转义html元素输出 {两个下划线html:html}

<div dangerouslySetInnerHTML={ {__html:html} }></div>

2.3.3、jsx渲染数组列表

<script type="text/babel">

  let arr = ["张三","李四","王五","赵六"];

  let app = document.getElementById('app');

  ReactDOM.render(

<div>

  {/* jsx中如果是一维数组，直接写上就可以遍历渲染了 */}

      { arr }

    </div>,

    app

  );

</script>

2.3.4、jsx渲染数组列表并处理

<script type="text/babel">

  let nameList = ['张三', '李四', '王五'];

  ReactDOM.render(

    <div>

      {

// 方案1

nameList.map((item,index) => {

return (<h3>{item}</h3>)

});

// 方案2 【推荐】

nameList.map((item,index) => <h3>{item}</h3>);

    </div>,

    document.getElementById('app')

  );

</script>