扩展CRA样板的简单指南

我将把所有必要的模块放在一起,以使其能够完全正常工作并可以进行生产准备。

首先

我假设您在设备上安装了nodenpm 。 而且,我不会深入研究所有这些技术,本文旨在将所有必要的配置纳入一篇文章。

我正在使用create-react-app作为本教程的基础。 CRA刚刚发布了版本2,该版本比以前的版本好得多。 它支持SCSS和更多现成的功能,所以我认为对于更多人来说,这已经足够了。

如果您只想复制此样板。 它可以在我的GitHub上找到。

创建React应用

有几种初始化create-react-app的方法,但我更喜欢npx样式。

  npx create-react-app NAME 
光盘名称
  NAME只是您自己的应用名称的占位符 

这是使用它的最干净的方法。 它不需要任何安装,这意味着您将始终拥有最新版本的CRA 。 调用此命令后,您只需输入cd NAME并通过运行npm start命令检查是否一切正常。 运行此命令后,浏览器应自动使用localhost:3000打开新卡。

Redux

现在,它变得越来越复杂。 让我们安装所有必需的npm模块,但首先,使用ctrl + c停止应用程序。 现在我们可以安装所需的东西:

npm install redux react-redux

如您所见,我安装了两个必需的软件包redux和react-redux。 现在,让我们开始创建所需的文件和目录

  mkdir -p src / store / numeric 
触摸 src / store.js src / store / combineReducer.js src / store / numeric / reducers.js src / store / numeric / actions.js src / store / numeric / definitions.js
 
src /
index.js (已经存在)
store.js
商店/
CombineReducer.js
数字/
reducers.js
actions.js
definitions.js

我猜您确实注意到这是一个不寻常的目录结构。 通常有3个目录: action,actionCreators和reducers 。 我做了一点修改,因为我认为标准方式比我的可读性差。

以下代码是store.js的实现。 这只是标准的,是商店的最基本的实现。 易于扩展和添加例如react-thunk。

 从“ redux”导入{createStore}; 
从'./store/combineReducer'导入rootReducer;
  const store = createStore( 
rootReducer,
);
 导出默认存储; 

下一步将是CombineReducer.js的实现。 这将不会变得更加复杂。

 从'./numeric/reducers'导入数字; 
从'redux'导入{CombineReducers};
 导出默认的CombineReducers({ 
数字,
});

我正在从numeric / reduce导入数字reduce现在是空文件,让我们对其进行更改并为我们的reducers.js编写一些代码

 从'./definitions'导入{DECREMENT,INCREMENT}; 
  const defaultState = {计数器:0}; 
  const counter =(state = defaultState,action)=> { 
开关(action.type){
案例增加:
return {... state,counter:state.counter + 1};
案例DECREMENT:
return {... state,counter:state.counter-1};
默认:
返回状态;
}
};
 导出默认计数器; 

如您所见,我将导入的变量用作操作类型。 我更喜欢将动作类型作为const变量 ,它不那么脆弱且不易出错。 通常,我使用定义来命名文件,就像definitions.js一样。

definitions.js

  export const INCREMENT ='数字/ INCREMENT'; 
导出常量DECREMENT ='numeric / DECREMENT';

最后但并非最不重要的是action.js。 这个示例看起来有点过度设计,事实确实如此。 这是一个非常简单的示例,但是有了更大的应用程序,我觉得将所有动作都放在一个地方更容易管理。

 从'./definitions'导入{DECREMENT,INCREMENT}; 
  export const递增计数器=()=>({类型:INCREMENT}) 
export const decrementCounter =()=>({type:DECREMENT})

仅需两个额外的步骤,我将有一个完全工作的react-redux示例。 首先让我们重写App.js

 导入'./App.css'; 
