第25個冬天

  於~\src\components\ 下新增 一個ProductDetails.js 元件 ~\src\components\ProductDetails.js 程式碼 在此故意做個錯誤示範(缺少return) 1 2 3 4 5 6 import React, { Component } from 'react' ; export default class ProductDetails extends Component { render() { <div>Product Details</div> } } 再到 ~\src\App.js 添加元件路由 ~\src\App.js 程式碼 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import React, { Component } from 'react' ; import { Route } from 'react-router' ; import { Layout } from './components/Layout' ; import { Home } from './components/Home' ; import { FetchData } from './components/FetchData' ; import { Counter } from './components/Counter' ; import ProductDetails from './components/ProductDetails' ; import './custom.css' export default class App extends Component { static displayName = App.name; render() ...

在此微調Home.js 來做測試 可在Home 元件進行建構子中state初始化 state(狀態)就像 ReactJS 組件的資料狀態暫存。 state management(狀態管理)只能在類組件(Class Component)中進行。 Function Components(功能組件)是stateless(無狀態)組件。 異動render達到react js中的 data bind ~\MyReact1\ClientApp\src\components\Home.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 import React, { Component } from 'react' ; export class Home extends Component { static displayName = Home.name; constructor(props) { super (props); this .state = { products: [ { title: "some product" , description: "interesting" }, { title: "another product" , description: "more" } ] }; } render() { return ( <div className= "row" > { this .state.products.map(product => <div className= "col-4" > ...

  2022鐵人賽第一天文章，讀者朋友們好 來稍微探究一下於asp.net core中搭配React前端框架的開發 在這30天成蝶的過程 我想React本身很重ES6和Javascript一些基本語法 算還滿適合拿來當三框架中先拿來進行掌握的一門 (但也是最難掌握也很多人不太推先學的XD) 勉勵自己也將知識專業進行傳播 如文章對於你(可能是個小白)也可能是 只會React但不曉得如何結合.NET Core後端的 又或者只會.NET Core後端但不曉得怎麼和React進行結合的 我希望這系列文章 是個對上述這些開發者戰友們或者以往家教學員 有幫助讀起來不會吃力也很容易吸收的技術篇章 此系列會使用 NodeJs 16以上 和 visual studio 2022  (.Net6長期支援版本) 會在Windows作業系統上做筆記文章 當然若是Mac愛好者的朋友.Net Core (.Net6)也以克服跨作業系統的限制 並不侷限於Windows OS 但Mac環境有關visual studio相關操作可能就都要用cli和vscode來搭配了 因為Mac上的Visual Studio for Mac我較沒接觸 請各位先準備好上述這些IDE和開發環境 有任何誤植或者觀點不認同皆可進行一些開發經驗分享 和批評指教一同成長 開啟vs2022創建第一個React.js配asp.net core的新專案 在此去命名專案名稱默認會配有一個.csproj(C#的專案檔)和.sln(方案) 方案中可包含一或多個專案 選.NET6.0 預設新專案建立好後就可看到如下專案結構 有默認範本的asp.net core web api(相關先備知識可參閱 過去技術部落格貼文 ) 於此系列可能就會稍微帶過 可以觀察到專案目錄下有一份前端的專案檔 裡面有熟悉的NodeJs package.json 於後端C#專案中的範疇 主程式進入點會在Program.cs當中 ~\MyReact1\Program.cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 var builder = WebApplication.CreateBuilder(args); // Add se...

  初始專案 法1.(不汙染環境方式，每次都會暫時下載create-react-app cli用完就刪除) 新增一個專案folder後cd到該層並下 npx create-react-app . 法2.(需要全域性安裝影響環境方式) 一開始環境要記得先全域性下創建專案用的CLI npm install -g create-react-app create-react-app 專案(目錄)名稱 再cd 到專案(目錄)名稱下也可 運行專案 npm start 或 npm run start 依賴套件安裝 npm i 套件名 或 yarn add 套件名 比如 npm i react-router-dom yarn add react-router-dom Ref: Difference between npm start and npm run start https://stackoverflow.com/questions/51358235/difference-between-npm-start-and-npm-run-start What is the --save option for npm install? https://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm-install https://stackoverflow.com/questions/40868494/what-is-the-s-in-npm-i-s

  1. react-particle-animation(MIT 授權) https://www.npmjs.com/package/react-particle-animation Particle效果 套用後效果 簡單使用方式 Step1.引入組件 import ParticleAnimation from 'react-particle-animation'; Step2.使用ParticleAnimation 組件Tag設置相應屬性 function App() { return ( <div className="App"> <ParticleAnimation style={{ height: '96vh' }} background={{ r: 21, g: 22, b: 23, a: 1 }} particleSpeed={0.5} particleRadius={1.5} /> </div> ); } export default App; 2. react-typed(MIT 授權) https://www.npmjs.com/package/react-typed 文字輸入動畫效果 簡單使用方式 Step1.引入組件 import Typed from 'react-typed'; Step2.使用Typed組件設置相應屬性進行要顯示的輸入動畫文字內容跟顯示、移除速度，是否重複 function Header() { return ( <div className="main-info"> <h1>Who Am I?</h1> <Typed strings={[ "", "A software engineer", ...

  下指令 npm i bootstrap react-bootstrap 在App.js中 引入bootstrap css style 這裡要套用react-bootstrap 當中的 navbar 組件 import Navbar from 'react-bootstrap/Navbar' 當然還有常用到的 nav組件 import Nav from 'react-bootstrap/Nav' 套用效果 Ref: https://app.pluralsight.com/guides/how-to-use-react-bootstrap-with-npm https://react-bootstrap.github.io/components/alerts

  ES7 React/Redux/GraphQL/React-Native snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 經常使用的快捷 rfce Basic Methods Prefix Method imp→ import moduleName from 'module' imn→ import 'module' imd→ import { destructuredModule } from 'module' ime→ import * as alias from 'module' ima→ import { originalName as aliasName} from 'module' exp→ export default moduleName exd→ export { destructuredModule } from 'module' exa→ export { originalName as aliasName} from 'module' enf→ export const functionName = (params) => { } edf→ export default (params) => { } met→ methodName = (params) => { } fre→ arrayName.forEach(element => { } fof→ for(let itemName of objectName { } fin→ for(let itemName in objectName { } anfn→ (params) => { } nfn→ const functionName = (params) => { } dob→ const {propName} = objectToDescruct dar→ const [propName] = arrayToDescruct sti→ setInterval(() => { }, interv...