Math.ceil(Math.random()*10);  
console.log(Math.ceil(Math.random()*10))
//2
//1
//9

// 可均衡獲取 0 到 1 的隨機整數。
console.log(Math.round(Math.random()); )

//Math.floor(Math.random()*10); 
//可均衡獲取 0 到 9 的隨機整數。

const number=["1","2","3"];
let names = [...number];
console.log(names)
//(3) ['1', '2', '3']

const data={name:'lara',age:3};
let newdata = { ...data };
console.log(newdata) 
//{name: 'lara', age: 3}

var number1=[1,2,3];
var number2=[4,5,6];
let newnumber = [...number1,...number2];
console.log(newnumber) 
//(6) [1, 2, 3, 4, 5, 6]

var data1={name:'Test'};
var data2={age:5};
let newData3 = {...data1,...data2};
console.log(newData3) 
//{name: 'Test', age: 5}

const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
console.log(lyrics) 
(5) ['head', 'shoulders', 'knees', 'and', 'toes']

var one='Hello Word';
var array1 =[...one]
console.log('字符串轉字符数组',array1) 
//(10) ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'd']

let text = [...'Hello'];
console.log(text);
//(5) ['H', 'e', 'l', 'l', 'o']

let scores = [12, 33, 6]
const addAll = (a, b, c) => {
    console.log(a + b + c);
};
addAll(...scores); 
//51

let list = [1, 2];
list.push(...[3, 4]);
console.log(list)
//(4) [1, 2, 3, 4]

//若要對UTF-8字串base64編碼改用js-base64套件來進行base64編碼及解碼
//加密
let base64EncodedString = window.btoa("hello world");
console.log(base64EncodedString); // aGVsbG8gd29ybGQ=
//解密
let base64DecodedString = window.atob(base64EncodedString);
console.log(base64DecodedString); // hello world

npm install --save js-base64

const Chinese = Base64.encode('中文')
console.log(Chinese)
// "5Lit5paH"

const ChineseDecode = Base64.decode('5Lit5paH')
console.log(ChineseDecode)
// '中文'

const list=[1,2,3,4,5,6,7]

const  arrayList=list.map((list,index)=>{
  return (
  <li key={index}>
    {list}
  </li>
  )
})


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render( <ul>{arrayList}</ul>);

html

<div id="app"></div>


//js Babel 
/*props{
  name:'Lara',
  age:3,
}*/
//函式元件要大寫
function HelloMessage ( props ) {
    return(
    <div>
        <h1>我是 { props.name } !</h1>
        <p>我今年 { props.age } 歲</p>
     </div>
    ) 
}
const element = <HelloMessage name="Lara" age="3"/>;
const root = ReactDOM.createRoot(document.getElementById('root'));
//Rendar 只一次
root.render( element );


//return <div></div>包裹
//map() Key 綁定

function Welcome (props){
  return <h1>{props.name},{props.age}</h1>
}


function App (){
  return (
    <div>
    <Welcome name="lara" age="2"></Welcome>
   <Welcome name="Tom" age="2"></Welcome>
    </div>
  )

}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

//react 版本18
//以上的版本只適用於開發環境，並不適合用於線上環境。你可以在以下找到已壓縮和最佳化的 React 線上版本：
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

//babel =>利用 Babel CDN 讓瀏覽器直接跑 JSX
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

//官方版本 18，保留 crossorigin 
<script crossorigin src="..."></script>
//六角讀書會教法
<script src="all" type=text/babel></script>

//陳述式Statement 
const a= 1;
//表達式 Expression
a
````
函式

npm install react-router-dom 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
 
reportWebVitals();

import React from 'react';

const FirstPage=()=>{
    const StyleSheet={
        width:"100vw",
        height:"100vh",
        backgroundColor:"#FF2E63",
        display: "flex",
        alignItems:"center",
        justifyContent:"center",
        flexDirection:"column"
    }
    return(
        <div style={StyleSheet}>
            <h1 style={{color:"white",fontFamily:"Microsoft JhengHei"}}>我是第一頁</h1>
        </div>
    )
}

export default FirstPage;

import React from 'react';

const SecondPage=()=>{
    const StyleSheet={
        width:"100vw",
        height:"100vh",
        backgroundColor:"#08D9D6",
        display: "flex",
        alignItems:"center",
        justifyContent:"center",
        flexDirection:"column"
    }
    return(
        <div style={StyleSheet}>
            <h1 style={{color:"white",fontFamily:"Microsoft JhengHei"}}>我是第二頁</h1>
        </div>
    )
}

export default SecondPage;

import { Routes,Route,} from 'react-router-dom'
import './App.css';
import FirstPage from "./pages/FirstPage";
import SecondPage from "./pages/SecondPage";
function App() {
  return (
    <div className="App">
      <h1>Home</h1>
      <ul>
        <li><a href='/'>Home</a></li>
       <li><a href='/secondpage'>SecondPage</a></li>
         
      </ul>
      <Routes>
        <Route index element={<FirstPage />} />
         <Route path='secondpage' element={<SecondPage />} />
       </Routes>
    </div>
  );
}
export default App;

npm install create-react-app

npx create-react-app 專案名稱

npm install @babel/runtime --save-dev