摘要:通過聲明式編程模型定義組件,是最強大的核心功能。無論是的瀏覽器書簽,還是的導航功能,只要是可以使用的地方,就可以使用。二級路由使用渲染組件屬性狀態請選擇一個主題。也許是最佳小實踐地址,覺得有幫助的話,請點擊一下,嘿嘿
小前言
下面我們看看完成后的小 demo 開始用create-react-app創建我們的 app這是一個小小的有關react的小例子,希望通過一個小例子,可以讓新手更好的了解到react、react-router4.0、redux的集中使用方法。
這是基于create-react-app來開發的,一種簡單的快速創建 React web 項目的方式是使用 Create React App 工具,相當于一個react手腳架,此工具由 Facebook 開發并維護。如果你還沒有使用過 create-react-app,你需要先安裝。然后就可以通過它創建一個新項目。
React Router4.0 號稱一次學習,隨處路由。通過聲明式編程模型定義組件,是 React 最強大的核心功能。 React Router 可以為您的應用已聲明式的方式定義導航組件最強大的核心功能。 無論是 Web App 的瀏覽器書簽 URLs,還是 React Native 的導航功能, 只要是可以使用 React 的地方,就可以使用 React Router。
Redux 是一個用來管理JavaScript應用中 data-state(數據狀態)和UI-state(UI狀態)的工具,對于那些隨著時間推移狀態管理變得越來越復雜的單頁面應用(SPAs)它是比較理想。阮老師redux的教程
首先 安裝好create-react-app,已經安裝好了就不用重復安裝啦。
npm install -g create-react-app
mac不成功記得用 sudo
安裝完畢之后:
create-react-app react-plan cd react-plan/ npm start
安裝會有點慢,耐心等待一下
安裝完畢之后,在瀏覽器地址欄輸入localhost:3000,就可以瀏覽到剛才創建的 app 啦,這個手腳架很簡單。如下圖
代碼開始創建好應用之后,我們就開始寫我們的代碼了,在 src文件夾下面創建一個components文件夾,并且在這個文件夾下面創建一個home.js的文件,然后寫上我們首頁的內容。
首頁介紹組件
src/components/home.js
import React, { Component } from "react" class Home extends Component { constructor(props) { super(props); } render () { return () } } export default Home首頁
這是一個 react 學習的基本操作的小栗子
通過本次學習可以清楚的掌握, react-router、redux的基本使用方法
寫好了 home.js 之后我們先引入我們的 app 看看
然后在src/App.js引入我們的 home.js,App.js就變成了
src/App.js
import React, { Component } from "react"; import logo from "./logo.svg"; // 引入 homejs import Home from "./components/home.js" import "./App.css"; class App extends Component { render() { return (); } } export default App;Welcome to React
To get started, edit
// 使用 home 組件src/App.js
and save to reload.
寫好之后我們就可以成功的寫完了home.js組件啦,是不是很簡單,是不是很happy?
一鼓作氣,完成所有組件繼續在components文件夾創建一個plan.js(計劃表)、detail.js(計劃詳情)、pupop.js(添加計劃)、的js文件和comment.css(組件的樣式),我們這時候不涉路由的跳轉,只要把所有靜態的組件先一鼓作氣寫好來。
tips:這個例子小,為了方便,我把所有的組件樣式文件都寫到comment.css里面了,這時候寫好的了 css 記得在App.js里面引入
src/App.js增加一句 import "./components/comment.css"
src/components/comment.css
.main { padding: 10px; flex-direction: row; display: flex; } .NavBox { width: 250px; margin-right: 20px; } .listNav{ text-align: center; } .listNav li { line-height: 40px; } .listNav li a { text-decoration: none; } .listNav li.active{ background: #00a6f7; } .listNav li.active a{ color: #fff; } .side{ width: 100%; } .slist{ font-size: 14px; } .addBtn { font-size: 14px; font-weight: normal; background: skyblue; display: inline-block; padding: 10px; margin-left: 10px; color: #ffffff; border-radius: 4px; cursor: pointer; } .slist li{ padding: 10px; display: flex; flex-direction: row; justify-content: space-between; border-bottom: solid 1px cornflowerblue; } .slist li h3{ font-weight: normal; } .slist li div span{ text-decoration: underline; padding: 0 10px; } .popup{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.6); display: flex !important; justify-content: center; align-items: center; } .popup .pbox { width: 50%; height: 320px; background: #ffffff; box-sizing: border-box; padding: 10px; position: relative; } .popup .pbox h4{ font-size: 14px; } .popup .pbox input { margin: 10px 0 20px 0; } .popup .pbox input, .popup .pbox textarea{ display: block; width: 100%; height: 32px; border: 1px solid skyblue; text-indent: 10px; } .popup .pbox textarea { resize: none; height: 100px; margin: 10px 0; } .popup .pbox .close { position: absolute; width: 30px; height: 30px; background: red; text-align: center; line-height: 30px; border-radius: 50%; color: #ffffff; right: -15px; top: -15px; transition: 0.5s; cursor: pointer; } .popup .pbox .close:hover{ transform: rotate(180deg); } .popup .pbox .pBtn { display: flex; justify-content: center; padding-top: 20px; } .popup .pbox .pBtn span{ padding: 10px 20px; background: skyblue; margin: 0 10px; font-size: 14px; color: #ffffff; border-radius: 4px; cursor: pointer; } .plant{ line-height: 50px; position: relative; } .plant p{ position: absolute; right: 0; top: 0; font-size: 14px; background: blue; height: 30px; line-height: 30px; padding: 0 10px; color: #fff; } .planlist{ width: 100%; padding: 10px; border-collapse: collapse; } .planlist td, th{ border: 1px solid blue; line-height: 32px; font-size: 14px; } .plan-delect{ color: red; cursor: pointer; } .plan-delect:hover{ color: blue; text-decoration: underline; } .plan-title{ width: 80%; }
計劃組件
src/components/plan.js
import React, { Component } from "react" class Plan extends Component { constructor(props) { super(props); } render () { return () } } export default Plan;計劃表
添加計劃
標題 操作 計劃1 刪除
測試的時候直接把App.js剛才寫的import Home from "./components/home.js"改成 import Home from "./components/plan.js",就可以測試plan 組件啦。是不是很簡單?下面的同理。
計劃詳情組件
src/components/detail.js
import React, { Component } from "react" class Detail extends Component { constructor(props) { super(props); } render() { return () } } export default Detail計劃詳情
id: 123
標題: 測試標題
內容: 測試內容
添加計劃組件
src/components/popup.js
import React, { Component } from "react" class Pupop extends Component{ constructor (props) { super(props) this.state = { id: "", title: "1", content: "1" } } render() { let self = this; return () } } export default Pupop X計劃標題
計劃內容
取消 確認
呼~~~終于把所有組件都寫好了。下面我們就用路由把他們全都串聯起來吧。實現點擊跳轉咯
加入路由首先記得安裝路由 npm install react-router-dom history --save
history這個模塊是用來做 js 的跳轉,后面我們會介紹到。
安裝完成路由模塊之后,在src/components/下面我們在增加一個測試二級路由的文件testrouter.js,里面的內容很簡單,直接把官網的拿進來。
src/components/testrouter.js
import React, { Component } from "react" import { BrowserRouter as Router, Route, Link } from "react-router-dom" const Topic = ({ match }) => () class TestRouter extends Component { constructor(props) { super(props); console.log(this.props) } render () { return ({match.params.topicId}
) } } export default TestRouter二級路由
- 使用 React 渲染
- 組件
- 屬性 v. 狀態
( 請選擇一個主題。
)}/>
然后在App.js做一點改動,引入所有需要的模塊,看注釋
src/App.js
import React, { Component } from "react" import { BrowserRouter as Router, Route, Link } from "react-router-dom" import logo from "./logo.svg" // 引入4個模塊組件 import Plan from "./components/plan.js" import Home from "./components/home.js" import Popup from "./components/popup.js" import TestRouter from "./components/testrouter.js" import Detail from "./components/detail.js" // 引入樣式文件 import "./App.css" import "./components/comment.css" // 引入路由 import createHistory from "history/createBrowserHistory" const history = createHistory() // 開始代碼 class App extends Component { constructor(props) { super(props); } render() { return (); } } export default AppWelcome to React Plan
// 路由配置 // 編寫導航// 路由匹配
- 首頁
- 計劃表
- 二級路由
不是結束的結束:好啦~~~路由也配置好,打開瀏覽器,在代碼正確的情況下,可以愉快的實現跳轉咯。之后我們再把 redux 加入進來,這樣子就可以,每個組件就可以操作全局的數據了。稍后奉上。react、react-router、redux 也許是最佳小實踐2
github地址,覺得有幫助的話,請點擊一下 start,嘿嘿
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/83393.html
摘要:上一篇也許是最佳小實踐加入在組件之間流通數據更確切的說,這被叫做單向數據流數據沿著一個方向從父組件流到子組件。這個將這個新的對象附加到上,并將它返回,用來更新。這一次,將當前的狀態仍舊是空數組和對象一起傳遞給了。 上一篇:react、react-router、redux 也許是最佳小實踐1 加入 redux React 在組件之間流通數據.更確切的說,這被叫做單向數據流——數據沿著一個...
摘要:譯者按最近依舊如火如荼相信大家都躍躍欲試我們團隊也開始在領域有所嘗試年應該是逐漸走向成熟的一年讓我們一起來看看國外的開發者們都總結了哪些最佳實踐年在全世界都有很多關于新的更新和開發者大會的討論關于去年的重要事件請參考那么年最有趣的問題來了我 譯者按:最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,我們團隊也開始在React領域有所嘗試. 2016年應該是Reac...
摘要:首先聲明這篇文章是想說明一下最新版本的的新特性帶來的極大的開發體驗提升而不是如何利用開發應用這個特性就是對的支持在的中有說明具體可以參考這里在版本之前我們在開發應用尤其是在配合一類庫的時候經常用到諸如之類的封裝而這些函數其實都可以用裝飾器的 首先聲明, 這篇文章是想說明一下最新版本的 TypeScript(3.0) 的新特性帶來的極大的 React 開發體驗提升. 而不是如何利用 Ty...
閱讀 1552·2021-11-17 09:33
閱讀 1100·2021-11-12 10:36
閱讀 2414·2019-08-30 15:54
閱讀 2441·2019-08-30 13:14
閱讀 2914·2019-08-26 14:05
閱讀 3289·2019-08-26 11:32
閱讀 3001·2019-08-26 10:09
閱讀 2995·2019-08-26 10:09