React基础案例01 入门案例

内容简介

作为咱们的第一个React程序，实际上是非常关键的，因为能够让我们学习到React的基本用法，特别是React解耦出来的独立用法。

通过本篇文章的介绍，我们能够知道如何在一个HTML文件中引入React并实现，能够更加灵活的选择是通过脚手架的方式将React作为我们的前端项目，还是将React作为一个组件集成到我们的某个前端项目中。

目标

学习如何使用React创建一个dom元素并在页面中渲染。本文将会详细介绍每一个步骤，并给出每个步骤实现的代码，最后还会配上完整的代码。代码中的JS都是CDN地址，不需要下载就能够直接访问的，读者可以直接复制代码后运行。

实现步骤

1、在body中创建一个div元素，给赋值ID为app

2、引入React组件库

3、使用React创建元素

4、使用React在ID为app的容器上渲染元素

实现细节

1、在body中创建一个div元素，给赋值ID为app

2、引入React组件库

React用于创建视图

ReactDOM用于在浏览器中渲染UI

这里开发版本是为了在控制台能够看到错误提示，如果在生产环境使用，则导入：

3、使用React创建元素

const dish = React.createElement("h1", null, "一级标题")

4、使用React在ID为app的容器上渲染元素

ReactDOM.render(

dish, // 元素

document.getElementById('app'), // 渲染位置

)

完整代码

React Elements

// 使用react创建一个h1标签

const dish = React.createElement("h1", null, "一级标题")

// 渲染React元素

ReactDOM.render(

dish, // 元素

document.getElementById('app'), // 渲染位置

)

console.log('dish', dish)

基于React18

基于CDN：

My First React Application

// 创建h1标签

const reactElement = React.createElement("h1", null, "Hello world!!!");

// 获取根节点

const domNode = document.getElementById("root");

// 创建根节点

const root = ReactDOM.createRoot(domNode);

// 在根节点渲染元素

root.render(reactElement);

基于本地文件：

My First React Application

// 创建h1标签

const reactElement = React.createElement("h1", null, "Hello world!!!");

// 获取根节点

const domNode = document.getElementById("root");

// 创建根节点

const root = ReactDOM.createRoot(domNode);

// 在根节点渲染元素

root.render(reactElement);

启动命令：

# 使用npx启动

npx serve

npx http-server

# 使用python3启动

python -m http.server 3000

# 使用PHP启动

php -S localhost:3000

访问测试

浏览器访问：http://localhost:3000/