Acshb-react-common-next NPM

acshb-react

Bu proje Create React App pakedi ile oluşturulmuştur.(https://github.com/facebook/create-react-app).

Proje Klasör Yapısı

public/ -favicon.ico -index.html -manifest.json src/ actions/ assets/ components/ fonts/ layouts/ local/ routes/ reducers/ styles/ services/ views/ utils/ -App.js -index.js -serviceWorker.js .gitignore package.json README.md

Projede kullanılan paketler

-animate.css
-bootstrap
-react-toastr
-moment
-node-sass
-react-bootstrap-table-next
-redux
-axios
-echarts
-echarts-for-react
-react-cookie
-react-helmet
-react-redux
-react-router
-react-router-dom
-react-scripts
-react-toastify
-react-toggle-button
-react-tooltip
-react-widgets
-react-widgets-moment
-react-bootstrap-table2-paginator
-react-bootstrap-table2-toolkit
-react-bootstrap-table2-overlay

Projede Kullanılan Geliştirici Paketleri

-eslint
-storybook

Bazı Komutlar

Projede bu komutları çalıştırarak;

`npm start`

Uygulamayı geliştirici modunda çalıştırır. http://localhost:3000 adresine giderek uygulamayı görebilirsiniz.

Projede değişiklik yaptığınızda değişiklik, gerçek zamanlı olarak yansıyacaktır. Bir hata oluştuğunda commanline aracılığı ile hataları görebilirsiniz.

`npm test`

Uygulamadaki testleri çalıştırır ve commandline aracı ile test sonuçlarını ekrana yazdırır.

`npm run build`

Uygulamanın derkenmiş halini build klasörüne çıkartır.

Komut çıktı olarak tüm javascript ve css dosylarını sıkıştıracak, küçültecek ve asset dosyalarının isimlerini hash edecektir. İşlem bittikten sonra ilgili klasöre giderek deployment işlemi yapılabilir!

Daha fazla bilgi için deployment sayfasına bakılabilir.

Bu Projeyi Paket olarak Kullanmak İçin

create-react-app olarak oluşturulan projeyi, "npm eject" ile webpack projesine çevirdikten sonra sırası ile, "npm i @babel/preset-env -D", "npm i @babel/preset-react -D", "npm i @babel/plugin-transform-react-jsx -D", "npm i @babel/plugin-syntax-dynamic-import -D" komutları çalıştırılarak babel plugin' leri kurulur.

Daha sonra .babelrc config dosyası oluşturularak,

{ "presets": "@babel/preset-env", "@babel/preset-react", "plugins": "@babel/plugin-transform-react-jsx", "@babel/plugin-syntax-dynamic-import" }

komutları eklenir.

Data sonra webpack.config dosyasına plugins içerisine

{ test: /.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, path.resolve(paths.appNodeModules, "acshb-react-common/src"), loader: require.resolve('babel-loader'), options: {

plugins: [
  [require.resolve("@babel/plugin-syntax-dynamic-import")],
  [require.resolve("@babel/plugin-transform-react-jsx")],
  [
    require.resolve('babel-plugin-named-asset-import'),
    {
      loaderMap: {
        svg: {
          ReactComponent:
            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
        },
      },
    },
  ],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,

}, }

komutları eklenir.

Daha Fazlası İçin

Daha fazla bilgi için Create React App documentation sayfasına bakılabilir.