[Day 22] - React 环境建置

可能是题目订的太大,感觉会做不完啊/images/emoticon/emoticon13.gif
剩下8天 差不多该开始前端的部分了

好,开始玩React

node.js安装

首先要安装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 [专案名称]

https://ithelp.ithome.com.tw/upload/images/20211004/20128973Ov6g3Xlaux.png
在npm中,名称不能有大写/images/emoticon/emoticon25.gif
换个名字就成功罗
https://ithelp.ithome.com.tw/upload/images/20211004/20128973n11RVMIfG0.png

照着提示进入专案目录,输入npm start
就可以执行这个专案了,预设是在http://localhost:3000/

https://ithelp.ithome.com.tw/upload/images/20211004/20128973APiDgHm8Bx.png
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 明天来写我的首页吧(乾脆就只写首页好了)/images/emoticon/emoticon07.gif


<<:  Day22:动手做一个 app 吧

>>:  RISC-V: R-type 位元运算指令

【Day18】电子商务与行销篇-线上客服

#odoo #开源系统 #数位赋能 #E化自主 实体通路与电子商务最大的差异,应该就是实体通路很明确...

如何把Jcenter或macenCenter等网路开源依赖库搬迁至本地依赖

缘由: 因Jcenter将不再对一般客户端提供服务,官方建议将远程仓库迁移至mavenCenter,...

官方介绍的Bluetooth

https://developer.android.com/guide/topics/connect...

Hello, World!

print("This line will be printed.") x = ...

建立你想要的文化(4)- 推动

有清楚说明自己的思路与原则 主管需要练习如何能清楚沟通自己的思路与原则。如果他们都只听到最後的决策,...