bokuweb / re-bulma

[Deprecated] 💎Bulma components for React
http://bokuweb.github.io/re-bulma/
MIT License
364 stars 66 forks source link

Question: What do you think about using cjsx instead? #83

Closed thecodechef closed 7 years ago

thecodechef commented 7 years ago

I'm just wondering if you would be interested in switching to cjsx

here is your Card Component rewritten in cjsx with few minor details left out:

import React, {Component, PropTypes} from 'react'

export default class Card extends Component

    propTypes = {
      style: PropTypes.object
      children: PropTypes.any
      className: PropTypes.string
      isFullWidth: PropTypes.bool
      isRounded: PropTypes.bool
    }

    defaultProps = {
      style: {}
      className: ''
    }

    createClassName: ->
      return [
        'card'
        @props.isFullWidth ? 'is-fullwidth'
        @props.isRounded ? 'is-rounded'
        @props.className
      ].join(' ').trim()

    render: ->
      <div style={@props.style} className={@createClassName()}>
        {@props.children}
      </div>
capaj commented 7 years ago

to be honest I dislike coffeescript. I think it was a good movement that made a lot of ES6 features, but I don't think coffeescript has it's place today. I do write my own JS without semicolons, but that is as much coffee as I am willing to go. What do you think @bokuweb ? close this ticket or rewrite in coffeescript?

bokuweb commented 7 years ago

I agree with @capaj . CoffeeScript should be replaced by ES2015+ (or typescript).

capaj commented 7 years ago

closing then. Typescript or flow could be a useful additions if we're talking languages that compile to JS.

thecodechef commented 7 years ago

Ok then how about tsx

here is an example of the same component

import React, {Component, Proptypes} from "react";

export interface CardProps { 
  style: PropTypes.object; 
  children: PropTypes.any;
  className: PropTypes.string;
  isFullWidth: PropTypes.bool;
  isRounded: PropTypes.bool; 
}

export interface defaultProps { 
  style: {}; 
  className: '';
  isFullWidth: false;
  isRounded: false; 
}

export class Card extends Component<CardProps, defaultProps> {

    createClassName() {
      return [
        'card',
        this.props.isFullWidth ? 'is-fullwidth' : '',
        this.props.isRounded ? 'is-rounded' : '',
        this.props.isclassName
      ].join(' ').trim();
    }

    render() {
      return (
        <div style={this.props.style} className={this.createClassName()}>
          {this.props.children}
        </div>
      );
    }
}

let me know what you think @bokuweb

bokuweb commented 7 years ago

@thecodechef typescript is good altjs. But, I think ,It is better to use flowtype because, it is developed by facebook and it has React type definition as builtin.