初探React环境搭建与运行_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

本文链接：https://blog.csdn.net/u012190388/article/details/128347410

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

网络工程师实战系统【NAT专题】-夏杰-专题视频课程-程序员宅基地

文章浏览阅读464次。通俗易懂讲解NAT技术。_网络工程师考试夏杰新浪

ROM开发-程序员宅基地

文章浏览阅读1.8k次。作者：X神之怒链接：https://www.zhihu.com/question/20076944/answer/381539565 来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。1、Android系统是什么？Android是Google公司于2007年发布的基于Linux的移动终端系统平台。之所以说是移动终端，是因为现如今手机、MID、Tablet等..._rom开发

高次的埃尔米特插值通俗示例讲解-程序员宅基地

文章浏览阅读89次。https://Illusionna.readthedocs.io/zh/latest/projects/Mathematics/Numerical Analysis/高次埃尔米特插值示例/demo.html。

CreateProcess error=206, The filename or extension is too long_plugins { id("com.github.manifestclasspath") versi-程序员宅基地

文章浏览阅读531次。使用 Gradle 运行SpringBoot 项目时碰到的，使用的命令是 clean bootJar解决方案：添加 com.github.ManifestClasspath 插件到 build.gradle 中,并指定mainClass, 例如plugins { id 'application' id "com.github.ManifestClasspath" version "0.1.0-RELEASE"}mainClassName='com.kay.DemoApplication_plugins { id("com.github.manifestclasspath") version "0.1.0-release" }

svn和git 配置忽略文件_git ignore svn文件夹-程序员宅基地

文章浏览阅读940次，点赞25次，收藏8次。点击右上角绿色加号，出现如下对话框：其中选项是忽略指定的文件选项是忽略指定文件夹下的文件选项是忽略匹配指定格式的文件一般需要忽略的文件如下：**1、.idea文件夹****2、.gradle文件夹****3、所有的build文件夹****4、所有的.iml文件**根据需求选择对应的选项添加要忽略的文件即可，下图是我测试项目添加的忽略文件：添加完成后，项目的目录结构中对应文件会变成如下样式：此时再提交文件会发现被忽略的文件（即黄色字体颜色的文件）不会出现在SVN的提交列表中。_git ignore svn文件夹

Linux 下清空Oracle监听日志_linux清理oracle监听日志-程序员宅基地

文章浏览阅读3.5k次。Linux 下清空Oracle监听日志_linux清理oracle监听日志

随便推点

NGN典型架构及主要支撑技术_ngn架构-程序员宅基地

文章浏览阅读3k次。1 NGN的定义及研究进展如《NGN的产生》一文所述，NGN是一个宽泛的不断发展的概念，有自己的内在发展动力和发展方向，但没有清晰的边界。所谓的定义，是各研究机构基于当前的阶段性研究成果和认识，试图在这个研究领域和方向上划定一个适当的研究边界，以指导今后相当长一段时期的研究工作。国际上研究NGN的主要的四个标准化组织是：国际电信联盟（ITU）、欧洲电信标准化组织_ngn架构

Hack the BTRSys1(Boot2Root Challenge)【VulnHub靶场】渗透测试实战系列1_welcome to the boot2root ctf, morpheus:1. you play-程序员宅基地

文章浏览阅读1.2k次。靶场下载地址：BTRSys: v1下载完毕之后直接导入到VMWare，看下设置了DHCP，那就在内网网段~~接着就打开内网的另外一台攻击机器Kali，首先搜集一下信息，Zenmap开始扫描，其实也就是nmap包装了一个UI界面。Okay，扫描结果出来了，看下图：主要提供了下面三个服务端口：vsftd，这个应该版本有点老，可以exploit一下，小本本记下来 ss..._welcome to the boot2root ctf, morpheus:1. you play trinity, trying to invest

antd date-picker 默认时间设置问题_a-date-picker 默认值-程序员宅基地

文章浏览阅读1.3w次，点赞7次，收藏8次。一.官网给出的例子<template> <div> <a-date-picker :default-value="moment('2015/01/01', dateFormat)" :format="dateFormat"/> <br /> <a-date-picker :default-value="moment('01/01/2015', dateFormatList[0])" :format="dateFormatList"/_a-date-picker 默认值