React學習之旅----引入圖片
import React from 'react'; // 引入本地圖片,需以元件的形式引入,而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; class News extends React.Component { constructor(props) { super(props) // 用於父子元件傳值 this.state = { width: '100px' } } render () { return ( <div> <ul> <li> 新聞元件 <img src={logo} width={this.state.width} /> <img src='https://avatar.csdn.net/9/8/5/1_qfxlw.jpg?1539742992' /> </li> </ul> </div> ) } } export default News
相關推薦
React學習之旅----引入圖片
import React from 'react'; // 引入本地圖片,需以元件的形式引入,而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; class News extends React.Component { construc
React學習之旅----專案小例項----無人點餐二---詳情頁渲染
App.js /* react路由的配置: 1、找到官方文件 https://reacttraining.com/react-router/web/example/basic 2、安裝 cnpm install react-router-dom --save 3、找
React學習之旅----Redux安裝及富文字、echarts
瀏覽器中安裝redux devtools擴充套件 yarn add redux react-redux redux-devtools-extension 安裝依賴包即可 // 引入createStore建立store,引入applyMiddleware 來使用中介軟體 //
React學習之旅----mock模擬假資料及封裝axios,動態渲染表格
import React from 'react'; import { Card, Table, Modal, Button, message } from 'antd'; import axios from './../../axios/index' import Utils from './..
React學習之旅----配置多頁面路由及巢狀路由demo
const menuList = [ { title: '首頁', // key: '/home' key: '/admin/home' }, { title: 'UI', key: '/ui', children: [ {
React學習之旅----按需載入Antd UI元件及自定義主題
package.json "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "a
React學習之旅----配置less-loader
yarn less-loader先安裝依賴 yarn eject結構目錄 開啟config目錄下的webpack.config.dev.js,修改webpack配置 找到css部分,拷貝一份,複製貼上,改為less即可 新增 const lessRegex = /\.less$/
React學習之旅----yarn eject報錯“This git repository has untracked files or uncommitted changes:”解決辦法
當我們yarn eject解開專案結構時,報錯This git repository has untracked files or uncommitted changes: 這是提示我們沒有進行git提交 我們開啟我們的github,新建專案,拉下程式碼後,將我們之前開發的檔案放進來,重新安
React學習之旅----表單錄入
import React, { Component } from 'react'; /* 約束性和非約束性元件: 非約束性組:<input type="text" defaultValue="a" /> 這個 defaultValue 其實就是原生DOM中的 value
React學習之旅----Todolist
import React from 'react'; class TodoList2 extends React.Component { constructor(props) { super(props) this.state = { list: [
React學習之旅----新建元件
react的元件有兩種寫法: import React from 'react'; class News extends React.Component { constructor(props) { super(props) // 用於父子元件傳值 } render () {
React學習之旅----安裝腳手架
npm i yarn -g全域性安裝yarn npm install -g create-react-app全域性安裝腳手架 create-react-app react01建立第一個專案,最好已經全域性安裝了yarn 安裝了node高版本後可以直接npx create-react-ap
React學習之旅----獲取表單輸入的值,雙向繫結
react中實現雙向繫結input輸入框值 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(props) this.sta
React學習之旅----獲取自定義屬性
獲取自定屬性,在小程式中可能更常用,在React中同樣也是可以獲取的,看例項 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(pr
React學習之旅----事件方法及改變this指向
import React, { Component } from 'react'; import '../assets/css/index.css' // react繫結屬性注意點 // class要換成className // for 要換成htmlFor // style class Home
React學習之旅----迴圈資料
import React from 'react'; // 引入本地圖片,需以元件的形式引入,而遠端圖片則不需要 import logo from '../assets/images/logo.svg'; // 元件名稱,類首字母必須大寫 class News extends React.Compo
React學習之旅----實現類似vue的資料雙向繫結
react沒有資料的雙向繫結,但可以用過一些方法實現: import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.sta
React學習之旅----父子元件傳值
父元件 import React from 'react' import Header from './Header' import Footer from './Footer' class Father extends React.Component { constr
React學習之旅----axios與fetch-jsonp
父元件 import React from 'react' import Header from './Header' import Footer from './Footer' import Axios from './Axios' import FetchJsonp f
React學習之旅----生命週期函式
app.js import React, { Component } from 'react'; // import logo from './assets/images/logo.svg'; // import './assets/css/App.css'; // 引入