接下来我们来学习怎么用这个框架来写以一个“经典”项目Hello World

运行

先来到项目文件下的控制台输入：

npm run start

然后我们打开这个链接，就能看到这个

这就证明有一个react项目框架了。

使用

根据上一篇的介绍我们来到index.js文件也是入口文件我们来到这先清空react给我们写的初始代码来写上我们自己的代码。

import ReactDOM from 'react-dom/client';
import React from 'react';
const root = ReactDOM.createRoot(document.getElementById('root'));
const element=React.createElement('h1',{className:'title',id:'tlt'},'hello world')
root.render(element)

这里我们

从react-dom库中导入createRoot函数，这是用于在DOM中创建React根容器的方法。

从react库中导入React对象，这是创建和操作React组件的基础。

使用ReactDOM.createRoot函数创建一个React根实例，该实例将与HTML文档中具有ID为root的元素关联。

使用React.createElement函数创建一个React元素。

调用React根实例的render方法，将之前创建的React元素渲染到与该根实例关联的DOM元素中。

当我们运行以上代码时，就能在浏览器中看到我们写的 "hello world"。并且检查 HTML 结构，可以看到 "hello world" 挂载在了 root 根节点下。这种方法类似于早期的 DOM 编程，即使用 JavaScript 来读取、修改、添加或删除 HTML 或 XML 文档内容和结构

我们还可以将代码改写成

import ReactDOM from 'react-dom/client';
import React from 'react';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

这是使用了JSX语法创建React元素

第一段代码更注重于展示React底层API的使用，而第二段代码则利用了JSX的简洁性和可读性，是React应用中更常见的写法。

React组件化

React 的组件化概念是其核心设计理念之一，它将用户界面（UI）构建过程分解为一系列独立、可复用的组件。这种设计模式不仅提高了代码的可维护性和可读性，还促进了功能的模块化，使得大型项目能够被更有效地管理和扩展。接下来我们来使用一下组件化的概念来打印一下Hello World吧

先来到index.js文件下修改代码为

import ReactDOM from 'react-dom/client';
import React from 'react';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App/>
)

这里我们与上面的区别就是渲染的是App这个组件，然后在引入App组件而在上面的代码中我们都是直接渲染HTML元素。

然后我们在App.js这个文件下编译

function App() {
  return (
    <div className="App">Hello World</div>
  );
}
export default App;

最后可以看到我们呈现的效果是一样的

总结

看到这可能会觉得使用React组件化的方式更麻烦，并没有上面直接渲染HTML元素来的快，但实际上，随着项目规模的扩大，组件化的优势会愈加明显。组件化可以提高代码的可维护性、可读性和重用性，使开发大型项目变得更加高效和有条理。