React介绍及CDN方式实现Hello React案例

# React学习--day01 

## 一、React简要介绍和学习路线

### 1、React是什么?

​    React官方解释是用于构建用户界面的JavaScript库

​    目前对于前端开发来说,几乎很少直接使用原生的JavaScript来开发应用程序,而是选择一个JavaScript库(框架)

​        在过去的很长时间内,jQuery是被使用最多的JavaScript库;

​        在过去的一份调查中显示,全球前10,000个访问最高的网站中,有65%使用了jQuery,是当时最受欢迎的JavaScript库;

​        但是,目前甚至已经处于淘汰的边缘了;

### 2、如何学习React?

​    1)官方文档阅读网址:https://zh-hans.reactjs.org/

​    2)开源项目,eg:And Design

​    个人路线:还是跟着coderwhy先把基础学扎实了,再看开源

### 3、React课程体系(coderwhy)

React介绍及CDN方式实现Hello React案例_第1张图片

更正:三、Rudex==>Redux

## 二、邂逅React开发

### 1、React的介绍和特点

​    1)**介绍:**React:用于构建用户界面的JavaScript库(网址:https://zh-hans.reactjs.org/)

​    2)**特点:**

​    **声明式编程**:

​        声明式编程是目前整个大[前端开发](https://so.csdn.net/so/search?q=前端开发&spm=1001.2101.3001.7020)的模式:Vue、React、Flutter、SwiftUI;

​        它允许我们只需要维护自己的状态,当状态改变时,React可以根据最新的状态去渲染我们的UI界面;

​    **组件化开发:**

​        组件化开发页面目前前端的流行趋势,我们会将复杂的界面拆分成一个个小的组件;

​        如何合理的进行组件的划分和设计也是后面我会讲到的一个重点;

​    **多平台适配:**

​        2013年,React发布之初主要是开发Web页面;

​        2015年,Facebook推出了ReactNative,用于开发移动端跨平台;(虽然目前Flutter非常火爆,但是还是有很多公司在使用 ReactNative);

​        2017年,Facebook推出ReactVR,用于开发虚拟现实Web应用程序;(VR也会是一个火爆的应用场景);

### 2、Hello React案例说明

​        需求:在界面上显示一个文本:Hello world;点击文本下方按钮,点击后文本改为Hello React

### 3、React的开发依赖

​        在编写react代码前,需引入依赖库:

​        react:包含react所必须的核心代码

​        react-dom:react渲染在不同平台所需要的核心代码

​        babel:将jsx转换成React代码的工具

​        react和react-dom库已经能够编写react代码,并将其渲染出来;需要第三个包的原因是:在进行react开发,编写的react代码包含jsx语法,默认情况下浏览器是不识别的;所以需要babel将其变化成普通的Js代码让浏览器识别。

​        **第一次接触React会被它繁琐的依赖搞蒙,居然依赖这么多东西: (直接放弃?) --坚持就是胜利**

​                对于Vue来说,我们只是依赖一个vue.js文件即可,但是react居然要依赖三个包。

​                其实呢,这三个库是各司其职的,目的就是让每一个库只单纯做自己的事情;

​                在React的0.14版本之前是没有react-dom这个概念的,所有功能都包含在react里

​        **为什么要进行拆分呢?原因就是推出react-native**

​                react包中包含了react web和react-native所共同拥有的核心代码。

​                react-dom针对web和native所完成的事情不同:(暂时不太清楚具体,先知道有这么回事吧~)

​                √web端:react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中

​                √native端:react-dom会将jsx最终渲染成原生的控件(比如Android中的Button,iOS中的UIButton)

​        **Babel是什么呢?**

​                    Babel ,又名 Babel.js;是目前前端使用非常广泛的编译器、转移器。

​                    比如当下很多浏览器并不支持ES6的语法,但是确实ES6的语法非常的简洁和方便,我们开发时希望使用它。

​                    那么编写源码时我们就可以使用ES6来编写,之后通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。

​        **React和Babel的关系:**

​                    默认情况下开发React其实可以不使用babel。

​                    但是前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常的繁琐和可读性差。 

​                    那么我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement。

​                    后续还会详细讲到

​        **如何添加这三个依赖呢?**

​                    方式一:直接CDN引入

​                    方式二:下载后,添加本地依赖

​                    方式三:通过npm管理(后续脚手架再使用这种方式)

### 4、通过CDN的方式实现2中的Hello React案列

​        **正式实现案例之前,先实现使用react在页面上Hello React**

​        实现步骤:

​        ①引入React开发依赖

        
        
        

​        这里的crossorigin的属性的目的是为了拿到跨域脚本的错误信息

​        ②在编写React的script代码中,必须添加 type="text/babel",babel才会对代码进行转化;即可以让babel解析jsx的语法

        

​        ③渲染Hello World

​        在react18之前:通过ReactDOM.render()实现,有两个参数,第一个渲染内容,第二个渲染地    

```

   


   

   
   
   
   

```

​        在react18后,使用ReactDOM.createRoot()先创建一个根,告诉内容渲染在哪里;再使用render()传入内容

```
        //在react18之后:该方式可以创建多个根,但这个根目前还没有东西
        const root=ReactDOM.createRoot(document.querySelector('#root'));
        //拿到root使用render传入内容
        root.render(

Hello world

);
```

​        **回顾下vue实现Hello Vue:**(对比学习加强记忆)

```
    

    
    

    
```

​        个人感觉本质上是差不多的。

​        **正式实现2中提出的需求:**

​        在界面显示一个文本:Hello World;点击下方的一个按钮,点击后再将文本改变为Hello React

​        React介绍及CDN方式实现Hello React案例_第2张图片

​        ①将元素渲染到页面

​        通过`{}`语法来引入外部变量或者表达式;根据之前的知识能快速实现上图左边部分

```

   

  
   

   
   
   
   

```

​        ②现需实现点击button改变内容;具体实现:监听按钮的点击,定义一个函数,将其绑定给button

​        【vue中用@click】,react中,onClick={函数名}

```
    function btnClick(){
            message="Hello React";
        }
        root.render((


           

{message}


           
           

            ))
```

​        **注:此时存在问题:在vue中如果把数据修改了,会重新自动执行,然后根据最新的数据渲染界面;而React默认情况下不会重新执行,所以需在修改完数据后,重新渲染**    

```

   

  
   

   
   
   
   

```

​        ③优化:封装一个渲染函数,将重复代码抽取在函数中,进而简化代码。

```
    
```

你可能感兴趣的:(React学习,javascript,前端,react.js)