首頁

2020
0
React

React - styled-components CSS套件

React - styled-components 安裝和使用 安裝 TypeScript Button 元件，定義兩種主題 styled-components 的主題切換方法 先安裝套件 1npm install --save styled-components 安裝 TypeScript 1npm install @types/styled-components --save 新增一個

0
React

React - Storybook 組件視覺化工具

React - Storybook 安裝和使用 notes、viewport 套件這套件超好用的，搭配 React 的組件概念，可以直接顯示切版的樣子，又可以切換不同裝置，還可以寫 Markdown 文件，方便給其他開發者觀看，真的是超棒的，那就開始教學吧，分3個部分教學： Storybook 安裝教學 Storybook notes 套件使用方法 可以寫 Markdown 說明文件 Story

0
React

React - TypeScript、ESLint、Prettier 環境建置

React - TypeScript、ESLint、Prettier 環境建置使用 create-react-app 建立專案這篇文章在教你如何使用 create-react-app 建立的專案搭配 TypeScript、ESLint、Prettier，所建立起來的環境。還會教你如何在 git commit 的時候自動檢查專案的程式碼。 使用create-react-app建立專案使用creat

2019
0
React

React-搭配Redux簡易教學

先利用React製作一個簡單的計數器 index.js 12345import React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root')); App.js 12345678910

0
React

React-setState基本應用

基本應用2.setState使用123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import React, {Component} from 'react';import

0
React

React-props基本應用

基本應用1.用props指定初始值 Counter.js 1234567891011121314151617181920212223242526272829import React, {Component} from 'react';class Counter extends Component{ constructor(props){

0
React

React-props父層屬性傳到子層

1.利用props父層屬性傳到子層 父層List.js 123456789101112131415161718192021import React, { Component } from 'react'; //載入react核心import Item from './Item' //載入Item.jsclass List

0
React

React-組件的自訂涵式兩種寫法

組件的自訂涵式兩種寫法第一種(箭頭涵式)詳細資料請看上一篇文章(React-組件的事件處理和狀態更新) 第二種(一般涵式)使用一般涵式，則需要將this重新綁定，所以建議使用箭頭涵式。 1234567891011121314151617181920212223242526272829303132333435363738394041424344import React, {Componen

0
React

React-組件的事件處理和狀態更新

組件的事件處理和狀態更新 新增一個Message組件 123456789101112131415161718192021222324252627282930import React, {Component} from 'react'; //載入react核心class Message extends Component{ //創建一個Me

0
React

React-入門教學第一篇

1.使用node.js 新增一個全新的React專案123npx create-react-app 專案名稱 // 利用npx create-react-app　建構專案　cd my-app //　移動至專案目錄下npm start // 啟動 2.建立一個超入門的組件 先將SRC資料夾底下的檔案全部刪除 新增Item.js 1234567891011import React,