初探React环境搭建与运行

在家看React 知识，在本地环境搭建，记录下来，方便查看。
环境前置：Nodejs 14 及以上
网站地址：React中文官网

一、方式一命令生成项目

通过 create-react-app脚手架 来创建 React项目，其中 npx 是 npm5.2+ 附带的package运行工具

// 创建项目 my_react
npx create-react-app my_react
// 进入项目
cd my_react
// 启动项目
npm start

执行成功后，控制台输出结果如下。

生成项目文件夹内容如下

项目启动成功，在浏览器 输入 http://localhost:3000/ 即可访问react。

以上三步即 通过脚手架创建简单的React项目。

二、方式二手动引入

第一步、安装依赖
react包 是核心，提供创建元素、组件等功能；
react-dom包 提供DOM相关功能
npm 方式安装代码如下

// 安装依赖包
npm i react react-dom

第二步、引入两个js文件

// 引入js
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

第三步、创建React元素

// 参数1：元素名称；参数2：元素属性；参数3：元素的子节点
const title = React.createElement('h1',null,'hello react');

第四步、渲染React元素

<div id="root"></div>
// 参数1：要渲染的react元素；参数2：挂载点
ReactDOM.render(title,document.getElementById('root'));

异常处理

1）创建项目错误，代码：reason: connect ECONNREFUSED 127.0.0.1:31181
处理方案：可暂时取消代理
npm config set proxy null
npm config set https-proxy null