React基础（一)之基础介绍及搭建项目

最新推荐文章于 2022-05-14 22:16:15 发布

jatej

最新推荐文章于 2022-05-14 22:16:15 发布

阅读量411

点赞数 1

本文链接：https://blog.csdn.net/jatej/article/details/104228958

版权

主要内容

1.基础内容介绍
2.环境搭建
3.脚手架安装及创建第一个react项目
4.初始化项目介绍

一、react基础介绍

1、参考网址：

英文官网: https://reactjs.org/
中文官网: https://doc.react-china.org/

2.介绍描述

用于构建用户界面的 JavaScript 库(只关注于View)
ReactJS是由Facebook在2013年5月推出的一款JS前端开源框架,推出式主打特点式函数式编程风格。
react三大体系

3、react的特点

Declarative(声明式编码)
Component-Based(组件化编码)
Learn Once, Write Anywhere(支持客户端与服务器渲染)
高效
单向数据流

4.react高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM
DOM Diff算法, 最小化页面重绘

5.react与vue的对比

react与vue异同对比之处：https://blog.csdn.net/HZHJC/article/details/95043142

相同之处：两者均采用虚拟Dom（virtual Dom）- 用Js模拟DOM结构，DOM变化的对比，放在Js层，以提高重绘性能
不同之处：

React.js相对于Vue.js它的灵活性和协作性更好一点；
而Vue.js有着丰富的API，实现起来更简单快速，所以当团队不大，沟通紧密时，选择Vue，更快速更易用

6.虚拟DOM

React提供了一些API来创建一种 `特别` 的一般js对象
var element = React.createElement('h1', {id:'myTitle'},'hello')
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

二、搭建react的运行环境

1、Node.js

安装Node只需要进入Node网站，进行响应版本的下载，然后进行双击安装就可以了。

Node中文网址：http://nodejs.cn/ (建议你在这里下载，速度会快很多)

Node.js 安装好以后，如果是Windows系统，可以使用 Win+R打开运行，然后输入cmd，打开终端（或者叫命令行工具）。

输入代码：

node -v

如果正确出现版本号，说明Node安装成功了。

然后再输入代码:

npm -v

如果正确出现版本号，说明npm也是没问题的，这时候我们的Node.js安装就算完成了。

注：npm默认镜像源为国外的，可以自行安装cnpm淘宝镜像源，速度快些

三、脚手架的安装及创建第一个React项目

1.脚手架安装

Node安装好之后，你就可以使用npm命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入下面的命令就可以了。

npm install -g create-react-app

create-react-app是React官方出的脚手架工具，其实有很多第三方的脚手架工具，也有很多优秀的。但是作为初学者为了减少踩坑，所以我们使用官方的脚手架。

2、创建第一个react项目

脚手架安装好以后，就可以创建项目了，我们在D盘创建一个ReactDemo文件夹，然后进入这个文件夹，创建新的React项目。

D:  //进入D盘
mkdir ReactDemo  //创建ReactDemo文件夹
create-react-app demo01   //用脚手架创建React项目
cd demo01   //等创建完成后，进入项目目录
npm start   //预览项目，如果能正常打开，说明项目创建成功

其实这些操作只需要再终端中输入就可以了。等到浏览器可以打开React网页，并正常显示图标后，说明我们的环境已经全部搭建完成了。

3.脚手架生成的项目目录介绍

README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。如果是工作中，你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。

package.json: 这个文件是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。

package-lock.json：这个文件用一句话来解释，就是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。

gitignore : 这个是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

node_modules :这个文件夹就是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

public ：公共文件，里边有公用模板和图标等一些东西。

src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

public中文件夹介绍

这个文件都是一些项目使用的公共文件，也就是说都是共用的

favicon.ico : 这个是网站或者说项目的图标，一般在浏览器标签页的左上角显示

index.html : 首页的模板文件，我们可以试着改动一下，就能看到结果

mainifest.json：移动端配置文件

src中文件介绍

这个目录里边放的是我们开放的源代码，我们平时操作做最多的目录。

index.js : 这个就是项目的入口文件

index.css ：这个是index.js里的CSS文件。

app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

四、其它相关基础及虚拟DOM

1.相关的基础js库

react.js: React的核心库
react-dom.js: 提供操作DOM的react扩展库
babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

在页面中导入

编码

<script type="text/babel"> //必须声明babel
  // 创建虚拟DOM元素
  const vDom = <h1>Hello React</h1> // 千万不要加引号
  // 渲染虚拟DOM到页面真实DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

2.虚拟DOM

1）.JSX语法

全称: JavaScript XML
是react定义的一种类似于XML的JS扩展语法: XML+JS
作用: 用来创建react虚拟DOM(元素)对象
var ele = <h1>Hello JSX!</h1>
注意1: 它不是字符串, 也不是HTML/XML标签
注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理