Hello! What can you find here?

Several frontend and backend tutorials which (in my opinion) are the basics for the corresponding topic. Look in the main menu for all the available topics.

Planned topics

  • SASS/SCSS – CSS-Preprocessor
  • JS Frontend-Frameworks (VueJS, React)
  • Webpack
  • Docker

Newest posts

React Library Example with multiple components

In the previous example you have seen how react basically works. In this example you will see how react works with multiple components. index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>App Layout Demo</title> </head> <body> <div id=”root”></div> <script src=”https://unpkg.com/react/umd/react.development.js”></script> <script src=”https://unpkg.com/react-dom/umd/react-dom.development.js”></script> <script src=”https://unpkg.com/babel-standalone”></script> <script src=”Hello.js” type=”text/jsx”></script> <script src=”NumPicker.js” type=”text/jsx”></script> <script src=”index.js” type=”text/jsx”></script> </body> </html> Hello.js class…

Continue Reading React Library Example with multiple components

Simple React Library Example

React can be used on your website by just adding some JS files from a CDN without having to setup a local Node.js instance. Files index.html <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <title>First Component</title> </head> <body> <div id=”root”></div> <script src=”https://unpkg.com/react/umd/react.development.js”></script> <script src=”https://unpkg.com/react-dom/umd/react-dom.development.js”></script> <script src=”https://unpkg.com/babel-standalone”></script> <script src=”index.js” type=”text/jsx”></script> </body> </html> As you can see the index.html doesn’t…

Continue Reading Simple React Library Example

JS Frontend Libraries & Frameworks

Library vs Framework First lets explain the difference between a “Library” and a “Framework”. Libraries are mostly “small” code bundles which allow the developer to extend the functionality of an already present application.Examples for libraries are Moment.js, jQuery or Data-Driven Documents. Frameworks are most of the time “bigger” and usually provide a distinct structure how data should be handled or saved. Frameworks often provide…

Continue Reading JS Frontend Libraries & Frameworks

Virtual DOM and JSX

Virtual DOM One main reason behind JS Web-Frameworks is the “virtual DOM”. But what is the Virtual DOM and why is it better then the “original DOM”? Each change in the “original DOM” triggers a “redraw” of the whole DOM in the browser which can be (dependent on your DOM) very resource intensive. Changes in the “virtual DOM” happen only at the level of…

Continue Reading Virtual DOM and JSX