学习React

最新推荐文章于 2024-09-10 17:22:42 发布

记录bug的周

最新推荐文章于 2024-09-10 17:22:42 发布

阅读量1.9k

点赞数 38

文章标签：学习 react.js 前端

本文链接：https://blog.csdn.net/weixin_42536730/article/details/137118231

版权

Resources

官方

React的中文英文官方文档真心做的不错，但是对于0基础的来说还是稍微有点门槛。
Create React App的官方教程

民间

React 安装教程-简书
 node.js 安装及配置环境变量只看此文

Get Started

Installation & Use

安装Node

React 的安装通常是通过 Node.js 包管理器 npm 来完成的。

windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（http://nodejs.org/），便可以看到下载页面。
下载完成后双击运行进行安装，安装过程基本直接“NEXT”就可以了（全部采用默认方式安装）。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“E:\Program Files\nodejs”）。
安装完成后可以使用cmd测试下是否安装成功。**方法：**在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。
**npm的安装。**由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入”npm -v”来测试是否成功安装。如下图，出现版本提示便OK了。
常规NodeJS的搭建到现在为止已经完成了，迫不及待的话你可以在终端输入“node”进入node开发模式下，输入你的NodeJS第一句：“hello world” — 输入：console.log(‘hello world’)。
npm作为一个NodeJS的模块管理。
a. 我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图：

b. 启动cmd，输入
npm config set prefix “E:\Program Files\nodejs\node_global”
npm config set cache “E:\Program Files\nodejs\node_cache”
c. 现在我们来装个模块试试，选择express这个比较常用的模块。同样在cmd命令行里面（管理员权限运行cmd），输入
npm install express -g
（“-g”这个参数意思是装到global目录下，也就是上面说设置的“E:\Program Files\nodejs\node_global”里面。）。待cmd里面的安装过程滚动完成后，输入npm list -g进行验证，可以看到安装路径已经变成了我们设置的目录。

d. 打开高级系统设置 - 环境变量

e. 进入环境变量对话框，在系统变量下新建”NODE_PATH”，输入”E:\Program Files\nodejs\node_global\node_modules“。（ps：这一步相当关键。）
由于改变了module的默认地址，所以上面的用户变量都要跟着改变一下（用户变量”PATH”修改为“E:\Program Files\nodejs\node_global\”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

不对，用户环境变量编辑为“E:\Program Files\nodejs”才对貌似：

我最后还是修改成了下图：

f. 以上步骤都OK的话，我们可以再次开启cmd命令行，进入node，输入“require(‘express’)”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图（如出错一般都是NODE_PATH的配置不对，可以检查下第d、e步）

安装React

根据react 官网提示，在命令提示符输入
npm install -g create-react-app （管理员！）
然后输入create-react-app
接下来就创建一个react工程，输入
create-react-app react-demo

经过一段时间的等待，工程创建成功.
先cd 到项目根目录下然后输入npm start 即可运行此项目

如果能看到这画面，恭喜，已经跨过了React开发的第一道坎。

Problems

1

ERROR in ./src/index.js 25:33-39
export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' (possible exports: AbortedDeferredError, Await, BrowserRouter, Form, HashRouter, Link, MemoryRouter, NavLink, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, ScrollRestoration, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_FetchersContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_ViewTransitionContext, UNSAFE_useRouteId, UNSAFE_useScrollRestoration, createBrowserRouter, createHashRouter, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, createSearchParams, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, redirectDocument, renderMatches, resolvePath, unstable_HistoryRouter, unstable_usePrompt, unstable_useViewTransitionState, useActionData, useAsyncError, useAsyncValue, useBeforeUnload, useBlocker, useFetcher, useFetchers, useFormAction, useHref, useInRouterContext, useLinkClickHandler, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes, useSearchParams, useSubmit)

Solution：
’Switch’ 和’Redirect’ 是react-router 5版本的接口，而最新版本是
“react-router-dom”: “^6.2.1”，并且已经将Switch改为Routes。

2

Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef')     at Object.useRef (http://localhost:4000/static/js/bundle.js:74053:25)     at BrowserRouter (http://localhost:4000/static/js/bundle.js:70252:...........

Solution：
参考了stackoverflow上的解答，因地制宜了一下：

First of all, look inside your package.json file to make sure every used library is listed either as dependencies or devDependencies. If not, install them individually.
For example, since you are using in your codebase ~~react-hook-form~~ react-router-dom, if you are not seeing it, open a terminal in the root folder of your project where package.json is, and run:
npm install react-router-dom 我这一步就搞定了。
If the issue persists, make sure your Node.js version is not superior to the last recommended one. If not, downgrade it, and for that, you could use n package from npm:
# Use the stable version of Node.js 
npm i -g n 
n stable
# If one of the above commands does not pass, you may need to use sudo: 
sudo npm i -g n 
sudo n stable
# Then delete node_modules and start over 
rm -rf node_modules 
npm install