react框架基础入门

前端三大框架：

1. angular

2. vue —-2||3

3. react

区别：vue国内框架 封装较完成。全程使用封装的api来完成。

react国外技术框架—-偏向于底层js实现。没有的大量的封装。需要使用js手动实现。

react需求在不断增大。必会框架。

官网

https://react.docschina.org/   中文官网

react：用于构建用户界面的 JavaScript 库

react核心

1.声明式 —-在书写react代码时以较少的业务变更状态可以更准确有效的更新UI界面。

2.组件化 —-创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

react的库分类

1. react.js 基本库

2. react-dom 操作浏览器dom元素节点的库

3. react-native 操作安卓和ios 系统方面的库

网页版react测试：

<!-- 引入js文件 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script>//React  库的操作对象//操作DOM的对象ReactDOM//获取根节点let root = document.querySelector("#root");//编译产生虚拟DOMlet ele = React.createElement("button", {name: "ss",//事件属性  并非事件onClick: () => {console.log("测试");}}, '按钮');//将虚拟DOM转化为真实DOM 挂载到root节点ReactDOM.render(ele, root);

使用react脚手架搭建项目

使用脚手架create-react-app 搭建项目环境

要求：Node >= 8.10 和 npm >= 5.6。

1.使用脚手架创建项目
create-react-app  项目名称 || .
进入项目目录进行启动
npm start

启动成功之后显示

目录结构

入口文件的相关代码

import React from 'react';
import ReactDOM from 'react-dom/client';
//全局css
import './assets/index.css';
//根模板
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));
//编译app模板 生成真实dom 挂载到root
//React.StrictMode  react中语法校验的严格模式
root.render(<React.StrictMode><App /></React.StrictMode>
);