Jsx (React) Dosyalarını Js’ye Windows ortamında Dönüştürmenin İki Yolu

Jsx, React ile birlikte hayatımıza giren, daha doğrusu benim haberdar olduğum bir olgu.

Jsx, xml’e benzeyen bir yapısı olan, javascript üzerine yazılmış bir eklenti.

Bir node.js projesi üzerinde çalışırken, jsx dosyalarını dönüştürme ihtiyacı duyabiliriz. Daha doğrusu, bir web sayfasında jsx dosyasını doğrudan kullanamayız. Bu dosyayı javascript dosyasına dönüştürmemiz gerekir.

Örneğin bir uygulama geliştirdiğimizi düşünelim. C:\myapp dizini içerisinde bir uygulamamız var.

C:\myapp\app\components\ dizinin içerisinde de app.jsx dosyasını oluşturduk:

ReactDOM.render(
  <h2>Merhaba Dünya</h2>,
  document.getElementById('example')
);

Bu dosyayı dönüştürmek için react-tools kütüphanesini kullanabiliriz.

npm install react-tools --save-dev

Kurduktan sonra komut satırından:

C:\myapp>node node_modules/react-tools/bin/jsx -x jsx app/components build/components

Komutunu çağırınca, c:\myapp\build\components dizini içerisinde app.js dosyasını oluşturacaktır.

Diğer yöntem, babel/webpack kullanarak yapılacak dönüştürme.

Öncelikle webpack.config.js dosyamızı oluşturuyoruz:

var path = require("path");
module.exports = {
  entry: './app/components/app.jsx',
  output: {
    path: path.resolve(__dirname, "public"),
    publicPath: "/javascripts",
    filename: "build/components/app.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  }
}

Webpack’in çalışması için gerekli paketler, npm install ile ortama yüklenir.

c:\myapp>npm install --save-dev babel-core
c:\myapp>npm install --save-dev babel-loader
c:\myapp>npm install --save-dev babel-preset-es2015
c:\myapp>npm install --save-dev babel-preset-react
c:\myapp>npm install --save-dev webpack

Sırayla bu kurulumlar yapıldıktan sonra:

c:\myapp>webpack

komutunu çalıştırırsak, app.js dosyasının başarılı bir şekilde oluştuğu görülür.

Yorum bırakın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top