This is a frame for react-app.Useing the create-create-app build.

react-app-rewired customize-cra

Use react-app-rewired and customize-cra to rebuild the webpack config.

babel-plugin-import

If you are using ant-design, maybe you need it.

react-redux redux

Use react-redux and redux to deal the data transmission.

react-i18next i18next i18next-browser-languagedetector i18next-xhr-backend

Use react-i18next, i18next, i18next-browser-languagedetector and i18next-xhr-backend to make the internationalization come true.

axios qs

Use axios and qs => AJAX

react-router-dom

Use react-router-dom to achieve the routes jump

styled-jsx

Use styled-jsx to write the CSS

在使用 styled-jsx 进行项目开发的时候。使用的是 react-app-rewired customize-cra 需要安装插件 styled-jsx-plugin-postcss 并且需要在根目录下面添加 styled-jsx-plugin-postcss 的配置文件 postcss.config.js。否则会报 No PostCSS Config found in 的错误。

这样才可以使用这种方式

import React from 'react'
import css from 'styled-jsx/css'

const p_style = css`p {font-size: 100px; color: red;}`;

const Home = (props) => {
  return (
    <div>
      <p>Home</p>
      <style jsx>{p_style}</style>
    </div>
  )
}

export default Home

同时。 config-overrides.js 需要添加babel插件，不要配置 .babelrc 文件，没用

module.exports = {
  webpack: override(
    addCustom(),
    fixBabelImports('import', {
      // libraryName: 'styled-jsx',
      // libraryDirectory: 'es',
      // style: 'css'
    }),
    addWebpackAlias({
      "@": resolve("src")
    }),
    addBabelPlugins(
      ['styled-jsx/babel', { "plugins": ["styled-jsx-plugin-postcss"] }]
    )
  )
}