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

第一部分:React入门

系列文章目录

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

文章目录

  • 第一部分: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项目
  • 通过脚手架创建的项目目录结构介绍

下一章节我们将会讲解JSX的使用

你可能感兴趣的:(React,WEB前端框架,react,create-react-ap,react安装,react特点,react-dom)