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>
Vue.config.productionTip = false;
const App = new Vue({
el: '#root',
template: '<div>Hello World!</div>',
});
With components
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root"></div>
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
<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>
const App = () => (<div>Hello world!</div>);
ReactDOM.render(<App/>, document.querySelector('#root'));
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>
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
<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>
class App extends React.Component {
render() {
return (
<div>Hello world!</div>
);
}
}
ReactDOM.render(<App/>, document.querySelector('#root'));
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>
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
<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>
angular
.module('foodApp', [])
.controller('FoodController', ($scope) => {
$scope.fruits = ['apple', 'banana', 'coconut'];
});
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)
This is really helpful for SO newbies. I've created a React snippet template in MSO too.