create-react-app+antd+react-css-modules構成
8446 ワード
クイックスタート:
以上を押すと、React開発環境をすばやく作成できます.
開くhttp://localhost:3000/表示
環境設定:
アイテムを生成した後、足場は「優雅さ」のために・・・すべてのwebpack関連プロファイルが非表示になり、myappフォルダディレクトリを表示すると、webpackプロファイルが見つかりません.次のコマンドを実行します.
さらにmyappフォルダを表示すると、完全なプロジェクト構造が表示されます.
antd構成
オンデマンド導入
パッケージ後のボリュームを減らし、書きやすいようにbabel-plugin-importプラグインを使用してconfigディレクトリの下に配置します.
webpack.config.dev.jsとwebpack.config.prod.jsファイル、ここでwebpack.config.dev.jsの例として、
webpack.config.prod.jsと同様に構成すればよい:
導入モジュールは次のとおりです.
CSS Modules構成
antdとcss modulesは混用できないので、大神がいいと言っているのを見てください.
antdのcssに対してloaderのルールを単独で書き、css modulesを開かない.
excludeとincludeの構成の使用
コンフィギュレーションディレクトリの下に配置する、同様にコンフィギュレーションwebpackを変更する.config.dev.jsファイル
次にantdのButtonと自分で書いたCSS Modulesの使用例を示します.
npm install -g create-react-app /* create-react-app */
npm install -g create-react-app /* yarn */
create-react-app myapp /* ，myapp */
cd myapp /* */
yarn start /* */以上を押すと、React開発環境をすばやく作成できます.
開くhttp://localhost:3000/表示
環境設定:
アイテムを生成した後、足場は「優雅さ」のために・・・すべてのwebpack関連プロファイルが非表示になり、myappフォルダディレクトリを表示すると、webpackプロファイルが見つかりません.次のコマンドを実行します.
yarn eject
さらにmyappフォルダを表示すると、完全なプロジェクト構造が表示されます.
myapp/
node_modules/
package.json
.gitignore
config/
paths.js
polyfills
env.js
webpack.config.dev.js /* */
webpack.config.prod.js /* */
public/
index.html /* html */
scripts/
build.js
start.js
test.js
src/
App.js
index.js /* */
antd構成
yarn add antd babel-plugin-importオンデマンド導入
パッケージ後のボリュームを減らし、書きやすいようにbabel-plugin-importプラグインを使用してconfigディレクトリの下に配置します.
webpack.config.dev.jsとwebpack.config.prod.jsファイル、ここでwebpack.config.dev.jsの例として、
webpack.config.prod.jsと同様に構成すればよい:
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// : antd
plugins: [
//['react-html-attrs'],// babel-plugin-react-html-attrs
// css
['import', { libraryName: 'antd', style: 'css' }],
// : less
// ['import', { libraryName: 'antd', style: true }],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},導入モジュールは次のとおりです.
// scr/App.js
import React, { Component } from 'react';
- import Button from 'antd/lib/button';
+ import { Button } from 'antd';
import './App.css';CSS Modules構成
antdとcss modulesは混用できないので、大神がいいと言っているのを見てください.
antdのcssに対してloaderのルールを単独で書き、css modulesを開かない.
excludeとincludeの構成の使用
コンフィギュレーションディレクトリの下に配置する、同様にコンフィギュレーションwebpackを変更する.config.dev.jsファイル
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
//
modules: true, // css modules
localIdentName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
//
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
//
// modules: true, // css modules
// localIdentName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},次にantdのButtonと自分で書いたCSS Modulesの使用例を示します.
import React, { Component } from 'react';
import { addRecipe } from '../actions';
import { Button } from 'antd';
import styles from './App.css'
class App extends Component {
state = {
calendar: null
}
componentDidMount() {
const { store } = this.props // props store
store.subscribe(() => { // redux store
this.setState(() => ({ // setState
calendar: store.getState() // store state state
}))
})
}
submitFood = () => {
this.props.store.dispatch(addRecipe({//store.dispatch addRecipe
day: 'monday',
meal: 'breakfast',
recipe: {
label: this.input.value
}
}))
this.input.value = ''//
}
render() {
return (
this.input = input}
placeholder="Monday's Breakfast"
/>
Monday's Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}
);
}
}
export default App
CSS Modulesのチェン の いた い の を びます
ここではreact-css-modulesを に します.コードは の りです.import React, { Component } from 'react';
import { addRecipe } from '../actions';
import { Button } from 'antd';
import CSSModules from 'react-css-modules'
import styles from './App.css'
class App extends Component {
state = {
calendar: null
}
componentDidMount() {
const { store } = this.props // props store
store.subscribe(() => { // redux store
this.setState(() => ({ // setState
calendar: store.getState() // store state state
}))
})
}
submitFood = () => {
this.props.store.dispatch(addRecipe({//store.dispatch addRecipe
day: 'monday',
meal: 'breakfast',
recipe: {
label: this.input.value
}
}))
this.input.value = ''//
}
render() {
return (
this.input = input}
placeholder="Monday's Breakfast"
/>
Monday's Breakfast:{this.state.calendar&&this.state.calendar.monday.breakfast}
);
}
}
export default CSSModules(App, styles);
な いは のとおりです.+ import CSSModules from 'react-css-modules'
-
+
- export default App
+ export default CSSModules(App, styles);