In this repo, you will find examples on how to create a web site with reusable building blocks (aka components). When learning about React and components, I started thinking about how this could be done without using React, ES 2016, Webpack or any other framework out there. Is that even possible?
I want to understand the problems that are solved using React, ES 201x, Webpack & friends. I guess one way is to experience it the hard way - to feel the pain - by writing code with plain old vanilla JavaScript, html and css.
The source code in the main branch of this repo is written with Old School vanilla JavaScript, without any frameworks, without a build system and without a transpiler.
There is also a blog post related to this repo: http://davidvujic.blogspot.se/2017/01/you-might-not-need-a-javascript-library.html
The listItem.js component
vanilla.listItem = (function (templates) {
function render(props, done) {
// load the html using a template helper
templates.load('/src/listItem/listItem.html', function (el) {
// set data
el.textContent = props.data;
el.addEventListener('click', props.onClick);
if (done) {
// pass the node to be rendered to the DOM
done(el);
}
});
}
return {
render: render
};
}(templates));The listItem.html template
<li class="listItem" title="the listItem component"></li>https://davidvujic.github.io/vanillajs-components/
Clone this repo and start experimenting! To browse the example web page, run these commands:
npm install
npm start
When switching between the branches (see below), you might need to run the npm install command again (because of the different dependencies used).
To step by step add tools & frameworks, that will solve current issues and improve the quality & readability of the code base.
Something like this (each one in a separate branch):