本文已参与「新人创作礼」活动，一起开启掘金创作之路。
一 react介绍
1 react是什么?
-
react是一个用于构建用户界面(HTML页面)的javaScipt库
-
react主要用来写html页面,或构建web应用
-
从MVC的角度看,react仅仅是视图层V → 只负责视图的渲染
-
react起源于facebook的内部项目,一开始用于架设Instagram的网站,于2013年5月开源
2 react的特点?
声明式
- 只需要描述UI(HTML)看起来是什么样,就跟写HTML一样
- react负责渲染UI,并在数据变化时更新UI
基于组件
-
组件是react中最重要的内容
-
组件表示页面中的部分内容
-
组合、复用多个组件,就可以实现完整的页面功能
-
学react就是学react中的组件
*学习一次,随处使用
- 可以开发web应用
- 可以开发移动端原生应用(react-native)
- 可以开发VR(虚拟现实)应用(react360)
二 创建react项目
1 下载安装nodejs
提取码：node
安装一直下一步就可以
2 创建react项目
首先在本地打开要创建项目的位置(文件夹),在文件夹路径位置输入cmd,在弹出的cmd窗口输入以下命令:
npx create-react-app 项目名
注意: 项目名称不能包含大写字母
创建项目需要一点时间,创建好了是下面这个样子
此时也可以按照上图cmd窗口的suggest打开项目的根目录,启动项目
项目创建好之后,会在目标位置自动生成下面的文件夹(react的项目文件夹)
3 react脚手架创建项目解释
解释:以上创建react项目的方式是使用react脚手架创建的
react脚手架是什么?
- 就是快速搭建项目的,帮我们快速开始一个react的项目
- react脚手架可以帮我们生成一个通用的目录结构
- 让我们可以早点去写代码
create react app是一个构建react单页面应用的脚手架工具
打开刚才脚手架工具自动创建的项目文件夹, 如下图, 就可以看到react的目录结构
npm 是什么?
-
npm 全称 Node Package Manager, 即 node 包管理工具
-
npm帮我们管理依赖的工具包(比如 react,react-dom,axios,babel,webpack 等)
npx 是什么?
- 是npm v5.2.0引入的一条命令
- 提升使用包内命令行工具的体验
npx之前:先安装脚手架包,再使用这个包内提供的命令
npx之后:无需安装脚手架包,就可以直接使用这个包提供的命令
三 react入门使用
1 打开刚才创建的react项目
2 src--index.js代码如下
// 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 里原来的内容清空即可
3 public--index.html里面
即刚才创建的h1标签元素 title的挂载点
<div id="root"></div>
4 启动react项目
在react项目的根目录输入cmd命令:
npm start
渲染后的html结构
