map di React

class RobotItems extends React.Component {
  render() {
    const topics = ["React", "JSX", "JavaScript", "Programming"];
    return (
      <div>
        <h3>Topics I am interested in</h3>
        <ul>
          {topics.map(top => <li>{top}</li>)}
        </ul>
      </div>
    );
  }
}

Available propTypes in ReactJS

Here is the available prop types that can be used in react :

For detail info about props, please see reusable-component document in official react site

Dasar State ReactJS - Part II

Sebelumnya kita maen dengan state... Di sini dikasih liad metode sederhana lain yang bisa diaplikasikan ke state kyk gini :

Naaah... hasilnya tetep sama dengan dipostingan sebelumnya... :)

Terusss... klu bentuknya udah kyk di atas... kita bisa jadiin kyk gini :

Hasilnya :

Dasar State di ReactJs

Di postingan sebelumnya kita udah belajar tentang property. Nah sekarang kita lnjutin ke state. State itu ampir sama kyk property, cuman state bisa berubah. Cara akses state jg ampir sama kyk property, kita tinggal pake "this.state.nama_state", yaaaps.. mirip sm property kaaan... :D
Okiee.. Let's jump to the code...
Pertama-tama kita bikin contructor di App.js :

Di constructor itu kita bikin 2 biji state {hisoka_state & poipo} cuman yang dipake sebenarnya cuma satu ajjah aahaha.... Tapi klu mo bikin 2 caranya seperti itu ajjah, tinggal dikasih koma.. :v
Terus kita bikin satu biji fungsi.... mmm... kasih nama hisoka_update kyk gini :

Naah.. di dalam hisoka_update ini state2 yang dibuat sebelumny akan diupdate... terus terakhir kita tambain ke return kyk gini :

Hasilnya :

Properties di ReactJS

Di postingan sebelumnya, kita udah bikin hellow2 di ReactJS. Naah disini akan dilanjutin ke properties. Klu mo nambain properties di React, kita nambainya di bagian ReactDom.Render seperti ini :

Terus klu mo diakses :

Hasilnya kyk gini :

Cara lain yang bisa dipake seperti ini :

Hasilnya sama ajjah...

Terus klu misalkan propertiesnya ada 2 biji...

Teruuus... Klu misalkan sy punya beberapa biji render App {App.js-nya g' diubah2 }kyk gini :

Hasilnya :

Next..... Tentang tipe tipe properti...

Naaah... di propTypes kita ngebuat tiga biji properties, tapi cuma dua yang dipake yaitu test dan hisoka. Property yang poiponya g' dipake. Itu bisa dikasih .isRequired biar selalu dikasih nilai oleh user kyk gini :

Eeeh... misalin g' ada nilainya dulu... tar kita dapat warning di console browsernya seperti ini :

Sooo... kita ngasih nilai buat poipo seperti ini :

Terusss... Beralih ke defaultProps. defaultProps ini tuuh... klu misalkan propsnya g' diinisialisasi, jadinya nilai ini yang dipake... Contohnya seperti ini :

Naaah... kita ngasih default ke test sm hisoka. Terus misalkan yang test g' usah dikasih nilai kyk gini :

Naah..props "test" g' dikasih nilai, berarti dia tar pake default value seperti ini :

Sip sip... Seperti ini ajjah untuk yang Properties di ReactJS... :)

Variasi Hellow Hellow di ReactJS

Di postingan sebelumnya.. kita udah ngesetting environment buat windows 7, terus udah ngeliad jg salah satu cara ngebuat hellow world. Nah sebenernya ada beberap cara lain yg bisa dipake kyk gini :

Hasilnya kek gini :

Terus kita juga bisa pke stateless function component kyk gini :

Hasilnya seperti ini :

Naaah.. klu kita liad, disini selalu di return 1 tag html ajjah, div, h1, h2, atau yang lainnya... klu kita pengen ngereturn beberapa tag, tinggal ditambain kurung kyk gini :

Hasilnya :

Yaaaaps... segitu dl... :v

Setting Up React Environment Using NPM, Babel, & Webpack in Windows 7

