# react-app-frame

> Use [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to rebuild the webpack config.

Latest version **0.1.1** (published 2019-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-app-frame
pnpm add react-app-frame
yarn add react-app-frame
bun add react-app-frame
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-07-12 |
| First published | 2019-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 20 |
| Unpacked size | 40.3 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | talang007 |

## Links

- npm: https://www.npmjs.com/package/react-app-frame
- npm.io page: https://npm.io/package/react-app-frame

## Dependencies (20)

- [qs](https://npm.io/package/qs.md) ^6.7.0
- [antd](https://npm.io/package/antd.md) ^3.20.1
- [less](https://npm.io/package/less.md) ^3.9.0
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [redux](https://npm.io/package/redux.md) ^4.0.1
- [i18next](https://npm.io/package/i18next.md) ^17.0.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [styled-jsx](https://npm.io/package/styled-jsx.md) ^3.2.1
- [less-loader](https://npm.io/package/less-loader.md) ^5.0.0
- [react-redux](https://npm.io/package/react-redux.md) ^7.1.0
- [customize-cra](https://npm.io/package/customize-cra.md) ^0.2.14
- [react-i18next](https://npm.io/package/react-i18next.md) ^10.11.2
- [react-scripts](https://npm.io/package/react-scripts.md) 3.0.1
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.0.1
- [react-app-rewired](https://npm.io/package/react-app-rewired.md) ^2.1.3
- [babel-plugin-import](https://npm.io/package/babel-plugin-import.md) ^1.12.0
- [i18next-xhr-backend](https://npm.io/package/i18next-xhr-backend.md) ^3.0.0
- [styled-jsx-plugin-postcss](https://npm.io/package/styled-jsx-plugin-postcss.md) ^2.0.1
- [i18next-browser-languagedetector](https://npm.io/package/i18next-browser-languagedetector.md) ^3.0.1

## Recent versions

- 0.1.1 (latest) — 2019-07-12
- 0.1.0 — 2019-07-12

## README

This is a frame for react-app.Useing the [create-create-app](https://github.com/facebook/create-react-app) build.

## react-app-rewired customize-cra
Use [react-app-rewired](https://github.com/timarney/react-app-rewired) and [customize-cra](https://github.com/arackaf/customize-cra) to rebuild the webpack config.

## babel-plugin-import
If you are using [ant-design](https://ant.design/docs/react/getting-started-cn#%E6%8C%89%E9%9C%80%E5%8A%A0%E8%BD%BD), maybe you need it.

## react-redux redux
Use [react-redux](https://github.com/reduxjs/react-redux) and [redux](https://github.com/reduxjs/redux) to deal the data transmission.

## react-i18next i18next i18next-browser-languagedetector i18next-xhr-backend
Use [react-i18next](https://github.com/i18next/react-i18next), [i18next](https://github.com/i18next/i18next),  [i18next-browser-languagedetector](https://github.com/i18next/i18next-browser-languageDetector) and [i18next-xhr-backend](https://github.com/i18next/i18next-xhr-backend) to make the internationalization come true.

## axios qs
Use [axios](https://github.com/axios/axios) and [qs](https://github.com/ljharb/qs) => AJAX

## react-router-dom
Use [react-router-dom](https://github.com/ReactTraining/react-router) to achieve the routes jump

## styled-jsx
Use [styled-jsx](https://github.com/zeit/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** 的错误。

这样才可以使用这种方式
```js
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` 文件，没用

```js
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"] }]
    )
  )
}
```

---
_Source: https://npm.io/package/react-app-frame · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._