└── README.md /README.md: -------------------------------------------------------------------------------- 1 | React là library javascript dành cho việc xây dựng UI (User interface tạm dịch gọi là giao diện người dùng), nó giúp bạn dễ dàng định nghĩa đóng gói Component giống như thẻ HTML, nó giúp bạn dễ dàng tái sử dụng khi mà dữ liệu thay đổi theo thời gian. 2 | Không chỉ dành cho việc phát triển web, React còn dành cho việc phát triển ứng dụng mobile, desktop, ứng dụng window. 3 | Vậy để bắt đầu với React, bạn nên bắt đầu từ đâu, và như thế nào. 4 | 5 | Trong bài viết này, mình sẽ liệt kê những kiến thức theo thứ tự, và một số link bài viết để các bạn tham khảo. Ngoài ra mình có thể tự tìm kiếm theo từ khóa mà mình suggest để đọc thêm nhiều bài hơn. 6 | 7 | Và xin lưu ý là không có gì bằng tài liệu chính chủ của facebook, nên nếu gặp từ khóa nào, thì nên vào trang chính của facebook nhé: https://facebook.github.io/react/docs/ 8 | 9 | ## 1. React installation 10 | Phải nói nếu bạn là người code jquery, hay sử dụng các javascript framework thì khi chuyển sang React bạn phải gặp nhiều khái niệm gây cho bạn hoang mang tột độ. 11 | 12 | Các kiến thức cần biết khi học React: 13 | - ECMAScript 6 (ES6) : là 1 chuẩn mới của javascript, hỗ trợ nhiều hàm, các cú pháp viết tắt làm việc với mảng và object hiệu quả hơn. 14 | - Babel: ES6 là 1 chuẩn mới cho nên 1 số trình duyệt sẽ chưa hỗ trợ, nên babel sẽ `transpile` ES6 -> ES5(chuẩn hiện tại mà các trình duyệt đều đọc được). 15 | - Webpack: là một module bundler ( đóng gói các module ), hỗ trợ gói nhiều modules thành một, hoặc tách module ra thành nhiều phần để có thể tăng hiệu suất tải trang. Mặt khác webpack có rất nhiều plugin cho phép bạn có thể biên dịch less, sass, postcss gôm chung vào 1 file. 16 | - NPM (Node package manager): là trình quản lý các gói cài đặt trong app của bạn, khi viết react app bạn sẽ có nhiều component cài đặt do người khác chia sẻ. Sử dụng cái này thì cũng đơn giản thôi. 17 | 18 | Bạn thấy khá nhiều kiến thức đấy, nhưng đừng lo, bạn chỉ cần biết bất nhiêu là đủ, chúng ta sẽ hiểu sâu qua các bài viết thực hành. 19 | 20 | Trước đây ở những phiên bản đầu tiên, để cài đặt 1 app React thì khá phức tạp với các bạn beginner, đôi khi cài không được sẽ khiến các bạn chán nản. 21 | 22 | Tuy nhiên facebook nó cho ra mắt 1 package tên là *create-react-app*, nó giúp bạn tạo 1 ứng dụng React trong vòng 1 nốt nhạc 23 | 24 | 1. Cài đặt ứng dụng đầu tiên với create-react-app: https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc?source=user_profile---------8---------- 25 | Đây là 1 trong những bài viết sẽ giúp bạn đầu dễ dàng với 1 ứng dụng React, nó sẽ trình bài cho bạn cấu trúc cơ bản của 1 app React như thế nào, khởi tạo 1 component đầu tiên. 26 | 27 | 2. Cài đặt, cấu hình các plugin cho creact-react-app: 28 | https://auth0.com/blog/how-to-configure-create-react-app/ 29 | Với các bạn mới bắt đầu mình không khuyên đọc bài viết này ^_^. Để dành sau khi các bạn đã vững về state & props. 30 | 31 | 3. Giới thiệu về cú pháp JSX 32 | https://facebook.github.io/react/docs/introducing-jsx.html 33 | 34 | 4. Awesome React: 35 | https://github.com/enaqx/awesome-react 36 | Tổng hợp những bài viết hay về React, những components. 37 | 38 | ## 2. CodeEditor for development React 39 | React sử dụng cú pháp JSX, vì vậy khi bạn sử dụng các editor thì cần phải cài thêm các gói syntax highlighter, mình xin liệt kê 1 số editor hoặc IDE code react tốt nhất hiện nay 40 | - Webstorm: đây là 1 IDE, support đầy đủ các cú pháp mới của javascript (ES6, ES7, TypeScript, Flow, ...), gợi ý code tốt, nhắc nhở lập trình viên nếu sử dụng biến vô tội vạ :v. Đây là lựa chọn số 1, mình khuyên các bạn nên chọn nó để phát triển ứng dụng React. 41 | - SublimeText: đây là 1 cái tên quá quen thuộc, ưu điểm nhanh gọn lẹ, nhiều plugins, nhược điểm là suggestion chưa tốt. 42 | - Atom: tương tự như sublimetext, nhược điểm khởi động lần đâu lâu 43 | - Nuclie: đây là 1 plguin của Atom 44 | - Visual Studio Code: Open Source tool từ Microsoft 45 | 46 | ## 3. Learning ES6 47 | Với sự ra đời của ES6, thừa hưởng các cú pháp từ python, ruby, java, javascript trở nên linh bởi tính linh hoạt, cú pháp ngắn gọn dễ hiểu, nên hầu như đều được áp dụng trong mọi ứng dụng bằng Javascript hiện nay trong: Nodejs , web app, ... 48 | Để nói về ES6 thì có rất nhiều, nhưng mình xin nói về một số tính năng đặc biết hay sử dụng nhiều nhất: 49 | - Arrow functions 50 | - Scoping 51 | - String Template 52 | - Promise - giảm thiểu callback 53 | - Extended Parameter Handling - Default parameter function 54 | - Destructuring Assignment - Phân tách phần tử 55 | - Modules - import, export - đây là một phần rất quan trọng, nó giống như namespace trong php, hay package trong java, hay python. 56 | - Classes: Kiểu giống như hướng đối tượng như các ngôn ngữ khác 57 | - Array: Làm việc với kiểu lists (filter, map, foreach, ...) đây là 1 phần cực kỳ quan trọng, bởi vì bạn sẽ làm việc với lists khá nhiều, bạn sẽ thấy hầu như trong các tutorial nào cũng sử dụng nó. Đọc tại MDN là chắc cú nhất: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array 58 | 59 | Những cái features mình nói trên đều có tại link dưới đây các bạn tham khảo nhé: 60 | - New Features: Overview & Comparison: http://es6-features.org/ 61 | - ES6 feautures: https://github.com/lukehoban/es6features 62 | 63 | Và mình khuyên bạn chỉ nên đọc những cái feauture mình giới thiệu trên, rồi bắt đầu ngay vào code React luôn, khi nào gặp những cái không biêt thì search :3, chứ đọc hết có mà tẩu hỏa nhập ma. 64 | 65 | Books 66 | 1. Understanding ES6 67 | https://leanpub.com/understandinges6/read 68 | Cuốn này rất nổi tiếng, tổng hợp hầu như tất cả cấc tính năng của ES6, mình chỉ xem cuốn này như là từ điển thôi, chứ chưa đọc hết :)) 69 | 2. Awesome ES6 70 | https://github.com/ericdouglas/ES6-Learning 71 | Cái này tổng hợp lại các bài viết nói về ES6, bao gồm các khóa học, tutorial, video ... Nói chung là nên ghé vào đây một lần cho biết ^_^ 72 | 73 | ## 4. React Component, State & Props 74 | Trong React, các thành phần đều được định nghĩa là Component, các component có thể là: 75 | - Button 76 | - Select 77 | - InputText 78 | - Textarea 79 | - Comment (có thể chứa nhiều các component khác) 80 | Nó được sử dụng giống như thẻ HTML, điều đó thật là tiện. Ví dụ: 81 | ```javascript 82 | 83 | ``` 84 | Mỗi component sẽ có state & props, đây là 2 khái niệm quan trọng trong React. Hiểu được nó nội công thâm hậu, dương khí đầy mình, code như không code :)) 85 | - State: là data nội tại của component đó, state có thể khởi tạo, cập nhật thay đổi, mỗi khi thay đổi component sẽ tự động cập nhật hiển thị 86 | - Props: là các tham số truyền vào component, props chỉ có thể đọc không thay đổi được. Như ví dụ trên kia thì props là user="thanhtungdp". Nhiệm vụ của bạn là đọc các attribute và xử lý nó hiển thị. 87 | - Nested Component: các component lồng nhau, state của component này sẽ là props của component kia. Và dữ liệu ban đầu sẽ được lưu ở state của Root Component đầu tiên 88 | 89 | Lý thuyết như vậy là đủ rồi, bạn nên đọc thêm các bài viết dưới đây: 90 | 1. State & props (create-react-app part 2): 91 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d#.zg14umu1a 92 | Tiếp tục series bài viết create-react-app phía trên, trong bài viết này sẽ giới thiệu về cách sử dụng state và props như thế nào 93 | 94 | 2. Project HelloList với state & props (create-react-app part 3): 95 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192#.asuk1kq0k 96 | 97 | 3. Project ShoppingList (Thinking in React by facebook): 98 | https://facebook.github.io/react/docs/thinking-in-react.html 99 | Bài này nằm trong loạt bài hướng dẫn cho người mới bắt đầu, bạn nên thực hành để làm quen với các cú pháp của nó 100 | 101 | 4. Project TodoLists: 102 | https://scotch.io/tutorials/create-a-simple-to-do-app-with-react 103 | 104 | 4. Đọc thêm từ về state & props từ giác giả khác: 105 | http://lucybain.com/blog/2016/react-state-vs-pros/ 106 | Nếu chưa hiểu mấy bài viết trên thì đọc tiếp bài này, bài này khá trong sạch và dễ hiểu 107 | 108 | 4. Đọc thêm về state & props từ trang react của facebook: 109 | https://facebook.github.io/react/docs/components-and-props.html 110 | https://facebook.github.io/react/docs/state-and-lifecycle.html 111 | 112 | 5. Làm việc với form: 113 | https://facebook.github.io/react/docs/forms.html 114 | 115 | 5. Đọc thêm các thư viện làm việc với state trong React: 116 | https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c#.v28hrfh1k 117 | 118 | ## 5. React Component Life Cycle 119 | Tạm hiểu là "Vòng đời của React Component", nó cũng giống như chu trình sinh ra và phát triển của một con người, hiểu về life cycle thì đi mây về gió, uyển chuyển như giọt nước mùa thu :)). 120 | Các vòng đời của nó: 121 | - componentWillMount(): giai đoạn chuẩn bị render component lần đầu, chỉ sử dụng lần đầu tiên. Tạm hiểu đây là quá trình con đạp bụng mẹ, mẹ chuẩn bị sinh ra con ^_^ 122 | - componentDidMount(): giai đoạn sau khi render ra component lần đầu. Tạm hiểu là giai đoạn sau khi sinh con. 123 | - componentDidUpdate(): giai đoạn component cập nhật lại khi có sự thay đổi của state và props. 124 | - componentWillReceiveProps: giai đoạn nhận props 125 | 126 | Ví dụ ở component là `ChatContainer` mình có khởi tạo socket, nhưng khi user chuyển sang sử dụng component khác và `ChatContainer` không còn hiển thị trên trang nữa, tuy nhiên socket vẫn còn connect, như vậy thì tốn dung lượng quá. Vì vậy cho nên mình sẽ can thiện vào vòng đời componentWillUnmount() của `ChatContainer` để close socket khi component đó không còn hiển thị trên trang. 127 | 128 | Như mình giới thiệu các vòng đời ở trên, thì mỗi vòng đời tùy theo mục đích sử dụng, mà các bạn sẽ xử lý ở giai đoạn phụ hợp. Nếu bạn mới bắt đầu thì bạn cũng chưa sử dụng nó nhiều đâu, hiểu là được rồi 129 | 130 | Dưới đây mình xin liệt kê 1 số bài viết nói về nó. 131 | - React Component lifecycle: 132 | https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df#.uf1dhwxfp 133 | Bài viết này khá chi tiết dễ hiểu 134 | 135 | ## 6. React router 136 | Nếu bạn sử dụng 1 số trang web hiện nay, bạn sẽ thấy khi click vào 1 link nào đó, thì url change, nhưng trang sẽ không load lại hết thì đó là 1 ứng dụng SPA (Single page application). 137 | Vậy làm thế nào để làm điều đó trên React, xin giới thiệu với các bạn đó là React Router. 138 | React router khá dễ sử dụng, tài liệu chi tiết dễ hiểu. 139 | 140 | Mình xin liệt kê một số bài viết sử dụng react router: 141 | - Basic react router: 142 | https://css-tricks.com/learning-react-router/ 143 | Bài này của csstricks :)) không liên quan gì tới domain nhưng mà bài viết này rất hay có hình minh họa các kiểu, nhìn rất thích 144 | - Document: 145 | https://github.com/ReactTraining/react-router 146 | 147 | 148 | ## 7. Fetch Data 149 | Fetch data là 1 phần cực kỳ quan trọng trong 1 ứng dụng của bạn, nó sẽ giúp bạn tương tác với server như: post, put, delete. 150 | Vậy làm việc với fetch data như thế nào, mình xin liệt kê 1 số bài viết 151 | 152 | Một số thư viện cho việc fetch data: 153 | - axios: cái này ngon lành, support server rendering (được cộng đồng sử dụng nhiều, nên dùng) 154 | - qwest: tương tự axios, không support server rendering 155 | - fetch: cái này thì mặc định của ES6 có support 156 | 157 | Bài viết: 158 | 1. Ajax in React 159 | https://daveceddia.com/ajax-requests-in-react/ 160 | Bài này là bài cơ bản 161 | 162 | 2. Working with server; 163 | https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ 164 | Nâng cao hơn 1 tí ^_^ 165 | 166 | 3. How ajax work reacts 167 | http://andrewhfarmer.com/how-ajax-works-react/ 168 | 169 | 3. React Ajax best practices 170 | http://andrewhfarmer.com/react-ajax-best-practices/ 171 | 172 | 4. Container components: 173 | https://css-tricks.com/learning-react-container-components/ 174 | Bài này của rất hay, các bạn nên đọc nhé. 175 | 176 | 177 | ## 8. Redux - Store management 178 | Một phần khá quan trọng trong React đó chính là việc quản lý Store. 179 | Nếu bạn không áp dụng 1 lib store management nào, thì công việc bạn cần làm đó chính là pass props liên vào các component con. Hãy nghĩ tới việc bạn có 10 cái nested component, và bạn phải truyền data từ root component tới component thứ 10 để đọc dữ liệu, đó là 1 điều thật kinh khủng :3 180 | Redux sẽ giúp bạn giải quyết vấn đề đó, làm cho ứng dụng của bạn trở nên logic, dễ dàng quản lý hơn. 181 | 182 | Bài viết: 183 | - Basic redux: 184 | https://css-tricks.com/learning-react-redux/ 185 | Bài này rất hay của bác csstricks, theo mình là dễ hiểu nhất từ trước tới giờ mình đọc 186 | - Learn redux with cartoon: 187 | https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6#.8wb7q2mie 188 | Mô tả bằng các hình ảnh hoạt hình vui nhộn 189 | - Getting started with redux video: https://egghead.io/courses/getting-started-with-redux 190 | - Fullstack redux: 191 | https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html 192 | Bài này từ năm 2015 nhưng rất hay và chi tiết, nếu có thời gian và muốn nâng cao sâu trình độ thì đọc, còn nếu không thì đọc sơ qua thôi :v 193 | - Awesome redux: 194 | https://github.com/xgrommx/awesome-redux 195 | Các bạn đọc thêm 1 số project ở trang này nhé, nhiều lắm tha hồ mà đọc :v 196 | - Smart & dumb component: 197 | http://jaketrent.com/post/smart-dumb-components-react/ 198 | Redux hoạt động theo cơ chế này đọc để hiểu thêm. 199 | - Series bài viết build 1 blog với redux: 200 | https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.1f7nnie6n 201 | 202 | Tóm lại thì redux rất nhiều bài viết, mình chỉ giới thiệu cơ bản thôi, các bạn nên tìm trong phần awesome redux nhé 203 | 204 | ## 9. Medium chanel 205 | Mình xin giới thiệu các bạn 1 số chanel trên medium nói về việc phát triển ứng dụng với React, React Native và 1 số kiến thức về phát triển hệ thống mà hi 206 | - https://medium.mybridge.co: Kiến thức quá nhiều, đưng lo trang này sẽ tổng hợp giúp bạn những bài viết nổi bật theo tháng. Dưới đây là 1 ví dụ, các bạn chỉ cần vào trang và search từ khóa reactjs 207 | - Top 10 reacjts articles last month may: https://medium.mybridge.co/top-10-react-js-articles-from-last-month-v-may-ceb5420b91df#.nqrnux5yt 208 | - https://medium.freecodecamp.com/: Cái này thì trùm rồi, vào search từ khóa reactjs là ra cả đống bài. 209 | - https://hackernoon.com/: tương tự như freecodecamp 210 | - https://code-cartoons.com/ Cái bài viết ở đây đều rất vui nhộn, nó có những hình ảnh minh họa làm cho bạn dễ hiểu, làm kích thích học reactjs hơn ^_^ 211 | - https://medium.com/walmartlabs: Walmart là hệ thống bán lẻ hàng đầu ở mỹ, hãy xem các kỹ sư chia sẻ về xây dựng kiến trúc hệ thống. 212 | - https://medium.com/@ReactJS_News: Cập nhật tin tức về React 213 | - https://medium.com/@_ericelliott: Bác này trùm về javascript, tác giả của understanding javascript ES6 214 | - https://medium.com/airbnb-engineering: Airbnb sử dụng React hầu như trong hệ thống của họ, xem những bài chia sẻ của họ để hiểu thêm. 215 | - http://www.wix.engineering Wix là 1 trong những website cung cấp nền tảng CMS phổ biến nhất hiện nay, nghe các bác kỹ sư chia sẻ và chém gió 216 | - https://medium.com/react-native-training: Kênh training react native có khá nhiều bài viết hay về nó 217 | - https://dev-blog.apollodata.com/ 218 | 219 | Một số kênh khác mình hay theo dõi để trau dồi kiến thức design, tăng cao ý tưởng :3: 220 | - https://blog.prototypr.io/ 221 | - https://uxplanet.org/ 222 | - https://medium.muz.li/ 223 | - https://medium.com/ux-power-tools 224 | 225 | ## 10. Bonus posts 226 | - 22 Amazing open source React projects: 227 | https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f#.c3pdfmttu 228 | - Learn How to Create Quick and Simple React Flipping Card 229 | https://medium.com/@AlexDevero/learn-how-to-create-quick-and-simple-react-flipping-card-7b4660bca475#.1427sr5ll 230 | - How I converted my React app to VanillaJS (and whether or not it was a terrible idea) 231 | https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.nv1cik6vc 232 | - GraphQL explained 233 | https://dev-blog.apollodata.com/graphql-explained-5844742f195e#.y1rnwdop4 234 | - 230 Curated Resources and Tools for Building Apps with React.js 235 | https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ 236 | - Bài viết học React Native của mình: 237 | https://www.facebook.com/notes/react-vi%E1%BB%87t-nam/react-native-nh%E1%BB%AFng-b%C3%A0i-vi%E1%BA%BFt-step-by-step-d%C3%A0nh-cho-c%C3%A1c-b%E1%BA%A1n-m%E1%BB%9Bi-h%E1%BB%8Dc/1772834179637935?__mref=message_bubble 238 | 239 | ## 11. Real Projects 240 | - Build A Media Library with React, Redux, and Redux-saga: 241 | https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-1 242 | - Build Bookshop with react & redux: 243 | https://scotch.io/tutorials/build-a-bookshop-with-react-redux-i-react-redux-flow 244 | - Clone Yelp: 245 | https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ 246 | - JWT authentication with react redux: 247 | http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/ 248 | - Soundclound app: 249 | https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/ 250 | - Build blog management with redux: 251 | http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ 252 | Bài viết này khá hay và chi tiết, có hình ảnh minh họa, chia theo series nên rất dễ theo dõi và nắm bắt 253 | - Clone instagram app: 254 | http://www.eloquentwebapp.com/instagram-app-node-react-redux/ 255 | - Build app cabin: 256 | http://cabin.getstream.io/ 257 | "Cabin is built using React and Redux. Stream powers the feed technology, Algolia search, Mapbox the custom maps, Keen analytics and ImgIX the image resizing. These APIs are powerful and scalable and allow you to build a fully featured app." 258 | Series bài viết này hướng dẫn các bạn sử dụng React với các dịch vụ thứ 3 259 | - Build app trello clone: 260 | https://blog.diacode.com/trello-clone-with-phoenix-and-react-pt-1 261 | - Creating a Cordova Hybrid App with React, Redux and Webpack 262 | https://onsen.io/blog/cordova-hybrid-app-with-react-redux-webpack/ 263 | - Build a Music Streaming App with Electron, React & ES6 264 | https://www.sitepoint.com/music-streaming-app-electron-react-es6/ 265 | 266 | Bấy nhiêu thôi, mình research cũng đuối quá, anh em vào trang mybridge medium để search thêm nhé, nhiều lắm ^_^, mình tổng hợp 1 số cái nổi bật 267 | 268 | ## 12. Books 269 | - Pro React: Cuốn này các bạn nên đọc, hiện tại đã cập nhật sử dụng Redux. Nhờ cuốn này mà kiến thức về React của mình vững, làm nền tảng để học mấy cái khác. 270 | Pro react sẽ hướng dẫn bạn từng bước từng bước xây dựng ứng dụng React từ thuần Component cho tới kiến trúc Flux, nó giới thiệu và áp dụng các thư viện helpers của react như: update-addons, transitions, react-router, react-dnd(drag and drop). 271 | Kết quả sau khi đọc sau cuốn sách này: 272 | - Nắm bắt được các kiến thức về React Component, Async 273 | - Hiểu được Immutable, Mutable là gì :v 274 | - Nắm bắt được kiến trúc Flux, là cơ sở để triển khai sang Redux 275 | - Sử dụng thành thạo các thư viện của React 276 | - Isomorphic React Applications - cái này hiểu là ứng dụng ` đồng hình`, tức là nó sẽ render ra dữ liệu phía server luôn. 277 | - Unit test 278 | - Và cuối cùng bạn sẽ có một ứng dụng quản lý task chuyên nghiệp (kéo thả các kiểu y như trello :v) 279 | - survivejs.com: Mình có đọc qua các bài viết trên này, thấy đây là 1 trang khá hay cung cấp mấy cái project thực hành khá là trực quan. 280 | - fullstackreact.com: Trang này tương tự như survivejs, cái nào cũng hay cả. 281 | - ReactJS by example: 282 | http://reactkungfu.com/react-by-example/ 283 | Cung cấp các ví dụ về component react, bạn nào mới bắt đầu thì nên tìm cuốn này đọc thêm 284 | 285 | Cũng có vài cuốn khác nhưng mà mình chưa đọc, mình chỉ đọc mấy cuốn trên và đưa ra nhận xét. 286 | 287 | Còn rất nhiều bài viết hay khác về React, các bạn chỉ cần follow theo mấy cái link mình đưa thì sẽ ra rất nhiều bài viết về react. 288 | 289 | Chúc các bạn học react vui vẻ ^_^ 290 | 291 | --------------------------------------------------------------------------------