相关文件地址: https://pan.baidu.com/s/1jmMoOPD5JLjDsR_no1w9IA
提取码:8888
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5c413f664b1ccfabd29dff03e4ce9820.png)
写在前面
近期准备直接学习React了,并会通过不断输出博客来巩固我知识以及方便后续回顾。
关于React
React属于当前前端三大最火框架之一,它起源于facebook的内部项目,并于2013年进行了开源,现在已经推出React17版本。
优点:
-
生态强大:React的生态体系好,几乎所有开发需求都有成熟的解决方案。
-
上手简单: React上手简单,但是涉及知识面广,需要进行不断的学习
-
社区强大:使用的小伙伴挺多,可以一起交流学习
官方文档:https://reactjs.org/
基础使用
创建挂载标签
引入核心文件 react.development.js
引入DOM处理文件 react-dom.development.js
引入babel转换文件 babel.min.js
创建type为text/babel类型script标签
创建虚拟DOM
进行挂载
<!-- 创建挂载标签 -->
<div id="root"></div>
<!-- 核心文件 -->
<script src="../js/react.development.js"></script>
<!-- dom创建文件 -->
<script src="../js/react-dom.development.js"></script>
<!-- babel转换jsx为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 创建虚拟Dom
const VDom=<div>Hello World</div>
// 挂载
ReactDOM.render(VDom,document.getElementById("root"))
</script>
脚手架环境搭建
1.node.js安装
官方下载地址:https://nodejs.org
国内下载地址:http://nodejs.cn/download/
安装完后cmd内能查看node、npm版本即可
2.脚手架安装
全局安装
npm install -g create-react-app
创建一个文件夹进入
在当前文件夹创建脚手架项目
create-react-app 项目名
注意项目名需要全小写
创建好后进入文件执行
打开如下默认网页即可
文件目录
Hello World
不管是学一门语言还是一个框架,都会从第一个Hello World程序开始,打开学习世界的大门。
创建index.js文件
import React from "react"
import ReactDom from "react-dom"
import App from "./App"
ReactDom.render( < App / > , document.getElementById('root'))
1.引入React ReactDom两个必须文件
2.引入App组件
3.将App组件渲染到id为root的标签里
创建App组件
function App() {
return (
<div>
Hello World
</div>
);
}
export default App
jsx语法构造模板代码,将App模块默认暴露
运行