React初学者指南-优快云博客

文章目录

相关文件地址： https://pan.baidu.com/s/1jmMoOPD5JLjDsR_no1w9IA
提取码：8888
在这里插入图片描述

写在前面

近期准备直接学习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模块默认暴露

运行
在这里插入图片描述