From be354580d02620706275435143e85c2d11581737 Mon Sep 17 00:00:00 2001
From: Alice Poggioli <alice.poggioli@paca.happy-dev.fr>
Date: Wed, 2 Sep 2020 14:47:02 +0200
Subject: [PATCH] update get started
---
.../How-to-make-components.rst | 59 +++++++++++--------
1 file changed, 36 insertions(+), 23 deletions(-)
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index d8eaacd..7bebb2b 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -2,38 +2,38 @@ How to create components
######################
.. note::
- When you should create a component
- =================================
- A component is a feature
- -----------------------
+ **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.**
+ *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
+ **Example with a FAQ component**
---------------------------
- For instance, implementing a collaborative FAQ could be done with few 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.
+ 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 resources for collaboration within and between organizations.**
+ *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 :
+ **Other example :**
---------------
* An interactive map
* An agenda
- * A job broad
+ * A job board
* A skill directory
Let's start
=============
-As we told you, if you are familiart with React or VusJS, learning SiB will be easy for you :)
+As we told you, if you are friendly with React or Vue.JS, learning SiB will be easy for you :)
Requirements
-------------
@@ -53,19 +53,19 @@ To update your npm version :
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.
-For the more studious, who would like to revise their JavaScript, we recommend `this reading <https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript>`__.
+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 <https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript>`__ to get you back on track with JS.
Steps
-----
-In a first time we are going to set up a local development environment.
+Let's set up a local development environment for a FAQ component as example.
-**1**. Create a folder named "Solid-ComponentName"
+**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 in the folder and type those following commands:
+**2**. Open a terminal, go to your folder and type those following commands:
.. code:: bash
@@ -75,7 +75,7 @@ In a first time we are going to set up a local development environment.
#Install a server in a developpement environement
npm i -D http-server
-Then, At the root of your project creat an index.html file.
+Then, at the root of your project create an index.html file.
**3**. Make an npm command available to launch your server
@@ -90,7 +90,7 @@ Your `package.json` should look like this :
.. code:: json
{
- "name": "Your Component Name",
+ "name": "Solid FAQ",
"version": "1.0.0",
"description": "",
"main": "index.js",
@@ -106,21 +106,34 @@ Your `package.json` should look like this :
}
}
-**4**. Create your a file `solid-componentName.js` which will welcome your component.
+**4**. Start your component
-Now you are ready to start the development of 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
=============================
-We've create a template to make component development easier named "SiBTemplateElement".
+Easy method with SiBTemplateElement
+-----------------------------------
+"SiBTemplateElement" is a template we've created to make component development easier.
If you are new in SiB, we recommand you to start with it.
- **EASY WAY** => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
+ **EASY Method** => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
- **MORE COMPLEX WAY** => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__
+Advanced method
+-----------------
+This method wil lallow you to use mixins from the framework in your component.
+.. note::
+ If you want to learn more about mixins we recommend you `this introduction <https://javascript.info/mixins>`__.
.. warning::
The **MORE COMPLEX WAY** is not available yet. It's comming, stay tuned !
+
+ **MORE COMPLEX WAY** => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__
+
+
+
--
GitLab