DEV Community

Nino Filiu
Nino Filiu

Posted on

Stack Overflow Framework Boilerplates

I've been on Stack Overflow for years and the main issue that people face is the difficulty to write a minimal, reproducible examples. That's the most essential part of the question, but it has been increasingly difficult in recent years to do so.

You see, the "snippet" feature of Stack Overflow only allows for one html block, one js block, one css block, and a few tweaks. That's awesome to ask "vanilla JS" questions, but not really suited for asking questions regarding web frameworks, which is the case for almost all web-related questions.

It's thus quite difficult to build a working framework snippet, but not impossible! This article is an attempt at resolving this issue by presenting boilerplate code you can simply copy-paste in your question.

Contributions appreciated!

Vue

<script> elements can be included by changing No VueJS to VueJS 2.5.17

Simple example

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
Vue.config.productionTip = false;
const App = new Vue({
  el: '#root',
  template: '<div>Hello World!</div>',
});
Enter fullscreen mode Exit fullscreen mode

With components

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
Vue.config.productionTip = false;

const Hello = {
  name: 'Hello',
  props: ['name'],
  template: '<div>Hello {{ name }}!</div>',
};

const App = new Vue({
  el: '#root',
  components: { Hello },
  template: '<Hello name="Alice"/>',
});
Enter fullscreen mode Exit fullscreen mode

React

<script> elements can be included by changing No ReactJS to React 16.6.3

Check the Use BabelJS / ES2015 for these

With functional components

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
const App = () => (<div>Hello world!</div>);
ReactDOM.render(<App/>, document.querySelector('#root'));
Enter fullscreen mode Exit fullscreen mode

With functional components and props

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
const Hello = ({ name, age }) => (
  <div>
    Hello my name is {name} and I am {age} years old!
  </div>
);

ReactDOM.render(
  <Hello name="Alice" age={23} />,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

With class components

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
class App extends React.Component {
  render() {
    return (
        <div>Hello world!</div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#root'));
Enter fullscreen mode Exit fullscreen mode

With class components and props

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode
class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello my name is {this.props.name} and I am {this.props.age} years old!
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="Alice" age={23} />,
  document.getElementById("root")
);
Enter fullscreen mode Exit fullscreen mode

AngularJS

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="foodApp">
  <ul ng-controller="FoodController">
    <li ng-repeat="fruit in fruits">
      {{ fruit }}
    </li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode
angular
  .module('foodApp', [])
  .controller('FoodController', ($scope) => {
    $scope.fruits = ['apple', 'banana', 'coconut'];
  });
Enter fullscreen mode Exit fullscreen mode

Angular

I found this stackblitz and other Angular demos out there but I couldn't find a way to port any of them to a Stack Overflow snippet :/

Svelte

Since Svelte is a compiler rather than a library I don't think a svelte snippet can be done, but Svelte is great and I'd love someone to prove me wrong in the comments!

Top comments (1)

Collapse
 
bravemaster619 profile image
bravemaster619

This is really helpful for SO newbies. I've created a React snippet template in MSO too.