目录
一 react介绍
react是什么?
react是一个用于构建用户界面(HTML页面)的javaScipt库
react主要用来写html页面,或构建web应用
从MVC的角度看,react仅仅是视图层V → 只负责视图的渲染
react起源于facebook的内部项目,于2013年5月开源
react的特点
1 声明式
只需要描述UI(HTML)看起来是什么样,就跟写HTML一样
react负责渲染UI,并在数据变化时更新UI
2 基于组件
组件是react中最重要的内容
组件表示页面中的部分内容
组合、复用多个组件,就可以实现完整的页面功能
学react就是学react中的组件
*3 学习一次,随处使用
可以开发web应用
可以开发移动端原生应用(react-native)
可以开发VR(虚拟现实)应用(react360)
二 创建react项目
1 下载安装nodejs
链接：https://pan.baidu.com/s/1sSkKn3vu8_1pxWfkYSZN2g
提取码：node
安装一直下一步就可以
2 创建react项目
要在这个位置创建react项目
地址栏输cmd
创建react项目的命令如下:(项目名称不能包含大写字母)
npx create-react-app 项目名
创建项目需要一点时间,创建好了是下面这个样子
3 react脚手架创建命令解释
以上创建react项目的方式是使用react脚手架创建的
React 脚手架: create-react-app, 可以帮我们生成一个通用的目录结构,并且帮我们配置好工程环境
npm: 全称 Node Package Manager, node 包管理工具
npm帮我们管理依赖的工具包(比如,react,react-dom,axios,babel,webpack 等)
npx: 是npm v5.2.0引入的一条命令
三 react入门使用
打开刚才创建的react项目
此处使用的是vscode工具,关于vscode的安装请点这里
文件--打开文件夹--选择之前创建的react项目
1 src--index.js
1 导入react
react包(核心):创建元素、组件
react-dom:提供dom相关功能
2 创建react元素
3 渲染react元素
// 1 导入react
import React from "react";
import ReactDOM from "react-dom";
//2 创建react元素
//参数1:要创建的元素 参数2:元素的属性 参数3:元素的子节点
const title = React.createElement("h1",null,"hello react")
//3 渲染react
//参数1:要渲染的元素 参数2:要渲染到哪里去(挂载点)
ReactDOM.render(title,document.getElementById("root"));备注:index.js 里原来的内容清空就可以
2 public--index.html
上面一步渲染的h1标签是挂载在 这个html页面的 id = root 的 div 上
3 启动react项目
在react项目的根目录输入cmd命令: npm start
渲染后的html结构
总结
