Forráskód Böngészése

:memo: add typescript day-1 practice

Jeremy Zheng 3 éve
szülő
commit
9ba283e285

+ 11 - 3
dashboard/src/App.tsx

@@ -1,12 +1,20 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import logo from "./logo.svg";
+import "./App.css";
+
+function demo_1(i: number, s: string): string {
+  console.log();
+  const str = `hello, react!(i = "${i}" s = "${s}")`;
+  return str;
+}
 
 function App() {
+  const demo_s = demo_1(123, "mint");
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
+        <h1>{demo_s}</h1>
         <p>
           Edit <code>src/App.tsx</code> and save to reload.
         </p>

+ 22 - 0
documents/development/frontend/README.md

@@ -1,7 +1,29 @@
 # 前端培训文档
 
+## 安装依赖包
+
+```bash
+# offline
+tar xf node_modules.tar.xz
+# online
+yarn install
+```
+
+![dashboard.png](dashboard.png)
+
+## 开发模式启动 [dashboard](http://localhost:3000)
+
+```bash
+yarn start
+```
+
+## Typescript
+
 - [Typescript 第一天](ts-day-1/)
 - [Typescript 第二天](ts-day-2/)
+
+## React
+
 - [React 第一天](react-day-1/)
 - [React 第二天](react-day-2/)
 - [React 第三天](react-day-3/)

BIN
documents/development/frontend/dashboard.png


+ 23 - 0
documents/development/frontend/ts-day-1/README.md

@@ -0,0 +1,23 @@
+# 素材
+
+## 零基础
+
+- 基础了解 [Get started with TypeScript](https://learn.microsoft.com/en-us/training/modules/typescript-get-started/1-introduction) **Unit 1~3**
+
+## 有其它语言基础(5 分钟上手)
+
+- [for JavaScript Programmers
+  ](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html)
+- [for Java/C# Programmers](https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-oop.html)
+
+## 练习(写几个 function, interface)
+
+## 教材
+
+- [基本数据类型](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
+
+### 工具
+
+- [在 palyground 练习](https://www.typescriptlang.org/play)
+- 在`App.tsx`里练习
+  ![app.png](app.png)

BIN
documents/development/frontend/ts-day-1/app.png