![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
React 開発環境 |
$ sudo apt install -y nodejs npm $ sudo npm install n -g $ node -v v12.22.9 $ npm -v 8.5.1
$ sudo npm install n -g
$ sudo n stable
installing : node-v20.10.0
mkdir : /usr/local/n/versions/node/20.10.0
fetch : https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz
copying : node/20.10.0
installed : v20.10.0 (with npm 10.2.3)
Note: the node command changed location and the old location may be remembered in your current shell.
old : /usr/bin/node
new : /usr/local/bin/node
$ hash -r
$ node --version
v20.10.0
$ npm --version
10.2.3$ sudo apt purge -y nodejs npm $ sudo apt autoremove -y
Windows版VSCode --(Remote)-->Ubuntu 22.04 --------------- ----WSL2---- =========Windows 11======================
| スコープ | 変更 | |
| var | なし(Global) | 可 |
| let | あり(Block内のみ参照可) | 可 |
| const | あり(Block内のみ参照可) | 不可 |
let let_name = "LET NAME";
const const_name = "CONST NAME";
var var_name = "VAR_NAME";
console.log(let_name);
console.log(const_name);
console.log(var_name);
try {
let_name = "UPDATE_LET_NAME";
var_name = "UPDATE_VAR_NAME";
const_name = "UPDATE_CONST_NAME";
} catch (e) {
console.log("\n### CONST IS NOT UPDATABLE ###");
console.log(e);
}
if (true) {
var x = 123;
let y = 456;
}
console.log("\n### VAR HAS NOT SCOPE ###")
console.log("x=" + x);
console.log("\n### LET HAS SCOPE ###");
console.log("y=" + y);
LET NAME
CONST NAME
VAR_NAME
### CONST IS NOT UPDATABLE ###
TypeError: Assignment to constant variable.
at Object.<anonymous> (/home/atsushi/projects/ReactExam/01_review_javascript/variable.js:12:16)
at Module._compile (node:internal/modules/cjs/loader:1376:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
at node:internal/main/run_main_module:28:49
### VAR HAS NOT SCOPE ###
x=123
### LET HAS SCOPE ###
/home/atsushi/projects/ReactExam/01_review_javascript/variable.js:25
console.log("y=" + y);
const cArray = ['a','b','c'];
console.log(cArray);
// References to Const objects cannot be changed.
// However, Const objects are mutable.
cArray[1] = 'x';
console.log(cArray);
[ 'a', 'b', 'c' ]
[ 'a', 'x', 'c' ]
function func1(arg) {
console.log("FUNC1 " + arg);
}
const func2 = (arg) => {
console.log("FUNC2 " + arg);
}
func1(1);
func2(2);
const cat = {
name: "Mike",
whoami: function() {
// This is cat.
console.log(this.name);
},
whoareyou : () => {
// This will be bound at runtime.
console.log(this.name);
}
}
cat.whoami();
cat.whoareyou();FUNC1 1
FUNC2 2
Mike
undefined
// variable args
const sum = (...nums) => {
let sum = 0;
for (const num of nums) {
sum += num;
}
return sum;
}
console.log(sum(0,1,2,3,4,5,6,7,8,9));
// object args
const emplyee = {
name : `tanaka`,
sex: `female`,
age: 33,
division: 'account'
}
const hello = ({name, division}) => {
console.log("### HELLO1")
console.log(name);
console.log(division);
}
const hello2 = (emp) => {
console.log("### HELLO2")
console.log(emp.name);
console.log(emp.division);
}
hello(emplyee);
hello2(emplyee);45
### HELLO1
tanaka
account
### HELLO2
tanaka
account
const name = "John";
const msg = `Hello ${name}`; // <- cover single quotes, for template
console.log(msg);Hello John
const str1 = `abcdefg`;
console.log("str1=" + str1.substring(0,3));
const str2 = null;
try {
console.log("str2.substring(0,3)=" + str2.substring(0,3));
} catch(e) {
console.log(e.message);
}
console.log("str2?.substring(0,3)=" + str2?.substring(0,3));
const str3 = null;
console.log("str3=" + (str3 ?? `未設定`));
let str4 = null;
str4 ??= '----'; // eq. str4 = (str4 ?? '----')
console.log("str4=" + str4);
str1=abc
Cannot read properties of null (reading 'substring')
str2?.substring(0,3)=undefined
str3=未設定
str4=----
export class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return rectArea(this.width, this.height);
}
};
export class Circle {
constructor(radius) {
this.radius = radius
}
area() {
return circleArea(this.radius);
}
}
const rectArea = (height, widht) => {
return height * widht;
}
const circleArea = (radius) => {
return Math.PI * (radius ** 2)
}import { Rectangle, Circle } from "./module_app.js";
const r = new Rectangle(5,10);
const c = new Circle(1);
console.log(r.area());
console.log(c.area());
50
3.141592653589793
import * as App from "./module_app.js";
const r = new App.Rectangle(5,10);
const c = new App.Circle(1);
console.log(r.area());
console.log(c.area());
50
3.141592653589793
export default class ZoneCalc {
add(a, b) {
return zoneAdd(a,b);
}
sub(a,b) {
return zoneSub(a,b);
}
}
/**
* 文字列の数値(ゾーン表現)同士の加算.
* ASCIIコードの数値は 0 = 0x30, 1=0x31, ..., 9=0x39 なので、文字コード同士で加算して
* 0x60を引けば合計値になる。
* 後は繰上りを考慮しつつ、最下位桁から一桁ずつ足していけば、文字列の数値同士の加算ができる
* @param {string} a NumberA
* @param {string} b NumberB
* @return {String} aとbの合計値
*/
const zoneAdd = (a, b) => {
const len = Math.max(a.length, b.length);
const aa = fillZero(a, len);
const bb = fillZero(b, len);
let sum = "";
let cc = 0;
let overflow = 0;
for (let idx = (len-1); idx > -1; idx--) {
cc = overflow + aa.charCodeAt(idx) + bb.charCodeAt(idx) - 0x60;
if (cc > 9) {
overflow = 1;
cc = cc - 10;
} else {
overflow = 0;
}
sum = String.fromCharCode(cc + 0x30) + sum;
}
return sum;
}
/**
* 文字列の数値(ゾーン表現)同士の減算.
* ASCIIコードの数値は 0 = 0x30, 1=0x31, ..., 9=0x39 なので、文字コード同士で減算すれば
* そのまま減算結果になる。
* 後は繰上り(上の桁から10を借りる)を考慮しつつ、最下位桁から一桁ずつ減算していけば、
* 文字列の数値同士の減算ができる
* @param {string} a NumberA
* @param {string} b NumberB
* @return {String} aとbの減算結果
*/
const zoneSub = (a, b) => {
const len = Math.max(a.length, b.length);
const aa = fillZero(a, len);
const bb = fillZero(b, len);
let sum = "";
let cc = 0;
let overflow = 0;
for (let idx = (len-1); idx > -1; idx--) {
cc = overflow + aa.charCodeAt(idx) - bb.charCodeAt(idx);
if (cc < 0) {
overflow = -1;
cc = cc + 10;
} else {
overflow = 0;
}
sum = String.fromCharCode(cc + 0x30) + sum;
}
return sum;
}
/**
* str を len桁になるように 左から0埋めする
* @param {String} str
* @param {Number} len
* @returns 0埋めされた結果
*/
const fillZero = (str, len) => {
return ( Array(len).join('0') + str ).slice( -len );
}
import ZUtil from "./module_util.js";
const zutil = new ZUtil();
console.log(zutil.add("12345","938"));
console.log(zutil.sub("12345","938"));
13283
11407
export class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
area() {
return rectArea(this.width, this.height);
}
};
export class Circle {
constructor(radius) {
this.radius = radius
}
area() {
return circleArea(this.radius);
}
}
const rectArea = (height, widht) => {
return height * widht;
}
const circleArea = (radius) => {
return Math.PI * (radius ** 2)
}import { Rectangle, Circle } from "./module_app.js";
const r = new Rectangle(5,10);
const c = new Circle(1);
console.log(r.area());
console.log(c.area());
13283
11407
import('./module_app.js'),then( App => {
const r = new App.Rectangle(5,10);
const c = new App.Circle(1);
console.log(r.area());
console.log(c.area());
})
~/projects/ReactExam$ mkdir 03_my-react
~/projects/ReactExam$ cd 03_my-react/
~/projects/ReactExam/03_my-react$ npx create-react-app my-react
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y
...
Success! Created my-react at /home/atsushi/projects/ReactExam/03_my-react/my-react
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 my-react
npm start
Happy hacking!
$ cd my-react
$ npm start
Compiled successfully!
You can now view my-react in the browser.
Local: http://localhost:3000
On Your Network: http://172.21.53.30:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Webブラウザが localhost:3000 で起動される
停止は Ctrl+C
配布物を作成する
$ npm run build
> my-react@0.1.0 build
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
46.66 kB build/static/js/main.8a2e9294.js
1.77 kB build/static/js/787.c525e900.chunk.js
513 B build/static/css/main.f855e6bc.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
Unit Test を実行する
$ npm test
PASS src/App.test.js
✓ renders learn react link (8 ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.128 s, estimated 1 s
Ran all test suites.
Watch Usage: Press w to show more.
reactDev4.png 134件
[詳細]
reactDev3.png 134件
[詳細]
reactDev2.png 137件
[詳細]
reactDev1.png 140件
[詳細]
build.png 150件
[詳細]
react.png 150件
[詳細]
