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.