enonic · espen42 · Nov 6, 2020 · Sep 29, 2020 · Sep 29, 2020 · Sep 29, 2020
diff --git a/docs/entries.adoc b/docs/entries.adoc
@@ -27,7 +27,13 @@ Entries are pretty much just standard JSX files, but they must follow *two requi
 1. is located either in a folder either below *_/site/_* or below one of the *entryDirs* folders listed in _react4xp.properties_ (see also <<jsxpath#, jsxPath>>),
 2. and *default-exports a function*: `props?=>reactComponent` - a function that _may_ take a `props` argument (serializable JS object: no functions) and _must_ return a react component.
 
-NOTE: *Important:* if your entry uses react hooks or it's a react class component, read <<#classes-and-hooks, Classes and hooks in entries>> below.
+[NOTE]
+====
+*Important:*
+
+- There should be no call to `React.render` or `ReactDOM.render` in an entry (or a compiled entry or dependency bundle - keep an eye on your imports). React4xp will handle that call in the right context.
+- If your entry uses react hooks or it's a react class component, read <<#classes-and-hooks, Classes and hooks in entries>> below.
+====
 
 {zwsp} +
 

diff --git a/docs/guillotine.adoc b/docs/guillotine.adoc
diff --git a/docs/imports-and-dependency-chunks.adoc b/docs/imports-and-dependency-chunks.adoc
@@ -384,7 +384,7 @@ export default ({colors, selectedIndex, clickFunc}) =>
 
 In this section we'll adjust some settings to make the code above work.
 
-TIP: Some of this is covered in more detail under <<entries#, entries>> and <<jsxpath#, jsxPaths>>.
+TIP: If you need more details, some of this is covered in more depth under <<entries#, entries>> and <<jsxpath#, jsxPaths>>.
 
 {zwsp} +
 
@@ -416,6 +416,7 @@ Adding paths like e.g. `foo/bar/baz` or `../../hey/ho/lets/go` is perfectly fine
 
 {zwsp} +
 
+[[webpack_rules]]
 === Adding webpack rules
 Next, we'll add some *custom webpack rules to handle the style imports*. First, we need to tell react4xp to use an extra webpack config file. Return to _react4xp.properties_ to add another property:
 

diff --git a/docs/media/add_movies.png b/docs/media/add_movies.png
diff --git a/docs/media/click-data.png b/docs/media/click-data.png
diff --git a/docs/media/click-fill-dom.png b/docs/media/click-fill-dom.png
diff --git a/docs/media/edit_movie.png b/docs/media/edit_movie.png
diff --git a/docs/media/graphql-playground.png b/docs/media/graphql-playground.png
diff --git a/docs/media/guillotine.jpg b/docs/media/guillotine.jpg
diff --git a/docs/media/movie-list-part-config.png b/docs/media/movie-list-part-config.png
diff --git a/docs/media/webapp_applications.png b/docs/media/webapp_applications.png
diff --git a/docs/media/webapp_url.png b/docs/media/webapp_url.png
diff --git a/docs/menu.json b/docs/menu.json
@@ -28,6 +28,14 @@
       "title": "7 - Imports and chunks",
       "document": "imports-and-dependency-chunks"
     },
+    {
+      "title": "8 - Headless: guillotine",
+      "document": "guillotine"
+    },
+    {
+      "title": "9 - Headless: webapp",
+      "document": "webapp"
+    },
     {
       "title": "Entries",
       "document": "entries"

diff --git a/docs/pages-parts-and-regions.adoc b/docs/pages-parts-and-regions.adoc
@@ -70,7 +70,7 @@ Start with a completely generic content type: _site/content-types/my-content/my-
 .my-content.xml:
 [source,xml,options="nowrap"]
 ----
-<content-type xmlns="urn:enonic:xp:model:1.0">
+<content-type>
     <display-name>My Content</display-name>
     <description>Just some content</description>
     <super-type>base:structured</super-type>

diff --git a/docs/setup.adoc b/docs/setup.adoc
@@ -28,32 +28,35 @@ Remember to create a *new XP sandbox* when completing the project wizard.
 == Project structure
 
 If you're used to working with a typical XP project using https://developer.enonic.com/templates/webpack[webpack], the structure in your project root folder will now look familiar -
-the biggest news is `react4xp.properties` and the folder `resources/react4xp/`.
+the biggest news are _react4xp.properties_ and the folders _src/main/resources/react4xp/_ and _src/main/resources/headless_.
 
-TIP: This is just an overview, no need to know it by heart to get started - we'll get back to all of these in more detail. For the most impatient, the takeaway is: *put your JSX source files somewhere below `react4xp/entries/` or `site/`*.
+TIP: This is just an overview, no need to know it by heart to get started - we'll get back to all of these in more detail. For the most impatient, the takeaway is: *put your JSX source files somewhere below _react4xp/entries/_ or _site/_*.
 
 [source,files]
 ----
-build.gradle                <!--1-->
+build.gradle                    <!--1-->
 gradle.properties
 settings.gradle
 package.json
 
-react4xp.properties         <!--2-->
+react4xp.properties             <!--2-->
 
 src/
   main/
     resources/
-      react4xp/             <!--3-->
+      react4xp/                 <!--3-->
         entries/
         shared/
+      headless/
+        guillotineApi.es6       <!--4-->
+        guillotineRequest.es6
 
 ----
 
-<1> A set of gradle config files and `package.json`. These define the build process and project structure, and in particular, make sure that the *lib-react4xp library* and *react4xp npm package* are installed right.
-<2> `react4xp.properties`: tune the most common properties of the react4xp project.
-<3> The `react4xp/` folder is opt-in: can be ignored for now, and doesn't need to contain anything. But when fine-tuning the build later in the tutorial, we'll get back to why you might find it handy to have a separate place for some of your react components (in ultra-short: the `entries\` folder is for react components that can be used directly by react4xp, the `shared\` folder is for common components imported by, and shared between, the entries).
-
+<1> A set of gradle config files and _package.json_. These define the build process and project structure, and in particular, make sure that the *lib-react4xp library* and *react4xp npm package* are installed right.
+<2> _react4xp.properties_: tune the most common properties of the react4xp project.
+<3> The _react4xp/_ folder is opt-in: can be ignored for now, and doesn't need to contain anything. But when fine-tuning the build later in the tutorial, we'll get back to why you might find it handy to have a separate place for some of your react components (in ultra-short: the _entries/_ folder is for react components that can be used directly by react4xp, the _shared\_ folder is for common components imported by, and shared between, the entries).
+<4> Under _headless/_, the starter includes two wrappers that make it easier to use the optional guillotine api for using react4xp in a <<guillotine#, headless context>>.
 
 {zwsp} +