songdun / Just-For-Fun

:tada: Create React App starter

JUST FOR FUN

海外项目 C 端基础框架,使用React官方推荐的 create-react-app 搭建

快速开始

git clone 'https://github.com/tangweikun/Just-For-Fun.git'
cd Just-For-Fun
yarn / npm install
yarn start / npm run start

技术栈

• redux
• redux-saga
• reselect
• react-router

基础配置

• 域名代理

  修改package.json里的proxy

• Post-Processing CSS

  minifies your CSS and adds vendor prefixes to it automatically through Autoprefixer

• NO CSS Preprocessor

  we recommend that you don’t reuse the same CSS classes across different components.

• 环境变量设置

  在.env里面配置环境变量

• Code Splitting

  Code-Splitting

  route-code-splitting

  配合一下使用

  react-loadable

  React Router Config

  [
  {
    component: Layout,
    routes: [
      {
        path: '/',
        exact: true,
        component: App,
      },
  
      {
        path: '/topics',
        component: Loadable({
          loader: () => import('./routes/Topics'), // oh no!
          loading: Loading,
        }),
        routes: [
          {
            path: '/topics/:topicId',
            component: Loadable({
              loader: () => import('./routes/Topics/Topic'), // oh no!
              loading: Loading,
            }),
          },
          {
            path: '/topics',
            component: () => <h3>Please select a topic.</h3>,
            exact: true,
          },
        ],
      },
      {
        component: () => <h3>404.</h3>,
      },
    ],
  },
  ]
  

• �get�InjectAsync

  [InjectAsync�Reducer]

  [InjectAsync�Sagas]

   getInjectAsync({
    store,
    reducer,
    sagas,
    reducerName: 'serciveExample' });
  

• 代码风格

  使用prettier和preCommit,统一项目代码风格

• hot loading

• 单元测试

  基于Jest进行单元测试,配置commit before test

• Redux DevTools

• source-map-explorer

  yarn analyze 可以查看所 build 后拆分包占比大小

• react-i18next

  react-i18next documentation

Why use create-react-app

10 Reasons I Love create-react-app

create-react-app vs other starter projects

• Dan Abramov
• Get started with React immediately
• No webpack config: one less thing to learn at first
• No babel config: ditto
• Very few dependencies to manage
• Running Tests Included
• Hot reloading