使用webpack自制React組件

筆記如何在react-transform-boilerplate使用webpack自制React組件

1- 安裝 react-transform-boilerplate

2- 安裝所需要的css包

npm i --save-dev style-loader css-loader autoprefixer-loader sass-loader

 

3- 在webpack.config.dev.js 寫loader的設定

{
test: /\.scss$/,
loader: 'style!css!autoprefixer!sass'
}

 

4- 在webpack.config.dev.js中依導出的檔案中(entry:) import css進來, 在此例中是 /src/index

index.js裡 import ‘./style/main.scss’;

 

5- 自訂的react模塊基本寫法

import React , { Component } from 'react'; //import react進來
import Home from './Home'; // import組件的來源


class App extends Component {
  render() {
    return (
     <Home />
     // 此處寫 html或jsx, jsx的首字母要大寫
    );
  }
}

export default App; //導出組件模塊

 

6- 嵌套的關係為

__ index.js

|___  App.js

|______ Home.js

//index.js
import React from 'react';
import { render } from 'react-dom';

import App from './App';
import './style/main.scss'; //一併 import css進來


render(<App />, document.getElementById('root'));  // 嵌套到 html中的 #root中

// App.js
import React , { Component } from 'react';
import Home from './Home';


class App extends Component {
  render() {
    return (
      <div className="app-wrap">
        <div className="app-header"></div>
        <Home />
        <div className="app-footer">I am footer</div>
      </div>
    );
  }
}

export default App;

// Home.js
import React, { Component } from 'react';

class Home extends Component {
	render () {
		return (
			<div className="home">
				<div className="slogan">Welcome to Stage2</div>
			</div>
		);
	}
}

export default Home;

 

7-安裝 file-loader解決圖片中編譯出錯問題 npm i -D file-loader

webpck.config.dev.js加入

{
   test: /\.(jpe?g|png)$/,
   loader: 'file'
}

 

8-   npm start  在http://localhost:3000/ 查看