当前位置: 首页 > 工具软件 > REE > 使用案例 >

ree2

梅庆
2023-12-01

 什么是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 
版权声明:本文为博主原创文章,转载请附上博文链接!

 类似资料:

相关阅读

相关文章

相关问答