Okaay,,, In this series, we'll gonna play with react in windows 7. The first thing to do is preparing the windows 7 environment.... {I'm assuming that your windows already installed the node.js and I'm using sublime here}
1. Create a new folder for our react code, then open cmd promp there...

2. Type "npm init" and put some info if you want.. :) or you just can use default setting from npm by using "npm init --yes",

npm init is actually a basic configuration for our react environment, so our folder will contain a package.json as shown below :

3. Type "npm i react --save-dev ", this will gonna install/get react library : {i is an alias for "install"}

After finishing this command we will gonna see a node_modules in our directory with bunch of folder inside of it. this node_modules is the main directory for all of our react,babel, webpack package. And also we put --save-dev flag on our command above. That flag is a way to save our package devDependency to package.json.

4. Actually, we can install some packages in just one command like this :
"npm i webpack webpack-dev-server --save-dev". So we are going to install webpack and webpack-dev-server...

5. Okiee,, this is the last command that we need to execute, it's a long one.. :D, this is going to take a while because we are going to install many packages (react-dom, babel, babel-loader, etc)
"npm i react-dom babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev" :

btw... There is a flag called "-g", this flag is going make our package run globally. I actually avoid to use -g, because it might mess up with another project package in my windows 7 directory because of different package version. Soo ummm... all packages that we installed here are running locally just for our work directory. Aaand.... You don't have to worry if you install those packages not in order, just make sure that all packages are installed.. :)

6. Create some new files, webpack.config.js, App.js, main.js, & index.html..

7. Let's work on index.html first, put this code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Setup React in Windows 7 </title>
</head>
<body>
<div id="app"></div> <!-- our react target -->
<script src="bundle.js"></script> <!-- our bundled file -->
</body>
</html>

So our index.html is looked like this :

btw,,, index.html is our main view, so this page will gonna show up when we run our react project. In this file we put a div with id="app", this div will be used by react to put/show something, like text or another html elements. In the line 9, there is a bundle.js. This bundle.js is generated by react, and this is the power of webpack because every javascript, jquery, or ajax, or another scrypt will be available here. So we don't have to put something like <scrypt>bla bla</scrypt> inside of our html file, because everything already handled by webpack {or may be npm, I don't know :v}
8. Let's work on webpack.config.js, put this code :

var path = require ('path');
var webpack = require ('webpack');

module.exports = {
    entry: './main.js',
    output: {
        path: path.resolve(__dirname),
        filename: 'bundle.js'
    },
    devServer: {
        inline:true,
        port:3333
    },
    module: {
        loaders:[
        {
            test:/\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        }
         ]
    }

}

There are a lot of things here in webpack,...mmmm...... when we run "npm start", main.js file will be called {as shown in line 5}, then bundle.js will be generated {line 6}. As explained before, bundle.js is called in our index.html. Our localhost will gonna run on port 3333 {line 12}, aaand another config for modules eehehhe... :D

9. Let's move to App.js file, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    render()
    {
        return <div>Hellow Hisoka Poipo... ;)</div>
    }
}

export default App

App.js will be called in main.js. As we can see, this App.js will generate our hellow world that will be put to our index.html file. We are using react and react-dom here... :)

10. Let go to main.js, put this code :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'))

This main.js is actually connecting our App.js to index.html using element div with id="app" that we created before in index.html.... :)
So when program is running, webpack is calling main.js and generating bundle.js. main.js is conneting App.js and index.html. Aaand. bundle.js is used by index.html,,, so everything is seemed connected... :)

Last thing, let's put "start" command in package.json, so npm knows what "start" is ...

11. Put new scripts in package.json : "start": "webpack-dev-server",

Yuuupsss... DOneeee... Let's run our first reat project by typing "npm start" :

So let's open localhost:3333 as shown in cmd above...

Demo :

Source code is available here :
https://github.com/HyosokaPoipo/learnReactinWindows7

https://bitbucket.org/HyosokaPoipo/learnreactinw7


Go to Part II...

Iseng Liad-Liad REACT Framework.. :v

Coool... :D