Ortam Hazırlığı

Bir kaç farklı yönden ortam kurulumu yapabiliriz ama en fazla kullanılan yöntemleri anlatacağım..

1. Yöntem Hızlı Başlangıç

Official React Consol Aracı

npm install -g create-react-app
create-react-app merhaba-dunya
cd merhaba-dunya
npm start

2. Yöntem Webpack, Babel

//klasör açalım

mkdir merhaba-dunya
cd merhaba-dunya

//npm paketlerimiz için

npm init

//bağımlı olduğumuz kütüphanaler

npm install --save react react-dom

//bağımlı olduğumuz geliştirme kütüphaneleri

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

//webpack aracımız

npm install --save-dev webpack webpack-dev-server

//ardından src,app klasörlerimiz

mkdir src
cd src
echo bombos > index.html


//yine componentlerimize yaşam alanı

mkdir app
cd app
echo bombos > index.js
cd ../..


//npm paketi olarak bir global webpack yukleyelim 

npm install -g webpack

echo bombos > webpack.config.js

//webpack.config.js dosya içeriğimiz

var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR  = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js", 
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;


//ardından package.json komutlarımızı tanımlayalım


....
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --port=6060",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  }
.....

3. Codepen

Eğer sadece pratik yapılacaksa codepen.io kullanabilirsiniz..