React环境安装与配置完全解析

天涯幺妹

已于 2025-04-07 10:07:08 修改

阅读量1.4k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： web前端技术鸿蒙应用开发移动应用开发文章标签： react.js 前端前端框架

于 2025-04-07 10:02:19 首次发布

本文链接：https://blog.csdn.net/sinat_30844883/article/details/147036142

web前端技术同时被 3 个专栏收录

46 篇文章

订阅专栏

移动应用开发

14 篇文章

订阅专栏

鸿蒙应用开发

10 篇文章

订阅专栏

内容导读

1、react简介与安装

2、通过网络导入方式CDN构建应用

3、使用create-react-app快速构建React应用

一、react简介与安装

1.1 react的简介

React是一个用于构建用户界面的js库

React主要用于构建ui

React起源于Facebook的内部项目

React拥有较高的性能，代码逻辑非常简单

解决前端大量数据的更新，组件复用等

1.2 react安装与配置

官网：React – A JavaScript library for building user interfaces

中文网站：https://tianxiangbing.github.io/react-cn/index.html

1、网络导入

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
  <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
  <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>

<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

2、通过npm安装React

（1）安装node.js

下载：https://nodejs.org/en/download/

双击下载：node-v22.14.0-x64.msi文件按提示完成安装

（2）通过npm安装react

国内使用npm速度很慢,我们可以使用淘宝定制的cnpm(gzip压缩支持)

命令行工具代替默认的npm

管理员身份运行：

npm install -g cnpm --registry=https://registry.npmmirror.com
npm config set registry https://registry.npmmirror.com

退出node方式：ctrl+d与.exit

这样就可以使用cnpm命令来安装模块了：

cnpm install [name]

建议使用：npm install [name]

二、通过网络导入方式CDN构建应用

HBuilder中构建网页文件index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js" ></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js" ></script>
</head>
<body>
 
<div id="app"></div>
<script type="text/babel">
// 简单的React函数组件
function App() {
    return <h1>Hello, React!</h1>;
}
 
const root = ReactDOM.createRoot(document.getElementById("app"));
// 渲染React 组件到 DOM
root.render(<App />);
</script>
 
</body>
</html>
</script>
 
</body>
</html>

案例解析如下：

实例中我们引入了三个库： react.production.min.js 、react-dom.production.min.js 和 babel.min.js：
react.min.js：React的核心库
react-dom.min.js：提供与DOM相关的功能
babel.min.js：Babel可以将ES6代码转为ES5代码，这样我们就能在目前不支持ES6浏览器上执行React代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

三、使用create-react-app快速构建React应用

1、create-react-app

是来自于Facebook,通过该命令我们无需配置就能快速构建React开发环境

2、create-react-app自动创建的项目是基于Webpack+ES6

执行以下命令创建项目:

cnpm install -g create-react-app

create-react-app my-app

cd my-app

npm start

在浏览器中打开http://localhost:3000/，效果如下:

说明：也可以使用npx命令安装并生成react应用

执行如下命令：

cd my-app
npm start

打开项目，效果同上：

3、通过HBuilder打开my-app项目

项目结构如下：

试着修改src/App.js文件代码:

//导入库
import React,{Component}from 'react';
import logo from './logo.svg';
import './App.css';
// //函数式组件
// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           欢迎来到超客学院
//         </a>
//       </header>
//     </div>
//   );
// }

// 类方式组件
class App extends Component{
  render(){return(<div className="App">
    <div className="App-header">
    <img src={logo} className="App-logo" alt="logo"/>
    <h2>欢迎来到超客学院</h2>
    </div>
    <p className="App-intro">在<code>src/App.js</code>文件中修改</p>
    </div>);       }  
}
export default App;

index.js入口文件内容：

//导入库
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//创建DOM根对象
const root = ReactDOM.createRoot(document.getElementById('root'));
//渲染或加载组件
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
//性能监测
reportWebVitals();

再次打开http://localhost:3000/输出结果：

说明：生成项目输出文件使用npm run build

4、扩展练习

React实现定时器功能

<script type="text/babel">
  function changeTime(){
     // 创建一个元素，并输出当前的时间
   const ps={
   'font-size':26,
   'color':'blue'
     }
   const el=<p style={ps}>{
     // 获取部分时间
    new Date().toLocaleTimeString()
    }</p>
     // 渲染元素
    ReactDOM.render(el,document.getElementById("time"))
  }
// 设置定时器
setInterval(changeTime,1000);
</script>