Getting Started Programming with Qt Quick

There is an article on official site which describes how to develop a Qt Quick app, 

http://qt-project.org/doc/qt-5/gettingstartedqml.html#building-a-text-editor
But it's not the real doc for newer, I read through it for a few minutes, still do not know how to begin my first project. Which file should I put my following descriptive language lines into?

Rectangle {
    id: simpleButton
    ...

    MouseArea {
        id: buttonMouseArea

        // Anchor all sides of the mouse area to the rectangle's anchors
        anchors.fill: parent
        // onClicked handles valid mouse button clicks
        onClicked: console.log(buttonLabel.text + " clicked")
    }
}

And how to set up a Qt Quick project? Any thing must be included in this project?
Nothing, the official article only talked about some code snippets. You have to find a way to integrate all these parts by yourself? So, it's article, but not written for new guys.

Then, I tried my way. First, I create a new Qt project using VS 2012 with QT add-on, select QML & Quick options when creating project. This project has some *.ui files, in this kind of *.ui file, I see XML definition, not above JSON style. I am new to QML, but this project obviously is not what I want.

OK. Let's have a try with Qt Creator. Using this IDE, I can create a real Quick project now, just choose Qt Quick Application at the beginning. My project name is called helloworld.
In the main.cpp file,

#include <QtGui/QGuiApplication>
#include "qtquick2applicationviewer.h"
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
QtQuick2ApplicationViewer viewer;
viewer.setMainQmlFile(QStringLiteral("qml/helloworld/main.qml"));
viewer.showExpanded();
return app.exec();
}

QGuiApplication is the main class for QT GUI app. Doc is here:http://qt-project.org/doc/qt-5.0/qtgui/qguiapplication.html#details

QtQuick2ApplicationViewer is generated by project wizard automatically. It inherits from QQuickView, we do not need to modify it. It offers a useful function called setMainQmlFile. The qml file is generated by project wizard too, it defines the GUI on main window.

import QtQuick 2.0

Rectangle {

    width: 360

    height: 360

    Text {

        text: qsTr("Hello World")

        anchors.centerIn: parent

    }

    MouseArea {

        anchors.fill: parent

        onClicked: {

            Qt.quit();

        }

    }

}

qtquick2applicationviewer.pri file was created automatically too. Below is some description about this file. Do not modify this too.

# checksum 0x21c9 version 0x90005

# This file was generated by the Qt Quick 2 Application wizard of Qt Creator.

# The code below adds the QtQuick2ApplicationViewer to the project and handles

# the activation of QML debugging.

# It is recommended not to modify this file, since newer versions of Qt Creator

# may offer an updated version of it.

qml file is JSON style, very easy to read and understand. Define a rectangle which includes two elements: text & mouse area.

Also, the project wizard has created project file: helloworld.pro.

Run it, a helloworld window will popup.
This is a real getting started doc for new people.