可能是题目订的太大,感觉会做不完啊
剩下8天 差不多该开始前端的部分了
好,开始玩React
首先要安装node.js,
node.js是一个很酷的东西,透过node.js我们能够使用javascript来撰写可在服务器上运作的後端程序,从此javascript就不再只是一个为前端服务的语言了
之前想要玩玩看,所以有先安装过,那时候是下载 Windows 安装档来安装的
如果想要保持电脑乾净,也可以用免安装版
不过今天不是要用node.js写後端,是要拿它的套件管理工具(npm/npx)来建立React专案
小补充:
看网路上的教学,有的人用npm、有的人用npx,两者的差异在哪呢?
npm会将套件储存在本地、npx则只是暂存在本地,使用完毕後就自动删掉
安装完後,在cmd下指令npm -v
可以看到自己的npm版本
D:\>npm -v
6.14.13
我的是6.14.13版
确认有安装成功後就来建立一个React专案吧!
指令:npx create-react-app [专案名称]
在npm中,名称不能有大写
换个名字就成功罗
照着提示进入专案目录,输入npm start
就可以执行这个专案了,预设是在http://localhost:3000/
React的预设页面
跟Spring Boot的Whitelabel Error Page相比简直太亲切,还会动呢
预设页写道:
Edit src/App.js and save to reload.
就来看看src/App.js长什麽样子
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
这边可以发现,原来预设页的dom是这个function App()返回的,
再看到index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
有个import App from './App';
可以大概看出,预设页是怎麽出来的
所以之後我们的页面应该都会是写成一支支的js,
跟传统写html页面有些不太一样
不过熟悉前端的人就算没碰过React 应该能很快上手
今天先稍微熟悉一下React 明天来写我的首页吧(乾脆就只写首页好了)
#odoo #开源系统 #数位赋能 #E化自主 实体通路与电子商务最大的差异,应该就是实体通路很明确...
缘由: 因Jcenter将不再对一般客户端提供服务,官方建议将远程仓库迁移至mavenCenter,...
https://developer.android.com/guide/topics/connect...
print("This line will be printed.") x = ...
有清楚说明自己的思路与原则 主管需要练习如何能清楚沟通自己的思路与原则。如果他们都只听到最後的决策,...