react的基本使用
1.什么是react?
用于构造用户界面的javascript库
2.react组件(重要)
3.特点
只有v,view层
4.使用
- 4.1npm i react react-dom (web页面用这两个指令,前面是主要依赖包,)
- 4.2引入js文件
- 4.3创建react元素
参数一:元素的名称
参数二:元素的属性
参数三:元素的子节点
5.渲染react元素
参数一:要渲染的react元素
参数二:挂载点
下载react依赖包
- npm init -y
- npm i
- npm i react react-dom
使用react脚手架初始化项目
- npx create-react-app my-pro (my-pro项目名称)
- npm cache clear --force(强制清除缓存)如果下载不成功,执行,再下
- npm start(跑项目)
- 入口文件是src文件夹里的index.js
- script浏览器里面直接使用的话,是用umd格式的库
初始化react项目
- index.js文件
import React from "react";
import ReactDOM from "react-dom";
// 1.创建react元素,(创建react对象,--虚拟dom(对象))
const p1 = React.createElement("p", null, "我是一个p标签");
const p2 = <h1>我是用jsx语法创建的</h1>; //这个语法相对于简洁
// 2.渲染react元素到页面上面去 render
ReactDOM.render(p1, document.getElementById("root")); //不生效
ReactDOM.render(p2, document.getElementById("root"));
// 用两个,只会渲染下面的,会覆盖上面的
JSX语法
1什么是JSX?基本使用
- JSX = JavaScript XML,表示在js代码中写xml(html)格式的代码
- 使用JSX创建react元素
<