How-to-make-components.rst

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 :)