web前端高级React - React从入门到进阶之初识React

た入场券 2022-11-19 15:57 182阅读 0赞

# 第一部分：React入门 #

### 系列文章目录 ###

[第一章：React从入门到进阶之初识React][React_React]  
[第一章：React从入门到进阶之JSX简介][React_JSX]  
[第三章：React从入门到进阶之元素渲染][React]  
[第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤][React_JSX_DOM_DOM]  
[第五章：React从入门到进阶之组件化开发及Props属性传值][React_Props]  
[第六章：React从入门到进阶之state及组件的生命周期][React_state]  
[第七章：React从入门到进阶之React事件处理][React_state]

### 文章目录 ###

*  第一部分：React入门
 *   *   *  系列文章目录
         *  一、React是什么？
         *  二、React的特点
         *  三、React的安装及使用
         *  四、项目目录介绍
         *  五、总结

### 一、React是什么？ ###

> React官方给出的解释是：React是一个声明式，高效且灵活的用于构建用户界面的JavaScript库。使用React可以将一些简短、独立的代码片段组合成赋值的UI界面，这些代码片段被称为“组件”  
> 简单来说：React就是一个JavaScript库，它可以用来构建UI界面，特点是：声明式、高效、灵活

### 二、React的特点 ###

> 上面在概念中其实已经提到React的特点：声明式、高效且灵活，那么它的高效灵活具体体现在哪里呢，下面进行详细说明：
> 
>  *  声明式设计：React采用声明范式，可以轻松描述应用
>  *  高效：React通过对DOM的模拟（虚拟DOM），最大限度的减小与DOM的交互，也就是说React中有一个虚拟DOM的机制，在操作DOM时一般都是直接操作虚拟DOM来改变真实DOM，从而减少对真实DOM的直接操作，从而提高DOM渲染方面的一些性能
>  *  灵活：React可以与已知的库或框架很好的配合使用
>  *  JXS语法：jsx是JavaScript语法的扩展，React一般都是配合jsx一起使用
>  *  组件化：react可以将不同的代码片段组合使用，这些代码片段被称为组件，通过构建组件可以使得代码更容易复用和维护，并能应用在大型项目开发中。
>  *  单向响应的数据流：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

### 三、React的安装及使用 ###

> react的使用有以下三种方式：
> 
>  *  从官网下载react库到本地，然后直接引入使用
>  *  直接使用CDN地址引入使用
>  *  搭建本地开发环境，通过npm安装到本地使用（该方法依赖node环境，需要先安装node）
> 
> 建议使用第三种方式，在日常项目开发中基本上也都是使用的第三种方式。下面我们来简单介绍一下第一和第二种使用方法，然后重点讲解第三种使用方式

*  官网下载react库到本地

> 官方下载地址：https://reactjs.org/  
> 该方式需要引用三个库：
> 
>  *  react.min.js ：React的核心库
>  *  react-dom.min.js：提供DOM相关功能的库
>  *  babel.min.js：将ES6语法转换为ES5的库

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react.min.js"></script>
    <script src="react-dom.min.js"></script>
    <script src="babel.min.js"></script>
    </head>
    <body>
     
    <div id="root"></div>
    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
     
    </body>
    </html>

*  直接使用CDN地址引入

> 与第一种方式相同：同样需要引入3个库

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
     
    <div id="root"></div>
    <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script>
     
    </body>
    </html>

*  通过npm安装使用

>  *  首先要确保已经安装了node环境
>  *  在国内使用npm速度很慢，建议可以使用淘宝定制的cnpm代替默认的cnpm，这样速度回快很多
>  *  cnpm配置：
> 
>     npm install -g cnpm --registry=https://registry.npm.taobao.org
>     npm config set registry https://registry.npm.taobao.org
> 
> 这样就可以使用 cnpm install xxx来安装了。

>  *  要想在本地搭建react的开发环境，首先我们需要通过cnpm来安装react的脚手架（create-react-app），其实就是用来构建react项目的工具包，通过该脚手架我们无需更多配置就可以快速构建React的开发环境
>  *  create-react-app自动创建的项目是基于Webpack和ES6的，命令使用如下：
> 
>     cnpm install -g create-react-app  /*全局安装create-react-app命令*/
>     create-react-app [project-name] /*项目名称不能是中文*/
>     cd project-name /*切换的项目目录下*/
>     npm start /*启动项目， 默认端口是3000*/
> 
>  *  在浏览器中打开http://localhost:3000就可以浏览项目了

### 四、项目目录介绍 ###

> 通过create-react-app创建的react应用会自动帮我们生成一些默认的目录结构，下面我们来一一介绍：
> 
>  *  project-name/ ：项目的根目录
>     
>      *  node\_modules：创建项目时自动引入的一些依赖库，这里的文件都是自动生成无需我们手动修改
>      *  public：存放一些不需要被打包压缩的公共资源及用于展示页面内容的HTML页面
>         
>          *  index.html 用于展示整个项目内容的html页面，该页面也是自动生成，一般不需要改动，项目中的入口组件（一般是src/index.js）在打包时会被自动引入到该页面中
>          *  favicon.ico 项目的图标文件
>          *  manifest.json 这个文件具体是干什么的也不太清楚，尝试改了里面的一些内容发现也没什么变化。官方给出的解释是：当你的web应用被安装到移动设备或桌面时，提供一些元数据。
>      *  src：这个目录自动生成且不能修改，一般我们在手动写的代码都是放在这个目录下的
>         
>          *  index.js 这个文件也是必须存在的，这个是项目打包时的入口文件，后续所有的组件的引入都会直接或间接依赖这个文件
>          *  其它文件或目录结构在这里可以随便使用或更改
>      *  package.json：这个是整个项目的配置文件，我们安装的所有依赖库都会在这里体现，包括我们上面通过 npm start启动项目的配置也是在这里配置的
>      *  README.md 项目的说明文件
>      *  scripts 脚本文件目录，比如存放启动项目或打包项目的脚本文件
>         
>          *  start.js 启动项目的脚本文件，比如我们运行 npm start时就会通过配置文件找到该目录下的该文件
>          *  build.js 打包项目的脚本文件，比如我们运行 npm run build打包时就会通过配置文件找到该目录下的该文件

### 五、总结 ###

>  *  通过本节学习我们了解了什么是react及react的特点
>  *  react安装和使用的三种方式
>  *  重点介绍了react脚手架（create-react-app）的安装，以及通过脚手架来创建react项目
>  *  通过脚手架创建的项目目录结构介绍

> [下一章节][React_JSX]我们将会讲解JSX的使用

[React_React]: https://blog.csdn.net/lixiaosenlin/article/details/112238757
[React_JSX]: https://blog.csdn.net/lixiaosenlin/article/details/112250656
[React]: https://blog.csdn.net/lixiaosenlin/article/details/112252554
[React_JSX_DOM_DOM]: https://blog.csdn.net/lixiaosenlin/article/details/111993181
[React_Props]: https://blog.csdn.net/lixiaosenlin/article/details/112260171
[React_state]: https://blog.csdn.net/lixiaosenlin/article/details/112314897