trhyert

 什么是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实列

//React DOM - 操作DOM的方法

//Babel - 一种JavaScript编译器，允许我们在旧浏览器中使用ES6 +，React中的组件都是一个对象class类

 
 

React基本写法：

       在html中创建一个跟容器

   

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

// 使用react来进行页面渲染需要进行下面的三步

React JSX

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

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

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

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

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

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

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

1.原生js创建dom元素
//字符串拼接
const cDiv = "

hello world

"+
             ""
//模板字符串
const cDiv = `

hello world

             `
2.React 传统的创建dom元素Dom
const cDiv = React.createElement("div",{className:"myclass"},"React创建Dom")
 
3.JSX创建dom元素
const cDiv =

        

hello world

        
        

 

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

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

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

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

const str = 12;
const cDiv =

         {//注释也要放在{}内
         /* 注释也要放在{}内*/
         }
         {str}
        

1+3*5+4={1+3*5+4}

        

内联样式通过对象方式引入,jsx中是没有单位的：

const myStyle = {
        background:"#800",
        fontSize:30  // 没有单位
    }
const str="今天天气";
const cDom =

        {str}
        

1+3*5+4={1+3*5+4}

    

ReactDOM.render(cDom,document.getElementById("app"))
 
// 如果不用变量的形式传参，我们要放在{{}}里面,如下：
const cDom =

        {str}
        

1+3*5+4={1+3*5+4}

    

ReactDOM.render(cDom,document.getElementById("app"))
 jsx数组遍历渲染列表

 
const Arr = [
    {name:"A"},
    {name:"B"},
    {name:"C"},
    {name:"D"},
    ];
const vDom = (  // 用小括号包裹JSX代码，便于理解，表示此代码块属于vDom变量的，也可以不适用小括号，效果一样（建议使用小括号包裹）。
    

        {
            Arr.map((item,index)=>{
                console.log(item)
                return
• {item.name}

            })
        }
    

);
ReactDOM.render(vDom,document.getElementById("app"))
 
--------------------- 
作者：shenroom 
来源：CSDN 
原文：https://blog.csdn.net/qq_41772754/article/details/88927544 
版权声明：本文为博主原创文章，转载请附上博文链接！