diff --git a/docs/tutorial/adding-some-state.md b/docs/tutorial/adding-some-state.md index 47d916eaeb..e00795e53c 100644 --- a/docs/tutorial/adding-some-state.md +++ b/docs/tutorial/adding-some-state.md @@ -23,7 +23,7 @@ but to make this tutorial simpler, we're going to replace contents of this file ```javascript import { AbstractController } from '@ima/core'; -export default class HomeController extends AbstractController { +export class HomeController extends AbstractController { static get $dependencies() { return []; } @@ -243,6 +243,8 @@ Put the following code into the `Post.jsx` file: ```jsx import { AbstractComponent } from '@ima/react-page-renderer'; import React from 'react'; +import './post.less'; + export default class Post extends AbstractComponent { render() { diff --git a/docs/tutorial/fetching-data.md b/docs/tutorial/fetching-data.md index 0b9606da91..3ed470167f 100644 --- a/docs/tutorial/fetching-data.md +++ b/docs/tutorial/fetching-data.md @@ -125,7 +125,7 @@ export default class PostResource { getEntityList() { return this._http - .get('http://localhost:3001/static/api/posts.json', {}) + .get('http://localhost:3001/static/static/public/posts.json', {}) .then(response => this._factory.createList(response.body)); } } @@ -320,7 +320,7 @@ but this time fetched from the server! Or are they? ## Server-side rendering If you open your browsers's developer tools, you may notice that the network log does -not show any request to `http://localhost:3001/static/api/posts.json`. +not show any request to `http://localhost:3001/static/static/public/posts.json`. You may remember that IMA.js is an isomorphic JavaScript application stack. This means that our application gets rendered at the server first, then it is @@ -330,5 +330,5 @@ application is "reanimated" at the client-side using the state information. IMA.js caches the requests we make using the HTTP service at the server-side and sends the serialized cache to the client. The cache is then deserialized at the client-side, so the request to -`http://localhost:3001/static/api/posts.json` we do in our post resource will +`http://localhost:3001/static/static/public/posts.json` we do in our post resource will be resolved from the cache, leading to no additional HTTP request being made. diff --git a/docs/tutorial/final-polish.md b/docs/tutorial/final-polish.md index 26204af872..8a05d5fad4 100644 --- a/docs/tutorial/final-polish.md +++ b/docs/tutorial/final-polish.md @@ -25,7 +25,7 @@ with 2 new state keys: ```javascript constructor(props, context) { super(props, context); - + ... this.state = { author: '', content: '', @@ -128,7 +128,7 @@ _onSubmit(event) { return; } - this.fire('postSubmitted', { + this.fire(this.#containerRef.current, 'postSubmitted', { author: this.state.author, content: this.state.content }); @@ -181,7 +181,7 @@ Next we need to update the `getEntityList()` method in the **post resource** cla ```javascript return this._http - .get('http://localhost:3001/static/api/posts.json', {}) + .get('http://localhost:3001/static/static/public/posts.json', {}) .then(response => { response.body.forEach(post => (post.isSaved = true)); return response.body; @@ -347,7 +347,7 @@ Nothing really new here, we're just adding the `post-pending` CSS class on our post's root element if the post is not saved yet. Open the post's style file (`app/component/post/post.less`) and add the -following the content: +following content: ```scss .post-pending .card-body { @@ -731,7 +731,7 @@ With this issue taken care of, let's resolve the posts refresh race condition. ### Posts refresh race condition To fix our refresh race condition, we'll envelope the server responses and add a timestamp at which -the response has been generated. Open the `app/assets/static/api/posts.json` +the response has been generated. Open the `app/public/posts.json` file and update its contents as follows: ```json @@ -806,7 +806,7 @@ Next update the `getEntityList()` method of the post resource ```javascript return this._http - .get('http://localhost:3001/static/api/posts.json', {}) + .get('http://localhost:3001/static/static/public/posts.json', {}) .then(response => { response.body.posts.forEach(post => (post.isSaved = true)); diff --git a/docs/tutorial/introduction.md b/docs/tutorial/introduction.md index af96084187..618abd76f7 100644 --- a/docs/tutorial/introduction.md +++ b/docs/tutorial/introduction.md @@ -85,8 +85,7 @@ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo s All files that are specific to our application are located in the `app`, directory. The `package.json` file provides the `npm` tool with information -about the dependencies of our application, `gulpConfig.js` configures our gulp tasks (such as LESS file processing), and, finally, -the `gulpfile.js` loads the tasks we can run using the `gulp` tool. +about the dependencies of our application. You may have also noticed the `doc`, `build` and `server` directories *(some of these folders may not be visible until they are generated in the first call of `npm run dev` or `npm run build`)*. - The `doc` directory contains the documentation for IMA.js APIs and our application diff --git a/docs/tutorial/static-view.md b/docs/tutorial/static-view.md index cabadbd851..d261589926 100644 --- a/docs/tutorial/static-view.md +++ b/docs/tutorial/static-view.md @@ -20,6 +20,7 @@ Now let's replace the contents of the file with a blank view: ```jsx import { PageContext, AbstractComponent } from '@ima/react-page-renderer'; import React from 'react'; +import './homeView.less'; export class HomeView extends AbstractComponent { static get contextType() { @@ -210,14 +211,14 @@ This will save us a lot of effort with styling our UI. #### Defining custom styles Let's write some CSS to make our guestbook look even better. Open the -`app/assets/less/setting.less` file and add the following code to set up our +`app/less/globals.less` file and add the following code to set up our layout configuration: ```scss @post-author-alignment: right; ``` -Next open the `app/assets/less/base.less` file and add the following code below the existing one: +Next open the `app/less/app.less` file and add the following code below the existing one: ```scss form { diff --git a/docs/tutorial/writing-posts.md b/docs/tutorial/writing-posts.md index e26e4ebef6..b955a976d5 100644 --- a/docs/tutorial/writing-posts.md +++ b/docs/tutorial/writing-posts.md @@ -68,9 +68,10 @@ those input to the state of our `PostingForm` component. We can't forget to define the default state for these two keys: ```javascript +#containerRef; constructor(props, context) { super(props, context); - + this.#containerRef = createRef(); this.state = { author: '', content: '' @@ -78,6 +79,24 @@ constructor(props, context) { } ``` +Import the `createRef` from React to the +beginning of the file: + +```javascript +import { createRef } from 'react'; +``` + +...and add `ref={this.#containerRef}` to the first `div` in the the component: + +```javascript +... +render() { + return ( +