网站怎么做导航,简洁又有高级感的ppt,网站主导航,如何做网站优惠券推广1.检查现有项目的根目录下是否有package.json文件
如果没有#xff0c;则在项目的根目录下初始化一个package.json配置文件
2.在根目录下安装react和react-dom依赖
npm install --save react react-dom react-scripts安装成功后#xff0c;react、react-dom以及react-scr…1.检查现有项目的根目录下是否有package.json文件
如果没有则在项目的根目录下初始化一个package.json配置文件
2.在根目录下安装react和react-dom依赖
npm install --save react react-dom react-scripts安装成功后react、react-dom以及react-scripts的相关信息会被写到package.json配置文件里。
3. 在根目录下安装babel/plugin-transform-private-property-in-object和babel-preset-es2015依赖
npm install --save-dev babel/plugin-transform-private-property-in-object
npm install --save-dev babel-cli babel-preset-es2015之前安装babel-preset-react-app和babel-preset-es2015就可以但我npm run build的时候提示babel-preset-react-app不再维护了如下如 所以就用babel/plugin-transform-private-property-in-object做了替换。
4.检查项目根目录下是否有public文件夹
没有的话手动创建一个并将你的html文件放到这个文件夹下。 public存放都是静态文件不会被编译所以如果有静态公共配置文件就放在这里。
题外话-如何在react中使用公用配置文件
假设有个公共配置文件config.js将其放入public在需要用config配置的html引入此配置文件
在入口的js文件中把配置文件的内容挂载到全局 React.Component.prototype.$config window.config组件中使用
//假设config.js中有个prjName的配置
let prjName this.$config.prjName
div{${process.env.PUBLIC_URL}/${prjName }}/divprocess.env是Nodejs提供的API用于返回一个包含用户环境信息的对象。如果给Nodejs设置一个环境变量并把它挂载在 process.env 返回的对象上便可以在代码中进行相应的环境判断。 例如有时会看到这样的代码就是判断当前是生产还是开发环境来决定mode字段的定义 module.exports { mode: process.env.NODE_ENV ‘production’ ? ‘production’ : ‘development’ }
5.检查项目根目录下是否有src文件夹
没有的话手动创建一个并将你的js文件放到这个文件夹下。
基于以上五个步骤基本可以实现在现有项目里使用react。
最后
react 18以前的版本可以通过普通的js引用达到为现有项目添加react代码的需要。但react18添加了许多新特性语法也有了很大的改变17的语法倒是还可以用但浏览器会一直提醒用18的语法替换。 如果使用的是react 18的方式去编写代码会一直提示类似“Inline Babel script:4 Uncaught ReferenceError: XXX is not defined”。 所以猜测18以后各种依赖拆的比较碎需要引入各种各样的js来满足开发需求。此处还需验证如果你们有解决的办法一定要告诉我哦对于react我还是个小白起初就十分不想用npm觉得太繁重最后还是妥协了。另外如果有说的不对的地方欢迎指正感谢
react 17的语法
!DOCTYPE html
html
headmeta charsetUTF-8titleInsert title here/title!-- 使用的是react 18 --script srcjs/react.development.js /scriptscript srcjs/react-dom.development.js /scriptscript srcjs/babel.min.js /script
/head
bodydiv idroot/divscript typetext/babelconst Element h1Hello, world!~~~~~~~~~/h1;ReactDOM.render(Element,document.getElementById(root));/script
/body
/html结果如图所示 react 18的语法
!DOCTYPE html
html
headmeta charsetUTF-8titleInsert title here/title!-- 使用的是react 18 --script srcjs/react.development.js /scriptscript srcjs/react-dom.development.js /scriptscript srcjs/babel.min.js /script
/head
bodydiv idroot/divscript typetext/babelimport { createRoot } from react-dom/client;const container document.getElementById(root);const root createRoot(container); root.render(h1Hi~~~~~/h1);/script
/body
/html结果如图所示
