ree2

最新推荐文章于 2021-09-21 18:21:11 发布

shenroom

最新推荐文章于 2021-09-21 18:21:11 发布

阅读量209

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/qq_41772754/article/details/89005745

版权

React 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

什么是React？
React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上有超过100,000颗星。

React不是一个框架（与Angular不同，它更加自以为是）。

React是一个由Facebook创建的开源项目

React用于在前端构建用户界面（UI）

React是MVC应用程序的视图层（模型视图控制器）

React最重要的一个方面是，您可以创建组件（类似于自定义，可重用的HTML元素），以快速有效地构建用户界面。React还使用状态和道具简化了数据的存储和处理方式

设置安装
此方法不是设置Reactd的流行方法，但是如果曾经使用过Jquery这样的库，它将会很熟悉且易于理解，而且如若你不熟悉webpack，Babel和nodejs，那么他是最简单的入门方法

首先再不是用脚手架模式开发时，我们要在index.html文件中映入三个CDN库

//React - React顶级API实列
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
//React DOM - 操作DOM的方法
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//Babel - 一种JavaScript编译器，允许我们在旧浏览器中使用ES6 +，React中的组件都是一个对象class类
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

React基本写法：

在html中创建一个跟容器

<body>
<div id="app"></div>
</code>
注意：script标签类型一定要写"text/babel"，否则会报错误（只是正对非脚手架开发模式）。如下：（为了查询器简洁，后续贴出的js代码,会省略script标签对）

// 使用react来进行页面渲染需要进行下面的三步
<script type="text/babel">
   //1.获取页面真实的容器元素
   const Div = document.getElementById("app")
   //2.创建dom元素
   const cDiv = "<div>hello world</div>"
   //3.将虚拟dom渲染到页面（类似vue，将内容渲染到绑定的容器中）
   ReactDOM.render(cDiv,Div) //ReactDOM.render(类容,容器)。react固定方法

   也可以这样写：
   //1.创建dom元素
   const cDiv = "<div>hello world</div>"
   //2.将虚拟dom渲染到页面
   ReactDOM.render(cDiv,document.getElementById("app"))
</script>
React JSX

React 使用 JSX 来替代常规的 JavaScript 创建dom元素

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

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

2.它是类型安全的，在编译过程中就能发现错误。

3.使用 JSX 编写模板更加简单快速。

4.我们先看下以下代码：

1.原生js创建dom元素
//字符串拼接
const cDiv = "<div>hello world</div>"+
           "<span></span>"
//模板字符串
const cDiv = `<div>hello world</div>
           <span></span>`
2.React 传统的创建dom元素Dom
const cDiv = React.createElement("div",{className:"myclass"},"<span>React创建Dom</span>")

3.JSX创建dom元素
const cDiv = <div>
       <div>hello world</div>
       <span></span>
   </div>

从上面创建dom元素的写法上看，jsx更像是书写原生html一样，不错，就是跟原生html写法一样，以前怎么写html的，在JSX语法中就怎么写，但是JSX中，有以下几点需要注意：

1.JSX中书写class属性，要写成className,因为在js代码块中calss是关键保留字

2.JSX中只存在一个根标签，书写多个标签时，一定要在外围包裹一层容器来作为唯一的根标签，类似于vue中templaten模板一样，只能有一个根标签.

JSX中变量,表达式,注释要放在{}中

const str = 12;
const cDiv = <div>
       {//注释也要放在{}内
       /* 注释也要放在{}内*/
       }
       <span>{str}</span>
       <p>1+3*5+4={1+3*5+4}</p>
   </div>
内联样式通过对象方式引入,jsx中是没有单位的：

const myStyle = {
       background:"#800",
       fontSize:30 // 没有单位
   }
const str="今天天气";
const cDom =<div>
       <span>{str}</span>
       <p style={myStyle}>1+3*5+4={1+3*5+4}</p>
   </div>
ReactDOM.render(cDom,document.getElementById("app"))

// 如果不用变量的形式传参，我们要放在{{}}里面,如下：
const cDom =<div>
       <span>{str}</span>
       <p style={{background:"#800",fontSize:30}}>1+3*5+4={1+3*5+4}</p>
   </div>
ReactDOM.render(cDom,document.getElementById("app"))
jsx数组遍历渲染列表

const Arr = [
   {name:"A"},
   {name:"B"},
   {name:"C"},
   {name:"D"},
   ];
const vDom = ( // 用小括号包裹JSX代码，便于理解，表示此代码块属于vDom变量的，也可以不适用小括号，效果一样（建议使用小括号包裹）。
   <ul>
       {
           Arr.map((item,index)=>{
               console.log(item)
               return <li key={index}>{item.name}</li>
           })
       }
   </ul>
);
ReactDOM.render(vDom,document.getElementById("app"))

---------------------
作者：shenroom
来源：CSDN
原文：https://blog.csdn.net/qq_41772754/article/details/88927544
版权声明：本文为博主原创文章，转载请附上博文链接！

shenroom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ree2

什么是React？React是一个JavaScript库 - 最受欢迎的库之一，在GitHub上有超过100,000颗星。React不是一个框架（与Angular不同，它更加自以为是）。React是一个由Facebook创建的开源项目React用于在前端构建用户界面（UI）React是MVC应用程序的视图层（模型视图控制器）React最重...
复制链接

扫一扫