Create a Twitter-like App with Python Django JavaScript and React. Full TUTORIAL
Django x React has never been so easy. Build a twitter-like app in Django, Javascript, & React.js. Step-by-Step. Topics:
- Pure Django + JavaScript
- Django Rest Framework
- React.js
- Auth
- & MUCH more
0:00:00 1. Welcome
0:01:48 2. Walkthrough
0:08:11 3. Requirements.txt
0:11:17 4. Setup Django Project
0:16:00 5. Add Project to VS Code
0:21:39 6. Update VS Code Config
0:28:45 7. Our Roadmap
0:32:31 8. The Tweets Model
0:39:35 9. Store Data from Django Model
0:43:10 10. Intro to URL Routing and Dynamic Routing
0:47:57 11. Handling Dynamic Routing
0:51:32 12. Dynamic View into REST API Endpoint
0:55:50 13. Our First Template
1:00:07 14. Bootstrap & Django Templates
1:04:17 15. Tweet List View
1:08:01 16. Dynamic Load Tweets via JavaScript
1:13:48 17. Replace HTML Content with JavaScript
1:18:19 18. Tweets to HTML via JavaScript
1:25:56 19. Format Tweet Method
1:29:30 20. Like Button Rendering
1:36:48 21. Rapid Implement of Bootstrap Theme
1:48:00 22. Tweet Create Form
1:56:55 23. Tweet Form by Hand
2:02:25 24. Successful Form Redirect
2:05:00 25. Safe URL Redirect
2:08:30 26. Prevent Form Submit via JavaScript
2:13:36 27. Sending Form Data via pure JavaScript
2:22:06 28. Handling Ajax Requests
2:26:47 29. Serialize Django Model Object
2:33:33 30. Append New Tweet & Reorder
2:37:09 31. Handling Form Errors
2:42:18 32. Rendering the Error Message via Vanilla JavaScript
2:49:28 33. Users & Tweets
2:57:09 34. Django Admin
3:07:23 35. Associate Authenticated User to Object
3:13:00 36. Permissions & Roadmap
3:16:16 37. Install Django Rest Framework
3:18:20 38. Django Forms to Django Rest Framework Serializer
3:27:42 39. Django Views to Django Rest Framework Views
3:35:50 40. Permissions and Authentication Classes Decorators for DRF APIs
3:43:08 41. Delete Tweet API View
3:49:43 42. Adding a Like Field
3:56:00 43. Understanding Setting ManyToMayFields
4:03:32 44. Tweet Action View
04:11:02 45. JavaScript Tweet Action Handler
04:15:56 46. CSRF & Client Side Action Buttons
04:24:18 47. Retweeting Logic
04:32:30 48. Two Types of Serializers
04:41:29 49. Internal App Urls
04:45:15 50. Setting up Tests in Django
05:12:14 51. Verify or Install Node.js
05:15:57 52. Create React App
05:20:29 53. Understanding Functional Components
05:26:27 54. Ajax lookup via XHR in React.js
05:32:18 55. Handling CORS and Invalid HOST_HEADER in Django
05:35:35 56. Functional Components in React
05:42:52 57. React.js Action Btn
05:47:07 58. Using JavaScript Modules
05:53:00 59. Improved Action Btn
05:57:31 60. Understanding setState Hook
06:03:02 61. Handling a Form in React
6:08:55 62. Pass from Parent Component to Child with useEffect
06:19:10 63. Adjust the React Render Process
06:23:07 64. React Rendered by Django
06:30:22 65. Render React App via Any Django Template
06:38:36 66. A Better XHR Lookup
06:43:54 67. Create Tweet in React
06:52:56 68. Dev Authentication
06:58:34 69. Handling New Tweet
07:06:06 70. API Methods in React
07:09:55 71. Tweet Action Btn
07:16:52 72. Rendering the ReTweet
07:23:28 73. Improving the Tweet Action Button
07:30:03 74. Prepending Dynamic Retweets
07:37:24 75. Set Data Props on ReactDOM Render
07:42:19 76. Limit List View by Username
07:45:29 77. Rendering Limited Tweet List by Username
07:53:03 78. Tweets Module Clean Up
08:03:06 79. Lookup & Render & Embed Individual Tweets
08:11:26 80. Linking Individual Tweets
08:23:09 81. Build and Use On Django
08:36:00 82. Clean Up API Urls and Views
08:40:12 83. Login Required Redirect
08:46:42 84. Authentication & Registration
09:05:46 85. User Profiles
09:13:21 86. Handling Profile Does Not Exist
09:15:33 87. Signals to Create Profile Objects
09:21:43 88. Save 2 Models in 1 Form and 1 View
09:35:32 89. ManyToManyField and Reverse Relations
09:46:47 90. Followers and Following
09:56:50 91. Follow Button Logic and Endpoint
10:09:29 92. Profile Following Unit Test Cases
10:16:00 93. User Feed Including Following
10:21:50 94. More Efficient Backend Lookups and Custom Model Managers
10:32:30 95. More Efficient List Views with Pagination
10:38:26 96. User Profile Serializer
10:47:07 97. Handling our New List View Response
10:50:29 98. Handling Pagination in React
10:58:20 99. Display User Within Tweet
11:08:17 100. Display Tweet User Details
11:19:50 101. Feed View Component
11:29:20 102. Build for the Feed
11:37:07 103. User Profile API Detail
11:37:07 104. Passing the Request to Serializers
11:41:11 105. Render Profile Badge Component
11:57:21 106. The Follow Button
12:14:05 107. Removing Redundant Profile View
12:17:49 108. Display Follower Count with Numeral.js
12:27:52 109. Final Build
12:36:52 110. Thank you and next steps
Watch video Create a Twitter-like App with Python Django JavaScript and React. Full TUTORIAL online without registration, duration hours minute second in high quality. This video was added by user CodingEntrepreneurs 20 April 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 503,688 once and liked it 16 thousand people.