最好的实践方式就是看官方文档～～ 但为了大家更方便的开发，废话不多说，上干货！！！

create-react-app

 直接yarn create react-app <name> -- template typescript， 创建一个以name为项目名的最新版本的react脚手架项目,语言使用typescript。(笔者此时react版本18.0.0)

react

 react@18.0.0修改了reactDom.render方法,应该使用下面方式。

import {createRoot} from 'react-dom/client';
import Root from './routers/index';
const container = document.querySelector('#root');
const root = createRoot(container!)
root.render(
    <Root />
) 

craco

 使用yarn add craco安装craco，这个插件可以使项目不eject就可以自定义webpack配置; 在root目录下新建craco.config.js文件

module.exports = {
};

antd

 使用yarn add antd安装antd; 使用yarn add craco-antd安装craco-antd插件使antd可以按需引入css，在craco.config.js中如下写入：

const CracoAntdPlugin = require('craco-antd');
// 截止目前由于内部依赖的版本问题会报错，如果使用的是最新版本的create-react-app项目,
// 可以先安装@mrbatman/craco-antd替代，该库修复了报错的问题。（来自于官方的issues）
const CracoAntdPlugin = require('@mrbatman/craco-antd');
module.exports = {
  plugins: [
    {
      plugin: CracoAntdPlugin,
    },
  ],
};

cz

 使用npm install -g commitizen全局安装commitizen
 在项目中执行commitizen init cz-conventional-changelog --save --save-exact初始化cz-conventional-changelog适配器。
如果当前已经有其他适配器被使用，则会报以下错误，此时可以加上--force选项进行再次初始化

standred-version

 使用yarn add standred-version安装standred-version。执行standred-version可以自动根据cz的提交，生成changelog，并更新版本号。