Apallax.js

Tutorial

To create a website with Apallax.js you need to do the following steps:
1. Create a new folder for your project.
2. Create a file named index.html and give the body tag the ID apallax-root in your project.
3. Create a folder in your project named components.
4. Create a file named app.js in components.
5. Import the app.js file in index.html with:


                                <script type="module"
                                src="./components/app.js"></script>

6. Add the following code to your app.js file:


                                import { Apallax } from
                                'https://cdn.jsdelivr.net/npm/apallax.js@latest/apallax.js';
                                

                                import { Component } from
                                'https://cdn.jsdelivr.net/npm/apallax.js@latest/component.js';

7. Create for all your components a seperate JavaScript file in the components folder with the following code:


                                import { Component } from
                                'https://cdn.jsdelivr.net/npm/apallax.js@latest/component.js';
                                


                                export class NAME_OF_COMPONENT extends Component
                                {
                                

                                   render() { 

                                      return
                                `HTML_CODE`;
                                

                                   } 

                                }

7.1 To add a property to a component you only need to write


                                ${this.props.NAME}

at the position where you want the property to be.

8. Import all of your components seperate in app.js file with the following code:


                                import { NAME_OF_COMPONENT } from
                                './FILE_NAME.js'; 

                                Apallax.addComponent('NAME_OF_COMPONENT',
                                NAME_OF_COMPONENT);

9. Create an App component in app.js file with the following code:


                                class App extends Component { 

                                   render() { 

                                      
                                return `HTML_CODE`; 

                                   } 

                                }

9.1 You can use a component in App component with:


                                ${Apallax.component('NAME_OF_COMPONENT', {
                                PROPERTIES })}

9.2 You can define properties in a component with:


                                ${Apallax.component('NAME_OF_COMPONENT', {
                                PROPERTY_NAME: 'PROPERTY_CONTENT',
                                PROPERTY_NAME: 'PROPERTY_CONTENT' })}

10. Add your App component with:


                                Apallax.addComponent('App', App);

11. Render the App component with:


                                Apallax.render('App', null, null,
                                'apallax-root');

12 . Be happy with your Apallax.js website! 😀😀😀

Give your code power

Features

Tutorial

Websites built with Apallax.js

Matthias' Film Empfehlungen

Super Kochen