[update] React and Vue integration guides

docs/guides/integration_with_react.md

@@ -122,7 +122,7 @@ export default function ToDoComponent(props) {
 
 #### Adding styles
 
-To display To Do List correctly, you need to provide the corresponding styles. You can use the **index.css** file to specify important styles for To Do List and its containers:
+To display To Do List correctly, you need to specify important styles for To Do List and its container in the main css file of the project:
 
 ~~~css title="index.css"
 /* specify styles for initial page */
@@ -309,22 +309,6 @@ useEffect(() => {
 // ...
 ~~~
 
-### Step 3. Adding To Do List into the app
-
-To add the component into the app, open the ***App.js*** file and replace the default code with the following one:
-
-~~~jsx title="App.js"
-import ToDo from "./ToDo";
-import { getData } from "./data";
-
-function App() {
-    const { tasks, users, projects } = getData();
-    return <ToDo tasks={tasks} users={users} projects={projects} />;
-}
-
-export default App;
-~~~
-
 After that, you can start the app to see To Do List loaded with data on a page.
 
 ![To Do List initialization](../assets/trial_todolist.png)

docs/guides/integration_with_vue.md

@@ -40,9 +40,9 @@ Install dependencies and start the dev server. For this, use a package manager:
 
 - if you use [**yarn**](https://yarnpkg.com/), run the following commands:
 
-~~~json
+~~~jsx
 yarn
-yarn start
+yarn start // or yarn dev
 ~~~
 
 - if you use [**npm**](https://www.npmjs.com/), run the following commands:
@@ -123,11 +123,39 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="todo_container" style="height: calc(100% - 56px);"></div>
+        <div ref="todo_container" class="widget"></div>
     </div>
 </template>
 ~~~
 
+#### Adding styles
+
+To display To Do List correctly, you need to specify important styles for To Do List and its container in the main css file of the project:
+
+~~~css title="main.css"
+/* specify styles for initial page */
+html,
+body,
+#app { /* make sure that you use the #app root container */
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: #f7f7f7;
+}
+
+/* specify styles for To Do List and Toolbar container*/
+.component_container {
+    height: 100%; 
+    max-width: 800px; 
+    margin: 0 auto;
+}
+
+/* specify styles for To Do List container*/
+.widget {
+    height: calc(100% - 56px);
+}
+~~~
+
 #### Loading data
 
 To add data into the To Do List, you need to provide a data set. You can create the ***data.js*** file in the ***src/*** directory and add some data into it:
@@ -233,7 +261,7 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="todo_container" style="height: calc(100% - 56px);"></div>
+        <div ref="todo_container" class="widget"></div>
     </div>
 </template>
 ~~~
@@ -273,7 +301,7 @@ export default {
 <template>
     <div class="component_container">
         <div ref="toolbar_container"></div>
-        <div ref="todo_container" style="height: calc(100% - 56px);"></div>
+        <div ref="todo_container" class="widget"></div>
     </div>
 </template>
 ~~~
@@ -310,33 +338,6 @@ export default {
 // ...
 ~~~
 
-### Step 3. Adding To Do List into the app
-
-To add the component into the app, open the **App.vue** file and replace the default code with the following one:
-
-~~~html title="App.vue"
-<script>
-import ToDo from "./components/ToDo.vue";
-import { getData } from "./data";
-
-export default {
-    components: { ToDo },
-    data() {
-        const { users, projects, tasks } = getData();
-        return {
-            users,
-            projects,
-            tasks
-        };
-    }
-};
-</script>
-
-<template>
-    <ToDo :users="users" :tasks="tasks" :projects="projects" />
-</template>
-~~~
-
 After that, you can start the app to see To Do List loaded with data on a page.
 
 ![To Do List initialization](../assets/trial_todolist.png)