How to create components

Note

When you should create a component

A component is a feature

A component is an application service that can be re-used by multiple organizations. You can think about it as an atomic functionality that can be picked and added by people with no technical skills.

Developers often build components in order to avoid repeating the same piece of code in multiple places. As a developer, why should you make a component when you can have the same functionality with the same amount of code?

Because you don’t create a component for your technical needs but for the needs of organizations. Our components are high level components. That is to say that it is close to the human understanding of a functionality.

Developing with Startin’Blox is an opportunity to shift your perspective regarding who you program for. Instead of thinking just about your own requirements, you’re invited to deliver features useful to both your own project and a much broader ecosystem of organizations.

Example with a FAQ component For instance, implementing a collaborative FAQ could be done with little code. Encapsulating them within an FAQ component wouldn’t make your code more concise. But it permit you to share the idea of a FAQ as a tool of onboarding or knowledge management.

With components, you share more than code, you share tools for collaboration within and between organizations.

So, when you develop a new feature, think about who could use it. If it can be useful to others and there’s no similar component already available, make a component so that your work will be easily accessed and used by many!

Other example : * An interactive map * An agenda * A job board * A skill directory

Let’s start

As we told you, if you are friendly with React or Vue.JS, learning SiB will be easy for you :)

Requirements

Be sur you have at least the version 6.14.5 of npm with :

npm -v

To update your npm version :

npm install -g npm@latest

Warning

You may need to prefix these commands with sudo, especially on Linux, or OS X if you installed Node using its default installer.

We will assume that you are at least comfortable with HTML, CSS and JavaScript. However, you don’t really need to be an expert. We recommend this good guide to get you back on track with JS.

Steps

Let’s set up a local development environment for a FAQ component as example.

1. Create a folder named “solid-faq”

Note

By convention, we prefix Startin’blox components with “solid”. Example: solid-faq, solid-agenda, solid-map..

2. Open a terminal, go to your folder and type the following commands:

# Init a npm management
npm init -y

# Install a server in a developpement environement
npm i -D http-server

Then, at the root of your project create an index.html file.

3. Make an npm command available to launch your server

Go to your package.json and replace the ‘test’ script by the following :

"serve": "http-server"

Your package.json should look like this :

{
    "name": "solid-faq",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "serve": "http-server"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {},
    "devDependencies": {
        "http-server": "^0.12.3"
    }
}

4. Start your component

Let’s create the main JS file for your component named solid-faq.js.

Now you are ready to start :)

Choose the best method for you

Easy method with SolidTemplateElement

“SolidTemplateElement” is a template we’ve created to make component development easier.

If you are new in SiB, we recommand you to start with it.

Advanced method

This method will allow you to use mixins from the framework in your component.

Note

If you want to learn more about mixins we recommend you this introduction.

Warning

The MORE COMPLEX WAY is not available yet. It’s comming, stay tuned !

MORE COMPLEX WAY => Developing component without SolidTemplateElement