Stack Overflow Framework Boilerplates
Tags: javascript, tutorial, vue, react
Published: 2021-03-04 11:24:53

I've been on Stack Overflow [for years](https://stackoverflow.com/users/8186898/nino-filiu) and the main issue that people face is the difficulty to write a [minimal, reproducible examples](https://stackoverflow.com/help/minimal-reproducible-example). 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](#vue)
  - [Simple example](#simple-example)
  - [With components](#with-components)
- [React](#react)
  - [With functional components](#with-functional-components)
  - [With functional components and props](#with-functional-components-and-props)
  - [With class components](#with-class-components)
  - [With class components and props](#with-class-components-and-props)
- [AngularJS](#angularjs)
- [Angular](#angular)
- [Svelte](#svelte)

## Vue

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

### Simple example

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

### With components

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>
```
```js
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"/>',
});
```

## 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

```html
<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>
```
```js
const App = () => (<div>Hello world!</div>);
ReactDOM.render(<App/>, document.querySelector('#root'));
```

### With functional components and props


```html
<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>
```
```js
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")
);
```

### With class components

```html
<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>
```
```js
class App extends React.Component {
  render() {
    return (
    	<div>Hello world!</div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#root'));
```

### With class components and props

```html
<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>
```
```js
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")
);
```

## AngularJS

```html
<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>
```
```js
angular
  .module('foodApp', [])
  .controller('FoodController', ($scope) => {
    $scope.fruits = ['apple', 'banana', 'coconut'];
  });
```

## Angular

I found [this stackblitz](https://stackblitz.com/edit/angular) 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!