Django vs React

my first hands-on experience landed like a sack of bricks.

Developing apps with frameworks. Yes! This is what I've been waiting for.

Today is the start of Week 3 and while I know the foundational material we've been covering is critical -- and it has been helpful and rewarding (esp. the pair programming) -- I feel like we're just now getting into what I signed up for.

Well after hearing so much about how great React is as a framework - it's intuitive and flexible, and I think our learning materials called it 'fun', and it'll make you breakfast in bed and so on, well, my first hands-on experience landed like a sack of bricks.

My app-building experience to date comes from learning and using Django, a MVC web-building framework for Python. Django felt intuitive. Now maybe I'm looking back on it through a time-distorted lens. Maybe I only remember the good times, when code was flying, my apps were growing, and I'm forgetting the growing pains.

What's more, I'm not sure what I like about Python is directly comparable to what I find disorienting about React. I don't know React enough to say, and I may be comparing apples to french fries.

But here's what I've seen on the front end from each. Take this with a grain of salt, I'm only a few hours deep with React.

React works like this.

Take a component that you want to build (like a grocery list). Populate it with data (bananas, etc), and wrap it up in some html-like syntax.

First we have to create those grocery items (here they bold themselves when they're hovered over):

class GroceryListItem extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      done: false
    };
  }

  onListItemClick() {
    this.setState({
      done: !this.state.done
    });
  }

  render() {
    var style = {
      fontWeight: this.state.done ? 'bold' : 'none'
    };

    return (
      <li style={style} onMouseOver={this.onListItemClick.bind(this)}>{this.props.item}</li>
    );
  }

Not cute.

Okay, back to our list. It might look like this:

var GroceryList = (props) => (
  <ul>
    {props.items.map(item =>
      <GroceryListItem item={item} />
    )}
  </ul>
);

Map iterates over our items and generates those list elements complete with our grocery items.

Wait, first, let's get those items, and attach our grocery list to our html document (in the #app div):

var App = () => (
  <div>
    <GroceryList items={['Cereal', 'Broccoli', 'Olive Oil']}/>
  </div>
);

ReactDOM.render(<App />, document.getElementById("app"));

React has props, states, and other lingo that makes sense when I'm reading it, but somehow clears itself from my memory when I move to the next section of the docs.

There's a lot to learn to implement the front-end.

---

Django, I think, makes it more intuitive. Its front-end framework has you essentially writing normal html code, in an html document (a template) with some pythonic logic embedded.

The above code might look something like this in a Django template:

<div id='app'>
  <ul>
    {% for item in groceries %}
      <li> item </li>
    {% endfor %}
  </ul>
</div>

This just looks like html and makes it easy to visualize and understand the structure. Not appending things to other things, but nesting elements as they will be in our rendered template.

Alright, I'm leaving out a lot. What's 'groceries' and where does it come from? Well it comes from the model. But we're not talking about the rest of the framework, I'm talking about how data is presented.

Loops, conditional statements, formatting options, those are all available and stackable/nestable/etc within the html page itself. It feels like writing python. It feels intuitive.

Learning is fun - but it's not fun when you're stubborn. And I feel like I'm stubbornly clinging to another way of doing something - the Django way. I'm going to embrace React and hope that over time, and with repetition, it becomes as intuitive to me as Django is.