（一）React 学习笔记：React概述及基本使用

React 学习笔记

（一）React 学习笔记：React概述及基本使用
（二）React 学习笔记：React 组件基础
（三）React 学习笔记：React 组件进阶
（四）React 学习笔记：React 原理揭秘
（五）React 学习笔记：React 路由基础

---

---

1.React 概述

1.1 什么是 React

React 是一个用于构建用户界面的 JavaScript 库

主要用来写 HTML 页面，或构建 Web 应用（相当于 MVC 中的视图层，只负责视图渲染）

1.2 React 的特点

1. 声明式：只需要描述UI是什么，react 负责渲染
2. 基于组件：组件是最重要的内容，表示页面中各种功能，可以实现完整功能
3. 学习一次随处使用：可以开发 web、移动端、VR

2.React 的基本使用

2.1 React 的安装

安装命令：npm i react react-dom

2.2 React 的使用

1.引入 react 和 react-dom 两个 js 文件

<script src="./node_modules/react/umd/react.development.js"></script>
		<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

2.创建 React 元素

3.渲染 React 元素到页面中

<div id="root">
   <script>
     // 2.创建react元素
     // 元素名称，元素属性，元素子节点...
const title = React.createElement("p", null, "Hello React");
     // 3.渲染react元素
     // 要渲染的react元素，挂载点(DOM对象，用于指定渲染到页面的位置)
ReactDOM.render(title,
       document.getElementById("root"));
	</script>
</div>

3.React 脚手架的使用

3.1 使用 React 脚手架初始化项目

1. 初始化项目，命令：npx create-react-app my-app

   npx 是 npm 的升级版, my-app 是项目名称

   报错：官方服务器连接慢

   这里其实是我命令输入有误，更多相关报错以及解决方案可参考
   react初始化遇到的问题及解决

解决：配置淘宝镜像 npm config set registry https://registry.npm.taobao.org

验证配置：npm config get registry

2. 启动项目，在项目根目录执行命令：npm start

   根据命令提示 cd my-app 到根目录，再执行启动项目 npm start

3. npx 命令

   npm v5.2.0 引入的一条命令，无需安装脚手架包，可直接使用

3.2 React 脚手架中使用 React

1. 导入 react 和 react-dom 两个包

   import React from 'react'

   import ReactDom from 'react-dom'

2. 调用 React.createElement() 方法创建 react 元素

3. 调用 ReactDOM.rende() 方法渲染 react 元素到页面中

总结

以上就是今天要讲的内容，本文仅仅简单介绍了 react 入门的相关知识和脚手架的搭建，更多内容会在后续更新。