专做西餐的网站,做怎样的网站能赚钱吗,网站建立服务,高网站排名吗想学习reacr.js #xff0c;就开始做一个hello world。 我的环境是visual code #xff0c;所以我找这个环境下的例子。参照#xff1a; https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 要学习react.js #xff0c;还得先安装node.js#xff0c;我在visual …想学习reacr.js 就开始做一个hello world。 我的环境是visual code 所以我找这个环境下的例子。参照 https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 要学习react.js 还得先安装node.js我在visual code 下的node.js的hello world-CSDN博客
这个文章中介绍了怎么安装。
检查是否安装成功就是 node -v 能返回版本信息就好了。 教程第一个要求是 create-react-app 建立一个服务命令是
npx create-react-app myfirst
对于我来说它不成功报错。原文中说
Note: If youve previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
就是说你原来安装过create-react-app 你就要卸载重新安装我昨天才装的我也没有装过我应该不属于这类。但我总是报这个错后来我想我也卸载试试结果uninstall 后果然可以运行了。
下面是我运行过程
C:\cd reactjs
C:\reactjsnpx create-react-app myfirst npm ERR! code ENOENT npm ERR! syscall lstat npm ERR! path C:\Users\leon\AppData\Roaming\npm npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, lstat C:\Users\leon\AppData\Roaming\npm npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent
npm ERR! A complete log of this run can be found in: C:\Users\leon\AppData\Local\npm-cache\_logs\2023-09-27T12_49_11_676Z-debug-0.log
C:\reactjsnpm uninstall -g create-react-app
up to date in 783ms
C:\reactjsnpx create-react-app myfirst Need to install the following packages: create-react-app5.0.1 Ok to proceed? (y) y npm WARN deprecated tar2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
Creating a new React app in C:\reactjs\myfirst.
Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template...
...
Success! Created myfirst at C:\reactjs\myfirst Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing: cd myfirst npm start
Happy hacking!
C:\reactjscd myfirst
C:\reactjs\myfirstnpm start myfirst0.1.0 start react-scripts start
..... Compiled successfully!
You can now view myfirst in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000
Note that the development build is not optimized. To create a production build, use npm run build.
webpack compiled successfully Compiling... Compiled with warnings.
程序运行起来了界面如下 下面来看看代码
可以在myfirst 目录里启动code 当然也可以启动code 后打开这个目录然后就可以看代码了 代码在src 目录下主要的是 index.js, app.js其实你在index.js 里改代码就好了但这个调用app.js 代码在app.js 里红框里改为 h1 Hello World/h1
全部代码如下
import logo from ./logo.svg;
import ./App.css;function App() {return (div classNameAppheader classNameApp-headerh1 Hello World/h1/header/div);
}export default App;
界面里显示 Hello World
不过也可以直接修改index.js如下
import React from react;
import ReactDOM from react-dom;
import ./index.css;
import App from ./App;
import reportWebVitals from ./reportWebVitals;var element React.createElement(h1, { className: greeting }, Hello, world!);
ReactDOM.render(element, document.getElementById(root));reportWebVitals(); 这样也是显示Hello World
很多学习的例子都是直接在index.js 里修改代码比较直接。
往后就执行 npm start 启动这个工程。只是第一次需要 npx create-react-app my-app 建立框架。
启动这工程也不需要visual code 编辑时才需要。
npm run build 建立一个发布目录。
下面链接介绍怎么发布react.js
How To Deploy a React Application with Nginx on Ubuntu 20.04 | DigitalOcean