从'react'导入React;
从'./store/numeric/actions'导入{decrementCounter,crementCounter}
从'react-redux'导入{connect}
  const App =(道具)=>( 





COUNTER:{props.counter}

  const mapStateToProps =(状态)=> { 
返回{
计数器:state.numeric.counter
}
}
  const mapDispatchToProps =(dispatch)=> { 
返回{
inc:()=> dispatch(incrementCounter()),
dec:()=> dispatch(decrementCounter()),
}
}
 导出默认的connect(mapStateToProps,mapDispatchToProps)(App); 

让我们用react-redux提供程序包装我们的应用程序。

 从“ react-redux”导入{提供者}; 
从“ ./store”导入商店;
...
...
ReactDOM.render( ,document.getElementById('root'));

最后,它看起来应该类似于此屏幕截图。

现在,我们可以测试Redux的正常工作了。

React-i18next

首先,让我们停止服务器并安装必要的依赖项

  npm install i18next i18next-浏览器-languagedetector react-i18next 

现在,我们可以再次运行服务器。 使用i18next进行国际化非常容易设置。 与前面的示例一样,让我们​​开始创建文件夹结构

  mkdir src / store / i18n / src / translations 
触摸 src / i18n.js src / translations / en.js src / translations / pl.js src / translations / index.js src / store / i18n / reducers.js
 
src /
商店/
i18n /
Reducer.js
翻译/
zh.js
index.js
pl.js
i18n.js

首先让我们编写一个i18n reducers.js 公平地说,它是从i18next或react-i18next存储库中复制粘贴的,不幸的是,我现在找不到它,但请相信我,它是有效的示例😉

  const reduxI18nState = { 
lang:'en',
翻译:{},
forceRefresh:否,
};
  const i18n = function i18nState(state = reduxI18nState,action){ 
开关(action.type){
情况“ REDUX_I18N_SET_LANGUAGE”:
返回{... state,lang:action.lang};
情况“ REDUX_I18N_SET_TRANSLATIONS”:
返回{...状态,翻译:action.translations};
情况'REDUX_I18N_SET_FORCE_REFRESH':
return {... state,forceRefresh:action.force};
默认:
返回状态;
}
};
 导出默认的i18n; 

现在,我们可以处理翻译目录:

index.js

 从'./en'导入en; 
从'./pl'导入pl;
 出口{pl,en}; 

pl.jsen.js看起来相同。 任何其他语言文件将看起来相同。

 导出默认值{ 
翻译:{
Counter:' Counter '//或' Licznik '
}
};

现在让我们创建i18n.js。 这个配置文件很容易理解。 最重要的是资源反应。 第一个显示i18next在哪里可以找到我们的翻译资源,第二个可以在这里找到更多

 从“ ./translations”导入{zh,pl}; 
从“ i18next-browser-languagedetector”导入LanguageDetector;
从'i18next'导入i18n;
  i18n.use(LanguageDetector).init({ 
资源:{zh,pl,},
fallbackLng:“ en”,
调试:process.env.NODE_ENV ==='开发',
ns:['翻译'],
defaultNS:“翻译”,
keySeparator:否,
插值:{
escapeValue:否,
formatSeparator:',',
},
反应:{等待:是,},
});
 导出默认的i18n; 

将以下I18nextProvider导入添加到index.js,并用它包装我们的组件。

 从'react-i18next'导入{I18nextProvider}; 
从'./i18n'导入i18n;
  ... 



...

就是这样,现在我们有了一个可以正常工作的示例,让我们在App.js组件上对其进行测试。 我们必须导入withNamespaces HOC。 如您所见,我们只用withNamespace()包装我们的应用程序,我们可以另外在括号中添加'translation' ,但是,因为在i18n.js中,我们设置了'translations' 默认情况下,我们不需要。 用HOC包装我们的组件可提供一个i18n道具。 有关这些道具的更多信息,请点击此处。

 从'react-i18next'导入{withNamespaces}; 
  ... 
  




{props.t('Counter')}:{props.num}
...
 导出默认连接 
mapStateToProps,
mapDispatchToProps
)(withNamespaces()(App));

现在,我们在实践中有了i18next的全功能示例。

反应路由器

我认为,我无法比ReactRouterTraining网站更好地解释它,这是我见过的最好的网站启动方法之一。 这是一个链接。

更漂亮

没必要,但是一旦尝试过,没有它就无法生存。 让我们创建一个更漂亮的简单配置文件。 在主目录中创建.prettierrc并将此示例配置粘贴到其中:

  触摸 .prettierrc 
  { 
“ jsxBracketSameLine”:是的,
“ printWidth”:100,
“ singleQuote”:是的,
“ trailingComma”:“全部”
}

现在,很少有选择,以及如何使用它。 就个人而言,我一直使用第一个选项:

1.使用IDE扩展(我将以VSCode为例),
2.将package和command添加到package.json
3.使用名为husky的软件包,并创建更漂亮的git-hooks。

对我来说,第一个选择是最好的,因为不需要安装任何软件包。 第二个和第三个选项需要它。 我只会向您展示第一个和第二个选项。 如果您想深入了解第三个选项,请在此处链接。

  1. 让我们安装名为Prettier – Code formatter的VSCode扩展。 在VSCode扩展选项卡中搜索它。

如您所见,VSCode内有很多用于Prettier的扩展。 我们将坚持最流行的第一个。 安装它并重新加载IDE。

现在,您在VSCode中有了更漂亮的工作。 我建议稍微更改设置。

转到设置页面[Ctrl +,],

在“设置”中,让我们搜索更漂亮的配置。

我希望漂亮的设备只能在明确配置它的项目内部工作。 如果您选中此第一个设置,那么如果您的项目中没有.prettierrc ,它将不会格式化代码。

2.如果您还是喜欢旧样式。 您可以使用以下命令安装更漂亮的CLI:

  npm install --save-dev --save-exact更漂亮 

然后将脚本添加到您的package.json中的 scripts部分:

  “ prettier”:“更漂亮--write'src / ** / *。js'” 

现在,每次您调用npm run prettier您的代码都会被格式化。

希望本文对配置所有这些额外模块的新手有所帮助。 如果发现任何错误,请在评论中让我知道。