From 4e66b796e924843e31db90d6dff1c796589804fd Mon Sep 17 00:00:00 2001 From: Johannes Kettmann Date: Mon, 22 Jun 2020 21:00:54 +0200 Subject: [PATCH] Adds tests --- package.json | 4 +- src/App.test.js | 49 +++++++++++++++++-- src/__mocks__/subreddit-reactjs-response.json | 1 + yarn.lock | 25 ++++++++++ 4 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 src/__mocks__/subreddit-reactjs-response.json diff --git a/package.json b/package.json index 8370eb1..3947134 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "jest-fetch-mock": "^3.0.3", "normalize.css": "^8.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", @@ -33,5 +34,6 @@ "last 1 firefox version", "last 1 safari version" ] - } + }, + "devDependencies": {} } diff --git a/src/App.test.js b/src/App.test.js index 4db7ebc..242ba69 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,9 +1,48 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { MemoryRouter } from 'react-router'; +import fetchMock from 'jest-fetch-mock'; import App from './App'; +import mockResponse from './__mocks__/subreddit-reactjs-response.json'; -test('renders learn react link', () => { - const { getByText } = render(); - const linkElement = getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); +fetchMock.enableMocks(); + +function setup() { + return render( + + + + ); +} + +describe('Header', () => { + test('"How it works" link points to the correct page', () => { + setup(); + + const link = screen.getByRole('link', { name: /how it works/i }); + userEvent.click(link); + + expect( + screen.getByRole('heading', { name: /how it works/i }) + ).toBeInTheDocument(); + }); +}); + +describe('Subreddit form', () => { + test('loads posts and renders them on the page', async () => { + fetch.once(JSON.stringify(mockResponse)); + setup(); + + const subredditInput = screen.getByLabelText('r /'); + userEvent.type(subredditInput, 'reactjs'); + + const submitButton = screen.getByRole('button', { name: /search/i }); + userEvent.click(submitButton); + + expect(screen.getByText(/is loading/i)).toBeInTheDocument(); + + expect(await screen.findByText(/Number of top posts: 25/i)).toBeInTheDocument(); + expect(fetch).toHaveBeenCalledWith('https://www.reddit.com/r/reactjs/top.json'); + }); }); diff --git a/src/__mocks__/subreddit-reactjs-response.json b/src/__mocks__/subreddit-reactjs-response.json new file mode 100644 index 0000000..57b7287 --- /dev/null +++ b/src/__mocks__/subreddit-reactjs-response.json @@ -0,0 +1 @@ +{"kind": "Listing", "data": {"modhash": "", "dist": 25, "children": [{"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_2ibchdac", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Instagram using MERN stack", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-show", "downs": 0, "thumbnail_height": 78, "top_awarded_type": null, "hide_score": false, "name": "t3_hdnsn4", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.96, "author_flair_background_color": null, "subreddit_type": "public", "ups": 375, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": {"reddit_video": {"fallback_url": "https://v.redd.it/wcmrxtk51f651/DASH_720?source=fallback", "height": 720, "width": 1280, "scrubber_media_url": "https://v.redd.it/wcmrxtk51f651/DASH_96", "dash_url": "https://v.redd.it/wcmrxtk51f651/DASHPlaylist.mpd?a=1595434694%2CYTE0MDk5OWI2YjRiMTI0NTcyYmEyYTE0NGNlNDIwMmI1ZWRhZGZkNWI2N2U0OTc2NWFkMDE1YjYxNDhlM2FjYQ%3D%3D&v=1&f=sd", "duration": 109, "hls_url": "https://v.redd.it/wcmrxtk51f651/HLSPlaylist.m3u8?a=1595434694%2CY2FhYjI3OWFiNmMxNDI0ZjNmMjNkMTg0ZTBhODYyN2I2N2UzNWY4OGVmNmM2MmNiODVkY2ZlMTZjY2FhZTM1YQ%3D%3D&v=1&f=sd", "is_gif": false, "transcoding_status": "completed"}}, "is_reddit_media_domain": true, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Show /r/reactjs", "can_mod_post": false, "score": 375, "approved_by": null, "author_premium": true, "thumbnail": "https://b.thumbs.redditmedia.com/hsyrX5lB-z4qJQN-YdCmGK0ArhIYILXjP9NDLwfS5MQ.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "hosted:video", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592840432.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "v.redd.it", "allow_live_comments": true, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": false, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?format=pjpg&auto=webp&s=4c83dfdc0efe704a1f692c08272a969a7d05a640", "width": 1366, "height": 768}, "resolutions": [{"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=108&crop=smart&format=pjpg&auto=webp&s=69e913c62c97067a8d6546ab111b3e3d37396b16", "width": 108, "height": 60}, {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=216&crop=smart&format=pjpg&auto=webp&s=ac1dbeea8f65aba884a6c7d98a5d9d209b0a9a95", "width": 216, "height": 121}, {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=320&crop=smart&format=pjpg&auto=webp&s=ce68fc837eff0a206557c8874fa492d6b9eaa566", "width": 320, "height": 179}, {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=640&crop=smart&format=pjpg&auto=webp&s=a9b95e3cd51ee2e1d32178f6fbba5843ef1bbfdb", "width": 640, "height": 359}, {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=960&crop=smart&format=pjpg&auto=webp&s=f4e8bf199d61863b56dd4ac5da096e30029b15d4", "width": 960, "height": 539}, {"url": "https://external-preview.redd.it/hsl_rjfe9sp93d1vbJnuAbsKKqhfNdbtmzF6FrMxFho.png?width=1080&crop=smart&format=pjpg&auto=webp&s=af319b09ce2735e1d2d6363bfd5869db17a5b93d", "width": 1080, "height": 607}], "variants": {}, "id": "3Tj7lEKFgGRVEsMxx0PMSMwj8cv5rZRz-MBQkLUaA1w"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "bd8d97ec-8520-11e8-9179-0e39e47dc3fc", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ab912b", "id": "hdnsn4", "is_robot_indexable": true, "report_reasons": null, "author": "the_sealed_tanker", "discussion_type": null, "num_comments": 47, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdnsn4/instagram_using_mern_stack/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://v.redd.it/wcmrxtk51f651", "subreddit_subscribers": 195438, "created_utc": 1592811632.0, "num_crossposts": 0, "media": {"reddit_video": {"fallback_url": "https://v.redd.it/wcmrxtk51f651/DASH_720?source=fallback", "height": 720, "width": 1280, "scrubber_media_url": "https://v.redd.it/wcmrxtk51f651/DASH_96", "dash_url": "https://v.redd.it/wcmrxtk51f651/DASHPlaylist.mpd?a=1595434694%2CYTE0MDk5OWI2YjRiMTI0NTcyYmEyYTE0NGNlNDIwMmI1ZWRhZGZkNWI2N2U0OTc2NWFkMDE1YjYxNDhlM2FjYQ%3D%3D&v=1&f=sd", "duration": 109, "hls_url": "https://v.redd.it/wcmrxtk51f651/HLSPlaylist.m3u8?a=1595434694%2CY2FhYjI3OWFiNmMxNDI0ZjNmMjNkMTg0ZTBhODYyN2I2N2UzNWY4OGVmNmM2MmNiODVkY2ZlMTZjY2FhZTM1YQ%3D%3D&v=1&f=sd", "is_gif": false, "transcoding_status": "completed"}}, "is_video": true}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Question is in the title but also when do you use this.props vs props. ?", "author_fullname": "t2_4j4euvqp", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Is there a simple way to understand props? I think I\u2019m over complicating it.", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-discussion", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdh80o", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.81, "author_flair_background_color": null, "subreddit_type": "public", "ups": 6, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Discussion", "can_mod_post": false, "score": 6, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592812146.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Question is in the title but also when do you use this.props vs props. ?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "01a7aefe-4b81-11ea-bbb7-0e04580e4d4d", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#73ad34", "id": "hdh80o", "is_robot_indexable": true, "report_reasons": null, "author": "Floridian173", "discussion_type": null, "num_comments": 5, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdh80o/is_there_a_simple_way_to_understand_props_i_think/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdh80o/is_there_a_simple_way_to_understand_props_i_think/", "subreddit_subscribers": 195438, "created_utc": 1592783346.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_35whz", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Redux Toolkit v1.4.0: Immer 7, \"matcher\" and \"default case\" reducers, and updated docs", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": null, "downs": 0, "thumbnail_height": 140, "top_awarded_type": null, "hide_score": true, "name": "t3_hduqm5", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 1.0, "author_flair_background_color": null, "subreddit_type": "public", "ups": 7, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": null, "can_mod_post": false, "score": 7, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/fTjkLdpiePlQmVi62anmxhnJPijZhFYIcqIdAuCFJSg.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592869563.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "github.com", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": false, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/jz05KL1avdaYLfSZBt0pxgishjIAcXA7g_D5NOnGKcE.jpg?auto=webp&s=bd9221671d7f46d592bec7651b6943ba564867eb", "width": 400, "height": 400}, "resolutions": [{"url": "https://external-preview.redd.it/jz05KL1avdaYLfSZBt0pxgishjIAcXA7g_D5NOnGKcE.jpg?width=108&crop=smart&auto=webp&s=64768385c1432db43d13b119bbb2f453d2ec9796", "width": 108, "height": 108}, {"url": "https://external-preview.redd.it/jz05KL1avdaYLfSZBt0pxgishjIAcXA7g_D5NOnGKcE.jpg?width=216&crop=smart&auto=webp&s=49d2e392c35a87f550f730fdc0cae6e7f747f474", "width": 216, "height": 216}, {"url": "https://external-preview.redd.it/jz05KL1avdaYLfSZBt0pxgishjIAcXA7g_D5NOnGKcE.jpg?width=320&crop=smart&auto=webp&s=7d4489d35f878032a60fbb15bce9f3304bac145b", "width": 320, "height": 320}], "variants": {}, "id": "3_Po3Z5eLRJm9nGz_2gliNNOJBgWg2Rl5eDoDOnHSQM"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "", "id": "hduqm5", "is_robot_indexable": true, "report_reasons": null, "author": "acemarke", "discussion_type": null, "num_comments": 4, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hduqm5/redux_toolkit_v140_immer_7_matcher_and_default/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://github.com/reduxjs/redux-toolkit/releases/tag/v1.4.0", "subreddit_subscribers": 195438, "created_utc": 1592840763.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Most projects features in books and courses aren't particularly well-engineered, so I wanted to see if you could recommend one that tells you what are all of the best practices and best solutions for creating an application that's highly scalable and maintainable.", "author_fullname": "t2_6yyhihjs", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "What are the best React courses and books?", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-discussion", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdkmxh", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.7, "author_flair_background_color": null, "subreddit_type": "public", "ups": 4, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Discussion", "can_mod_post": false, "score": 4, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592826301.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Most projects features in books and courses aren&#39;t particularly well-engineered, so I wanted to see if you could recommend one that tells you what are all of the best practices and best solutions for creating an application that&#39;s highly scalable and maintainable.</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "01a7aefe-4b81-11ea-bbb7-0e04580e4d4d", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#73ad34", "id": "hdkmxh", "is_robot_indexable": true, "report_reasons": null, "author": "torrentstorm", "discussion_type": null, "num_comments": 6, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdkmxh/what_are_the_best_react_courses_and_books/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdkmxh/what_are_the_best_react_courses_and_books/", "subreddit_subscribers": 195438, "created_utc": 1592797501.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "I'm a junior fullstack developer just landed my first job, I am thinking to fully remote in future and for that a portfolio is must to showcase what you're capable of, After going through many talented developer's portfolios from twitter. I decided to finally make one of my own. \n\n\nSo here it is, [https://farazkhan.me](https://farazkhan.me) \nPlease criticize to your heart's content, I really want to improve and make this my best frontend related work I've done. \n\n\nI realize for a single page layout using react was overkill but I really love the components based developer experience react provides, I've been doing css/sass class based animations and trying out props based styled components was an interesting experience. \n\n\nTechnical details: Made using Create React App ( Will move to Gatsby once I make up my mind about blogging). Styled using styled components and tailwindcss ( bad combination, lead to messy code which I'll clean before making it public but I like simplicity of tailwind too) \n\n\nThank you community!", "author_fullname": "t2_i3mpin8", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "My first attempt at making a personal Portfolio website with ReactJS!", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-show", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdqypx", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.84, "author_flair_background_color": null, "subreddit_type": "public", "ups": 4, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Show /r/reactjs", "can_mod_post": false, "score": 4, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592855535.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I&#39;m a junior fullstack developer just landed my first job, I am thinking to fully remote in future and for that a portfolio is must to showcase what you&#39;re capable of, After going through many talented developer&#39;s portfolios from twitter. I decided to finally make one of my own. </p>\n\n<p>So here it is, <a href=\"https://farazkhan.me\">https://farazkhan.me</a><br/>\nPlease criticize to your heart&#39;s content, I really want to improve and make this my best frontend related work I&#39;ve done. </p>\n\n<p>I realize for a single page layout using react was overkill but I really love the components based developer experience react provides, I&#39;ve been doing css/sass class based animations and trying out props based styled components was an interesting experience. </p>\n\n<p>Technical details: Made using Create React App ( Will move to Gatsby once I make up my mind about blogging). Styled using styled components and tailwindcss ( bad combination, lead to messy code which I&#39;ll clean before making it public but I like simplicity of tailwind too) </p>\n\n<p>Thank you community!</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "bd8d97ec-8520-11e8-9179-0e39e47dc3fc", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ab912b", "id": "hdqypx", "is_robot_indexable": true, "report_reasons": null, "author": "fufucupcake", "discussion_type": null, "num_comments": 7, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdqypx/my_first_attempt_at_making_a_personal_portfolio/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdqypx/my_first_attempt_at_making_a_personal_portfolio/", "subreddit_subscribers": 195438, "created_utc": 1592826735.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "For the past 2 years, I was working mainly with ReactJS and React Native. I spent a lot of time improving my skills and knowledge of React. I got so comfortable with it that now working on a side project with VueJS I am not motivated to learn VueJS. I also had some offers with Angular but didn't accept them. I enjoy programming and even without React or without JS/TS I would work with any other language/framework. \n\nBut still, I fill myself a second class compared to engineers who don't care about frameworks/languages. \n\nWhat should I do in this situation?", "author_fullname": "t2_7sr2hu", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "ReactJS handcuffs", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-discussion", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdf921", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.59, "author_flair_background_color": null, "subreddit_type": "public", "ups": 2, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Discussion", "can_mod_post": false, "score": 2, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592804748.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>For the past 2 years, I was working mainly with ReactJS and React Native. I spent a lot of time improving my skills and knowledge of React. I got so comfortable with it that now working on a side project with VueJS I am not motivated to learn VueJS. I also had some offers with Angular but didn&#39;t accept them. I enjoy programming and even without React or without JS/TS I would work with any other language/framework. </p>\n\n<p>But still, I fill myself a second class compared to engineers who don&#39;t care about frameworks/languages. </p>\n\n<p>What should I do in this situation?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "01a7aefe-4b81-11ea-bbb7-0e04580e4d4d", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#73ad34", "id": "hdf921", "is_robot_indexable": true, "report_reasons": null, "author": "dr4605", "discussion_type": null, "num_comments": 11, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdf921/reactjs_handcuffs/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdf921/reactjs_handcuffs/", "subreddit_subscribers": 195438, "created_utc": 1592775948.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_17ebtg", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "12 recipes for testing React applications using Testing Library", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-resource", "downs": 0, "thumbnail_height": 140, "top_awarded_type": null, "hide_score": false, "name": "t3_hdpeha", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.8, "author_flair_background_color": null, "subreddit_type": "public", "ups": 3, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Resource", "can_mod_post": false, "score": 3, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/mPdR8UnqbkEVY0PZrOXeVGvN55PCkAOkr-qe0dpC4iM.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592848361.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "joaoforja.com", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": false, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/MlEtli4C5dWZndRJT8nR4UOvxjIe_wSli5HLlhmF2eA.jpg?auto=webp&s=27e4f78b54ff50d2fd1677330ee7e15df8ea1e8a", "width": 151, "height": 151}, "resolutions": [{"url": "https://external-preview.redd.it/MlEtli4C5dWZndRJT8nR4UOvxjIe_wSli5HLlhmF2eA.jpg?width=108&crop=smart&auto=webp&s=ed68f65514a5ccbc8cf20d26ed387e18c3fd2de9", "width": 108, "height": 108}], "variants": {}, "id": "kRnqhDwvVVQS56nFIwIbpNREDreebW0zR2AkNp8KF9A"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "16439f02-8522-11e8-8849-0e66852ea1ba", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ffd635", "id": "hdpeha", "is_robot_indexable": true, "report_reasons": null, "author": "jnforja", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdpeha/12_recipes_for_testing_react_applications_using/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://joaoforja.com/blog/recipes-for-testing-react-apps-tl/", "subreddit_subscribers": 195438, "created_utc": 1592819561.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Hi, I'm looking to learn and use other front-end UI frameworks to speed up my front-end design.\n\n&#x200B;\n\nI have always used bootstrap but I think it's time to move on.\n\n&#x200B;\n\nPlease suggest me some, thank you!", "author_fullname": "t2_1y5c5c4p", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "What UI framework do you use?", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-discussion", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdijwk", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.67, "author_flair_background_color": null, "subreddit_type": "public", "ups": 4, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Discussion", "can_mod_post": false, "score": 4, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592817495.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Hi, I&#39;m looking to learn and use other front-end UI frameworks to speed up my front-end design.</p>\n\n<p>&#x200B;</p>\n\n<p>I have always used bootstrap but I think it&#39;s time to move on.</p>\n\n<p>&#x200B;</p>\n\n<p>Please suggest me some, thank you!</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "01a7aefe-4b81-11ea-bbb7-0e04580e4d4d", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#73ad34", "id": "hdijwk", "is_robot_indexable": true, "report_reasons": null, "author": "RevolutionaryRow0", "discussion_type": null, "num_comments": 16, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdijwk/what_ui_framework_do_you_use/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdijwk/what_ui_framework_do_you_use/", "subreddit_subscribers": 195438, "created_utc": 1592788695.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Let's suppose we have the following component hierarchy:\n\n A\n / \\\n AB C --- AF\n / \\\n D AE\n\n\nAnd suppose component A has a Context.Provider with some values and some dispatch functions.\nComponents AB and AE are using A context.\n\nThe requirement is that AE and AF components are subscribed to a part of the context, and AB is subscribed to another.\nHow do I make a structure so that context updates from AF and AE don't trigger rerenders on AB?\n\nI thought about splitting the A context state into multiple subcontexts, but looks a bit cubersome. Which would be the standard approach? A frameworkless solution would be preferable.\n\nEdited to add #Needs Help tag :S", "author_fullname": "t2_30f08agm", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "How to subscribe children to a fraction of a parent's context in a native way?", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdpl4e", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 1.0, "author_flair_background_color": null, "subreddit_type": "public", "ups": 2, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 2, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592849217.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Let&#39;s suppose we have the following component hierarchy:</p>\n\n<pre><code> A\n / \\\n AB C --- AF\n / \\\n D AE\n</code></pre>\n\n<p>And suppose component A has a Context.Provider with some values and some dispatch functions.\nComponents AB and AE are using A context.</p>\n\n<p>The requirement is that AE and AF components are subscribed to a part of the context, and AB is subscribed to another.\nHow do I make a structure so that context updates from AF and AE don&#39;t trigger rerenders on AB?</p>\n\n<p>I thought about splitting the A context state into multiple subcontexts, but looks a bit cubersome. Which would be the standard approach? A frameworkless solution would be preferable.</p>\n\n<p>Edited to add #Needs Help tag :S</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdpl4e", "is_robot_indexable": true, "report_reasons": null, "author": "crowdyriver", "discussion_type": null, "num_comments": 4, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdpl4e/how_to_subscribe_children_to_a_fraction_of_a/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdpl4e/how_to_subscribe_children_to_a_fraction_of_a/", "subreddit_subscribers": 195438, "created_utc": 1592820417.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_3ce14038", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Building simple, reusable modals in React!", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-show", "downs": 0, "thumbnail_height": 97, "top_awarded_type": null, "hide_score": false, "name": "t3_hdp4bt", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.75, "author_flair_background_color": null, "subreddit_type": "public", "ups": 2, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Show /r/reactjs", "can_mod_post": false, "score": 2, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/6UQpMlOH-IUpsGLzNWCtybyI1vEU4oEv8vMDvEtR32o.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592847015.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "medium.com", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?auto=webp&s=cf64cf151e2915770fe1dde2bdee5a465ba717b5", "width": 1121, "height": 779}, "resolutions": [{"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=108&crop=smart&auto=webp&s=3b6fb83f8fe82b97bbcc0e36f796219f9ae7eee6", "width": 108, "height": 75}, {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=216&crop=smart&auto=webp&s=6df19e643a139975236f92033c160c58aa03da09", "width": 216, "height": 150}, {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=320&crop=smart&auto=webp&s=46c740ce47ebec629ef90a379609972894b73f7b", "width": 320, "height": 222}, {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=640&crop=smart&auto=webp&s=0b95dc4a68a202a54b62d10ab6eec15e3a95c83c", "width": 640, "height": 444}, {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=960&crop=smart&auto=webp&s=b7cbc56462e2e2d7cdf2e1e3113ce82a82976ff4", "width": 960, "height": 667}, {"url": "https://external-preview.redd.it/GVpFvUckFe3038Wx46SxYjz4a_7hbvTJdup3sLvhk7g.jpg?width=1080&crop=smart&auto=webp&s=bc9a22d1dfa6bc4cc0cbbf76042a7552de6f6d2e", "width": 1080, "height": 750}], "variants": {}, "id": "zYaBrBQcxdfBskFuNmAApXzCIX8CTq4Tm72F2g0IGTg"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "bd8d97ec-8520-11e8-9179-0e39e47dc3fc", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ab912b", "id": "hdp4bt", "is_robot_indexable": true, "report_reasons": null, "author": "antpanagi", "discussion_type": null, "num_comments": 2, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdp4bt/building_simple_reusable_modals_in_react/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://medium.com/@anthonyatp/building-modals-in-react-64d92591f4b", "subreddit_subscribers": 195438, "created_utc": 1592818215.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_wya03dr", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Hey guys this is something I wrote something about writing better abstraction. Feedbacks appreciated", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-resource", "downs": 0, "thumbnail_height": 93, "top_awarded_type": null, "hide_score": false, "name": "t3_hdm296", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.67, "author_flair_background_color": null, "subreddit_type": "public", "ups": 2, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Resource", "can_mod_post": false, "score": 2, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/p28s4deQMYxTxrCqPJ0z4SFfvXUMryEUAUgnTG7enOY.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592832458.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "medium.com", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?auto=webp&s=9ce4524d53a0cf1c839dee56876f1ff27dc586a1", "width": 1200, "height": 800}, "resolutions": [{"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=108&crop=smart&auto=webp&s=213751614604bc27ed73e053260e61992b017138", "width": 108, "height": 72}, {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=216&crop=smart&auto=webp&s=f98ddd3fb9ffd306d111bd49d57cf9c8862dee7d", "width": 216, "height": 144}, {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=320&crop=smart&auto=webp&s=de1aaef526ad5303c976cf0ca35595d199b85b72", "width": 320, "height": 213}, {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=640&crop=smart&auto=webp&s=4848fea36db9a3fcdb404211a3858d2c51d4684a", "width": 640, "height": 426}, {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=960&crop=smart&auto=webp&s=e897bb802599597c5a89340b179d7f993cdfe744", "width": 960, "height": 640}, {"url": "https://external-preview.redd.it/iXhCp2UQACaCgJxn2IQm3bdqQ_LXs9XMM5a0BzEoGxo.jpg?width=1080&crop=smart&auto=webp&s=2a16512f8d7673d2c0f2a9676220ec057a37da60", "width": 1080, "height": 720}], "variants": {}, "id": "oz25E8HWK1rvLbuwlXRX4FTfPKylOsQvRbqfq7DOGY0"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "16439f02-8522-11e8-8849-0e66852ea1ba", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ffd635", "id": "hdm296", "is_robot_indexable": true, "report_reasons": null, "author": "balavishnuvj", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdm296/hey_guys_this_is_something_i_wrote_something/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://medium.com/healthify-tech/your-way-to-better-abstraction-53b165a8c54f?source=rrt", "subreddit_subscribers": 195438, "created_utc": 1592803658.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "I made a playlist covering the basics of React.js, it should be a good way to get you started, I will plan on covering more topics as well as advanced topics such as Redux. All criticism and feedback is welcomed and if anyone has questions feel free to reach out or just comment here. Hopefully some of you guys will give it a chance and enjoy the playlist. Currently there are 6 beginner episodes, and then a 35 minute video showing you how to build a simple Pokemon search application by making HTTP GET requests to PokeApi [http://pokeapi.co/](http://pokeapi.co/).\n\nThe concepts covered:\n\n\\- Dynamic Rendering (Transforming Lists into JSX Elements)\n\n\\- Conditional Rendering (Controlling what is being rendered to the DOM)\n\n\\- HTTP GET Requests (Making API Calls)\n\n\\- State (React useState & Component State)\n\n\\- Props (Passing data from parent to child component)\n\nHere is the playlist: [https://www.youtube.com/watch?v=WoMzUEP9OKw&list=PL\\_cUvD4qzbkwnUdVQDNkVN34y1DL4LdAr](https://www.youtube.com/watch?v=WoMzUEP9OKw&list=PL_cUvD4qzbkwnUdVQDNkVN34y1DL4LdAr) \n\nHope you guys enjoy it. As always all criticism and feedback is welcomed and appreciated.", "author_fullname": "t2_eporter", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Reactjs tutorials for any beginner, includes a full tutorial on implementing a project from scratch with all of the basic concepts covered", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-resource", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdd4n9", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.75, "author_flair_background_color": null, "subreddit_type": "public", "ups": 2, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Resource", "can_mod_post": false, "score": 2, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": 1592768922.0, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592797373.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I made a playlist covering the basics of React.js, it should be a good way to get you started, I will plan on covering more topics as well as advanced topics such as Redux. All criticism and feedback is welcomed and if anyone has questions feel free to reach out or just comment here. Hopefully some of you guys will give it a chance and enjoy the playlist. Currently there are 6 beginner episodes, and then a 35 minute video showing you how to build a simple Pokemon search application by making HTTP GET requests to PokeApi <a href=\"http://pokeapi.co/\">http://pokeapi.co/</a>.</p>\n\n<p>The concepts covered:</p>\n\n<p>- Dynamic Rendering (Transforming Lists into JSX Elements)</p>\n\n<p>- Conditional Rendering (Controlling what is being rendered to the DOM)</p>\n\n<p>- HTTP GET Requests (Making API Calls)</p>\n\n<p>- State (React useState &amp; Component State)</p>\n\n<p>- Props (Passing data from parent to child component)</p>\n\n<p>Here is the playlist: <a href=\"https://www.youtube.com/watch?v=WoMzUEP9OKw&amp;list=PL_cUvD4qzbkwnUdVQDNkVN34y1DL4LdAr\">https://www.youtube.com/watch?v=WoMzUEP9OKw&amp;list=PL_cUvD4qzbkwnUdVQDNkVN34y1DL4LdAr</a> </p>\n\n<p>Hope you guys enjoy it. As always all criticism and feedback is welcomed and appreciated.</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": false, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "16439f02-8522-11e8-8849-0e66852ea1ba", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ffd635", "id": "hdd4n9", "is_robot_indexable": true, "report_reasons": null, "author": "ansonplusc", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdd4n9/reactjs_tutorials_for_any_beginner_includes_a/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdd4n9/reactjs_tutorials_for_any_beginner_includes_a/", "subreddit_subscribers": 195438, "created_utc": 1592768573.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_4rpq2x6l", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "How to add automated code templates for react components", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-resource", "downs": 0, "thumbnail_height": 78, "top_awarded_type": null, "hide_score": true, "name": "t3_hdtn3a", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 1.0, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Resource", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/ONc0YhtSMpRRDEmX4uDIeGGrvcYq-u0U-NQYucwiUTs.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592865968.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "lorenzweiss.de", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?auto=webp&s=c2168d6f492cea6db03a8ffe64655854b9c99bbb", "width": 1200, "height": 675}, "resolutions": [{"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=108&crop=smart&auto=webp&s=221a07e1a99dd94e2e728912c86beac91c830d52", "width": 108, "height": 60}, {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=216&crop=smart&auto=webp&s=5a51c1fc3d300d6bc9f33e0130a3967860a0a93d", "width": 216, "height": 121}, {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=320&crop=smart&auto=webp&s=594714492c7016647a0c8977c3b35e9780a8bd2d", "width": 320, "height": 180}, {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=640&crop=smart&auto=webp&s=2f6b62dc8f1deb584703cd5cfa28001ecdbd3d98", "width": 640, "height": 360}, {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=960&crop=smart&auto=webp&s=ce1bdfa7d79f672b07139447964e802e008155ef", "width": 960, "height": 540}, {"url": "https://external-preview.redd.it/CyafbKY_1awFSY2oy5AqHArA4fd-UNjjDQy9MinrgWo.jpg?width=1080&crop=smart&auto=webp&s=72aa01ac648c705221ed67cef741fc89863cc0e2", "width": 1080, "height": 607}], "variants": {}, "id": "PRQ51MqNjzl4mz-Q1dbljMfy_owaR6PLZUNWyn2ABJQ"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "16439f02-8522-11e8-8849-0e66852ea1ba", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ffd635", "id": "hdtn3a", "is_robot_indexable": true, "report_reasons": null, "author": "Lowesz", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdtn3a/how_to_add_automated_code_templates_for_react/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.lorenzweiss.de/creating_components_with_plop/", "subreddit_subscribers": 195438, "created_utc": 1592837168.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Hey, I\u2019m planning on building an app, it\u2019s a medium scaled one, we have a rest backend. I\u2019m staying away from redux for this one. Thought of looking into apollo graphQL in the frontend in fairly new to it. Just wanted to try it out.\n\nIs it a good idea? Can I use apollo Graphql in the front end and connect to a rest api from react app, without a node implementation?\n\nI\u2019ve read about apollo-link-rest, will it work in my scenario? Can you suggest a good tutorial or blog to get started with.\n\nOr What other solutions would work here?", "author_fullname": "t2_15hy069r", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "React + graphQL + REST", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdqmxv", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 1.0, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592854044.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Hey, I\u2019m planning on building an app, it\u2019s a medium scaled one, we have a rest backend. I\u2019m staying away from redux for this one. Thought of looking into apollo graphQL in the frontend in fairly new to it. Just wanted to try it out.</p>\n\n<p>Is it a good idea? Can I use apollo Graphql in the front end and connect to a rest api from react app, without a node implementation?</p>\n\n<p>I\u2019ve read about apollo-link-rest, will it work in my scenario? Can you suggest a good tutorial or blog to get started with.</p>\n\n<p>Or What other solutions would work here?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdqmxv", "is_robot_indexable": true, "report_reasons": null, "author": "zeropurpose", "discussion_type": null, "num_comments": 2, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdqmxv/react_graphql_rest/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdqmxv/react_graphql_rest/", "subreddit_subscribers": 195438, "created_utc": 1592825244.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Hi /r/reactjs,\n\nI'm looking for good resources on SSR with React in conjunction with expressjs.\n\nI'm trying to integrate React into an existing expressjs app while getting all the goodies (HMR, etc) and need help with the setup.\n\nMigrating to a framework like NextJS or Gatsby is not an option.\n\nThanks in advance,\n\n/u/ohadaldi", "author_fullname": "t2_6namv4uz", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Help with React SSR with ExpressJS", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdptem", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 1.0, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592850290.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Hi <a href=\"/r/reactjs\">/r/reactjs</a>,</p>\n\n<p>I&#39;m looking for good resources on SSR with React in conjunction with expressjs.</p>\n\n<p>I&#39;m trying to integrate React into an existing expressjs app while getting all the goodies (HMR, etc) and need help with the setup.</p>\n\n<p>Migrating to a framework like NextJS or Gatsby is not an option.</p>\n\n<p>Thanks in advance,</p>\n\n<p><a href=\"/u/ohadaldi\">/u/ohadaldi</a></p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdptem", "is_robot_indexable": true, "report_reasons": null, "author": "ohadaldi", "discussion_type": null, "num_comments": 2, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdptem/help_with_react_ssr_with_expressjs/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdptem/help_with_react_ssr_with_expressjs/", "subreddit_subscribers": 195438, "created_utc": 1592821490.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "An app to demonstrate the usage of Typescript with React. [https://github.com/tsl143/react-typescript-app](https://github.com/tsl143/react-typescript-app)", "author_fullname": "t2_go2ti", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "A demo react-typescript app", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": null, "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdosvm", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": null, "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "self", "content_categories": null, "is_self": true, "mod_note": null, "created": 1592845454.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>An app to demonstrate the usage of Typescript with React. <a href=\"https://github.com/tsl143/react-typescript-app\">https://github.com/tsl143/react-typescript-app</a></p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/dx1_Vp758cY-hizd93qF0E7MevGvnxsh2WOQacmRoIg.jpg?auto=webp&s=2a92213c00f3a86e62b8c7155ff3ad43161ce6d1", "width": 800, "height": 480}, "resolutions": [{"url": "https://external-preview.redd.it/dx1_Vp758cY-hizd93qF0E7MevGvnxsh2WOQacmRoIg.jpg?width=108&crop=smart&auto=webp&s=ae26bae805f001389ce40dba4f5634991cc56a21", "width": 108, "height": 64}, {"url": "https://external-preview.redd.it/dx1_Vp758cY-hizd93qF0E7MevGvnxsh2WOQacmRoIg.jpg?width=216&crop=smart&auto=webp&s=1f0f97db6808fe588e42bb00cb833dc3fd05023b", "width": 216, "height": 129}, {"url": "https://external-preview.redd.it/dx1_Vp758cY-hizd93qF0E7MevGvnxsh2WOQacmRoIg.jpg?width=320&crop=smart&auto=webp&s=f3092d1e0234dc5ea52dc1401930438b3422a9a5", "width": 320, "height": 192}, {"url": "https://external-preview.redd.it/dx1_Vp758cY-hizd93qF0E7MevGvnxsh2WOQacmRoIg.jpg?width=640&crop=smart&auto=webp&s=4154e749ff521bf505ca97de2a1cef92d939c65e", "width": 640, "height": 384}], "variants": {}, "id": "D-tMgVn3Q2X9turlI-1yJHBEKJC4DDtJRVLI0QY_Y1s"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "", "id": "hdosvm", "is_robot_indexable": true, "report_reasons": null, "author": "tsl143", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdosvm/a_demo_reacttypescript_app/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdosvm/a_demo_reacttypescript_app/", "subreddit_subscribers": 195438, "created_utc": 1592816654.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_tnqp8wb", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Build A Simple Carousel Component In ReactJS", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-show", "downs": 0, "thumbnail_height": 105, "top_awarded_type": null, "hide_score": false, "name": "t3_hdo1eb", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {"content": "<iframe width=\"600\" height=\"338\" src=\"https://www.youtube.com/embed/eBKcGAhkZUI?feature=oembed&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "width": 600, "scrolling": false, "height": 338}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": {"type": "youtube.com", "oembed": {"provider_url": "https://www.youtube.com/", "version": "1.0", "title": "Build A Simple Carousel Component In ReactJS", "type": "video", "thumbnail_width": 480, "height": 338, "width": 600, "html": "<iframe width=\"600\" height=\"338\" src=\"https://www.youtube.com/embed/eBKcGAhkZUI?feature=oembed&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "author_name": "Okay Dexter", "provider_name": "YouTube", "thumbnail_url": "https://i.ytimg.com/vi/eBKcGAhkZUI/hqdefault.jpg", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCsNLXeSOdlcW5-bJ12PlxSw"}}, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {"content": "<iframe width=\"600\" height=\"338\" src=\"https://www.youtube.com/embed/eBKcGAhkZUI?feature=oembed&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "width": 600, "scrolling": false, "media_domain_url": "https://www.redditmedia.com/mediaembed/hdo1eb", "height": 338}, "link_flair_text": "Show /r/reactjs", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/WA1FYBKqFxyCCnyy_76bStNlUq56D3jVHSwll4bFPjI.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "rich:video", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592841645.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "youtu.be", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/mnsTvM7O3GOWdgeLwGFAAnHFlBqRUaXrSaNZxMGes9Y.jpg?auto=webp&s=0666c2f87b0027a956adece74fd40812ea84e6b4", "width": 480, "height": 360}, "resolutions": [{"url": "https://external-preview.redd.it/mnsTvM7O3GOWdgeLwGFAAnHFlBqRUaXrSaNZxMGes9Y.jpg?width=108&crop=smart&auto=webp&s=5d4e90d112f93623756f7a7b02344597c4abd9e4", "width": 108, "height": 81}, {"url": "https://external-preview.redd.it/mnsTvM7O3GOWdgeLwGFAAnHFlBqRUaXrSaNZxMGes9Y.jpg?width=216&crop=smart&auto=webp&s=60e2629321fd0eeddb4186ede0373104e4d53c02", "width": 216, "height": 162}, {"url": "https://external-preview.redd.it/mnsTvM7O3GOWdgeLwGFAAnHFlBqRUaXrSaNZxMGes9Y.jpg?width=320&crop=smart&auto=webp&s=155409147667afa10e2be30c3fbd2619fcf087d4", "width": 320, "height": 240}], "variants": {}, "id": "xjlyPRnSuhpVgpoQnxV4AwBfZr7bN5CSs4X5JsV4wE8"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "bd8d97ec-8520-11e8-9179-0e39e47dc3fc", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ab912b", "id": "hdo1eb", "is_robot_indexable": true, "report_reasons": null, "author": "okaydexter", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdo1eb/build_a_simple_carousel_component_in_reactjs/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://youtu.be/eBKcGAhkZUI", "subreddit_subscribers": 195438, "created_utc": 1592812845.0, "num_crossposts": 0, "media": {"type": "youtube.com", "oembed": {"provider_url": "https://www.youtube.com/", "version": "1.0", "title": "Build A Simple Carousel Component In ReactJS", "type": "video", "thumbnail_width": 480, "height": 338, "width": 600, "html": "<iframe width=\"600\" height=\"338\" src=\"https://www.youtube.com/embed/eBKcGAhkZUI?feature=oembed&enablejsapi=1\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "author_name": "Okay Dexter", "provider_name": "YouTube", "thumbnail_url": "https://i.ytimg.com/vi/eBKcGAhkZUI/hqdefault.jpg", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCsNLXeSOdlcW5-bJ12PlxSw"}}, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "I'm very new to React and I'm looking to get a little guidance. Apologies if this is the wrong sub for this.\n\nI have a goal to build a single page learning application where a user will go through a \"course\" that has different types of interactions. For example, a user will watch a video, press next, take a quiz, press next, watch another video, press next, take a different type of quiz, and so on. For extra clarity, when a user presses 'next' after say watching a video, the video portion would be removed from the page and a quiz would be loaded in its spot.\n\nIn my situation, I may have up to 20 or 30 different types of quizzes/videos that are laid out differently or function in their own unique way. I'm unable to genericize a lot of this due to project requirements.\n\nIs React the right tool for something like this? How would I go about building this with React in such a way that I can traverse through different components dynamically?", "author_fullname": "t2_mq3nn", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Looking for guidance on how to develop an elearning app with lots of different components.", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdmm5a", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 0.67, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592834913.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I&#39;m very new to React and I&#39;m looking to get a little guidance. Apologies if this is the wrong sub for this.</p>\n\n<p>I have a goal to build a single page learning application where a user will go through a &quot;course&quot; that has different types of interactions. For example, a user will watch a video, press next, take a quiz, press next, watch another video, press next, take a different type of quiz, and so on. For extra clarity, when a user presses &#39;next&#39; after say watching a video, the video portion would be removed from the page and a quiz would be loaded in its spot.</p>\n\n<p>In my situation, I may have up to 20 or 30 different types of quizzes/videos that are laid out differently or function in their own unique way. I&#39;m unable to genericize a lot of this due to project requirements.</p>\n\n<p>Is React the right tool for something like this? How would I go about building this with React in such a way that I can traverse through different components dynamically?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdmm5a", "is_robot_indexable": true, "report_reasons": null, "author": "szithlu", "discussion_type": null, "num_comments": 1, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdmm5a/looking_for_guidance_on_how_to_develop_an/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdmm5a/looking_for_guidance_on_how_to_develop_an/", "subreddit_subscribers": 195438, "created_utc": 1592806113.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "I\u2019ve been fascinated by strange attractors ever since first discovering them. It boggles my mind that such complex and varied shapes could come from such simple equations.\n\nWebsite: [https://www.chaosattractors.com/](https://www.chaosattractors.com/)\n\nGithub: [https://github.com/nicogreenarry/strange-attractors-ror](https://github.com/nicogreenarry/strange-attractors-ror) \n\nBeyond being mathematically interesting, many of them are also beautiful. When I first learned about them, I was learning to code for the first time, in college, so I built a simple Matlab script that would generate random sets of coefficients to use in the equation and discard sets that created trivially boring attractors. The app would display the attractors that passed that filter, and allow me to save ones I found pretty or interesting.\n\nYears later, I\u2019m revisiting and rewriting that project from scratch. I\u2019m inspired to share the beauty of strange attractors with everyone, and create better tools for exploring their variants.", "author_fullname": "t2_leijn", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Math/art app for discovering new Strange Attractors", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-show", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdha8d", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.6, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Show /r/reactjs", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592812381.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>I\u2019ve been fascinated by strange attractors ever since first discovering them. It boggles my mind that such complex and varied shapes could come from such simple equations.</p>\n\n<p>Website: <a href=\"https://www.chaosattractors.com/\">https://www.chaosattractors.com/</a></p>\n\n<p>Github: <a href=\"https://github.com/nicogreenarry/strange-attractors-ror\">https://github.com/nicogreenarry/strange-attractors-ror</a> </p>\n\n<p>Beyond being mathematically interesting, many of them are also beautiful. When I first learned about them, I was learning to code for the first time, in college, so I built a simple Matlab script that would generate random sets of coefficients to use in the equation and discard sets that created trivially boring attractors. The app would display the attractors that passed that filter, and allow me to save ones I found pretty or interesting.</p>\n\n<p>Years later, I\u2019m revisiting and rewriting that project from scratch. I\u2019m inspired to share the beauty of strange attractors with everyone, and create better tools for exploring their variants.</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "bd8d97ec-8520-11e8-9179-0e39e47dc3fc", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ab912b", "id": "hdha8d", "is_robot_indexable": true, "report_reasons": null, "author": "comeweintounity", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdha8d/mathart_app_for_discovering_new_strange_attractors/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdha8d/mathart_app_for_discovering_new_strange_attractors/", "subreddit_subscribers": 195438, "created_utc": 1592783581.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Currently the site loads each page independently, which is great. But what about loading the entire site on the initial load. Is that possible, and if so, what's the best way to implement this?", "author_fullname": "t2_nd4g5ov", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "How do you load the entire site on initial load with NextJS??", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdcixa", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592795303.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Currently the site loads each page independently, which is great. But what about loading the entire site on the initial load. Is that possible, and if so, what&#39;s the best way to implement this?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdcixa", "is_robot_indexable": true, "report_reasons": null, "author": "leafyshark", "discussion_type": null, "num_comments": 5, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdcixa/how_do_you_load_the_entire_site_on_initial_load/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdcixa/how_do_you_load_the_entire_site_on_initial_load/", "subreddit_subscribers": 195438, "created_utc": 1592766503.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Not sure if Im not searching around well enough ,but I want to make a \"real time\" feature visualizer for a computer vision model\n\nI have a basic app set up the captures and image and returns the visualization on a per captured frame basis but I want to make this live to be a bit cooler and understandable.\n\nif anyone can point me in the right direction on how to get the users webcam stream data and send it over a socketio connection that would be awesome!", "author_fullname": "t2_6yx14rqp", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Any advice for sending a react-webcam video stream over socketio (to flask socketio)?", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdb7zo", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592790846.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Not sure if Im not searching around well enough ,but I want to make a &quot;real time&quot; feature visualizer for a computer vision model</p>\n\n<p>I have a basic app set up the captures and image and returns the visualization on a per captured frame basis but I want to make this live to be a bit cooler and understandable.</p>\n\n<p>if anyone can point me in the right direction on how to get the users webcam stream data and send it over a socketio connection that would be awesome!</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdb7zo", "is_robot_indexable": true, "report_reasons": null, "author": "reactingwebcam", "discussion_type": null, "num_comments": 1, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdb7zo/any_advice_for_sending_a_reactwebcam_video_stream/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdb7zo/any_advice_for_sending_a_reactwebcam_video_stream/", "subreddit_subscribers": 195438, "created_utc": 1592762046.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "", "author_fullname": "t2_hh2aa", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Easy CI setup for react app using Gitlab in 2 steps - Coding is Love", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-resource", "downs": 0, "thumbnail_height": 78, "top_awarded_type": null, "hide_score": false, "name": "t3_hdavqb", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.57, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": 140, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Resource", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "https://b.thumbs.redditmedia.com/I2nfnvjnzwOALTLHrAjhaMDb7YoNDmZzGK88M5osj3w.jpg", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "post_hint": "link", "content_categories": null, "is_self": false, "mod_note": null, "created": 1592789635.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "codingislove.com", "allow_live_comments": false, "selftext_html": null, "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "preview": {"images": [{"source": {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?auto=webp&s=f28b5d7ca17b09ae15004eb27da7e0c31689aecb", "width": 1280, "height": 720}, "resolutions": [{"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=108&crop=smart&auto=webp&s=d911c248417ee278ab55aabae11223f90557a46b", "width": 108, "height": 60}, {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=216&crop=smart&auto=webp&s=904b1b6ddbd57bc660b04b070febdcda97948110", "width": 216, "height": 121}, {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=320&crop=smart&auto=webp&s=9e0aa6736e886fbaeff388eb8ae3bf38c6ad8dd9", "width": 320, "height": 180}, {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=640&crop=smart&auto=webp&s=6fe410e94069c93643fc4a3a4c42524643dc2c67", "width": 640, "height": 360}, {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=960&crop=smart&auto=webp&s=9963fbecae7319fadef84af4600619c1feeacf36", "width": 960, "height": 540}, {"url": "https://external-preview.redd.it/wtzSWJ2DklBqlIAXcad5Ddz9DtI3y9oDNmAhBasjPWY.jpg?width=1080&crop=smart&auto=webp&s=19072b77ed42e4b5eadea801210748a27d81cd71", "width": 1080, "height": 607}], "variants": {}, "id": "AI5bzVGx1weZyGD-1ACMQTWif_dnyQz79be407v5Y5o"}], "enabled": false}, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "16439f02-8522-11e8-8849-0e66852ea1ba", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#ffd635", "id": "hdavqb", "is_robot_indexable": true, "report_reasons": null, "author": "ranjithkumar8352", "discussion_type": null, "num_comments": 3, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdavqb/easy_ci_setup_for_react_app_using_gitlab_in_2/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://codingislove.com/ci-setup-react-gitlab/", "subreddit_subscribers": 195438, "created_utc": 1592760835.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Fetching config from server in Index.js\n\nHey /r/reactjs \n\nI'm new to React, and I'm wondering if it's a bad idea to do something like this to fetch config prior to the app loading?\n\nReason for not using ENV vars is because I want to host on S3 and Cloudfront.\n\nI'm also wondering what alternative options there are to managing these variables rather than a config endpoint\n\nTIA\n\n ReactDOM.render(\n <React.StrictMode>\n <Spinner />\n </React.StrictMode>,\n document.getElementById(\"root\")\n );\n\n (async () => {\n const res = await fetch(`${API_URL}/config`);\n const json = await res.json();\n const data = JSON.parse(json);\n\n Amplify.configure({\n Auth: {\n identityPoolId: data.identityPoolID,\n userPoolId: data.userPoolID,\n region: data.region,\n userPoolWebClientId: data.userPoolWebClientID,\n authenticationFlowType: \"USER_PASSWORD_AUTH\",\n mandatorySignIn: false,\n },\n API: {\n graphql_endpoint: `${API_URL}/graphql`,\n graphql_endpoint_iam_region: data.region,\n },\n });\n\n ReactDOM.render(\n <React.StrictMode>\n <Provider store={configureStore()}>\n <Router>\n <App />\n </Router>\n </Provider>\n </React.StrictMode>,\n document.getElementById(\"root\")\n );\n })();", "author_fullname": "t2_13ukh8", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Managing Config Variables", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-discussion", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdamvx", "quarantine": false, "link_flair_text_color": "dark", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Discussion", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": 1592760397.0, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592788775.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Fetching config from server in Index.js</p>\n\n<p>Hey <a href=\"/r/reactjs\">/r/reactjs</a> </p>\n\n<p>I&#39;m new to React, and I&#39;m wondering if it&#39;s a bad idea to do something like this to fetch config prior to the app loading?</p>\n\n<p>Reason for not using ENV vars is because I want to host on S3 and Cloudfront.</p>\n\n<p>I&#39;m also wondering what alternative options there are to managing these variables rather than a config endpoint</p>\n\n<p>TIA</p>\n\n<pre><code>ReactDOM.render(\n &lt;React.StrictMode&gt;\n &lt;Spinner /&gt;\n &lt;/React.StrictMode&gt;,\n document.getElementById(&quot;root&quot;)\n);\n\n(async () =&gt; {\n const res = await fetch(`${API_URL}/config`);\n const json = await res.json();\n const data = JSON.parse(json);\n\n Amplify.configure({\n Auth: {\n identityPoolId: data.identityPoolID,\n userPoolId: data.userPoolID,\n region: data.region,\n userPoolWebClientId: data.userPoolWebClientID,\n authenticationFlowType: &quot;USER_PASSWORD_AUTH&quot;,\n mandatorySignIn: false,\n },\n API: {\n graphql_endpoint: `${API_URL}/graphql`,\n graphql_endpoint_iam_region: data.region,\n },\n });\n\n ReactDOM.render(\n &lt;React.StrictMode&gt;\n &lt;Provider store={configureStore()}&gt;\n &lt;Router&gt;\n &lt;App /&gt;\n &lt;/Router&gt;\n &lt;/Provider&gt;\n &lt;/React.StrictMode&gt;,\n document.getElementById(&quot;root&quot;)\n );\n})();\n</code></pre>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "01a7aefe-4b81-11ea-bbb7-0e04580e4d4d", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#73ad34", "id": "hdamvx", "is_robot_indexable": true, "report_reasons": null, "author": "jasperchess", "discussion_type": null, "num_comments": 0, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdamvx/managing_config_variables/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdamvx/managing_config_variables/", "subreddit_subscribers": 195438, "created_utc": 1592759975.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "Hello, i have deployed my nodejs and reactjs app on ec2 aws. i am using my main backend express/node server to serve reactjs application. \n\n\nright now i have to build react app copy paste build folder to backend folder (This causes an extra commit on backend for frontend builds) \n\n\nPreviously i tried **serve** module but with it application crashed if user tries to visit any route other than home route. so i started looking into alternatives and nodejs server to serve react app looked best at that time (there was also some nginx configuration involved). \n\n\nbut now i am looking into better ways an react application can be served. \n\n\nThank you for reading.", "author_fullname": "t2_ihyk1b0", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "Best way to run reactjs app in production", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdaeka", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": false, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592787976.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>Hello, i have deployed my nodejs and reactjs app on ec2 aws. i am using my main backend express/node server to serve reactjs application. </p>\n\n<p>right now i have to build react app copy paste build folder to backend folder (This causes an extra commit on backend for frontend builds) </p>\n\n<p>Previously i tried <strong>serve</strong> module but with it application crashed if user tries to visit any route other than home route. so i started looking into alternatives and nodejs server to serve react app looked best at that time (there was also some nginx configuration involved). </p>\n\n<p>but now i am looking into better ways an react application can be served. </p>\n\n<p>Thank you for reading.</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdaeka", "is_robot_indexable": true, "report_reasons": null, "author": "fazi711", "discussion_type": null, "num_comments": 4, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdaeka/best_way_to_run_reactjs_app_in_production/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdaeka/best_way_to_run_reactjs_app_in_production/", "subreddit_subscribers": 195438, "created_utc": 1592759176.0, "num_crossposts": 0, "media": null, "is_video": false}}, {"kind": "t3", "data": {"approved_at_utc": null, "subreddit": "reactjs", "selftext": "My friend and I want to make a ERP system and one of the fancy requirements from my designer friend is to include dynamic tabs. When the user click on a new link on the sidebar, he will be sent to the existing tab if the link has already been opened, or create a new tab. The tabs need to persist internal states, so I was thinking non-unmounting elements, or creating (registering) redux slices dynamically. But there are still tons of questions in my head.\n\nI start to have some simple idea today but I feel like I need more than one or two weeks (or more) to implement it. And I feel like reinventing the wheel because I almost started to clone the whole react-router packages and edit it to be my code.\n\nIs there any existing tutorials/packages that provide dynamic tabs in react?", "author_fullname": "t2_hijr8", "saved": false, "mod_reason_title": null, "gilded": 0, "clicked": false, "title": "What is the best way to implement a dashboard with dynamic, non-unmounting tabs?", "link_flair_richtext": [], "subreddit_name_prefixed": "r/reactjs", "hidden": false, "pwls": 6, "link_flair_css_class": "link-flair-needs-help", "downs": 0, "thumbnail_height": null, "top_awarded_type": null, "hide_score": false, "name": "t3_hdad5j", "quarantine": false, "link_flair_text_color": "light", "upvote_ratio": 0.66, "author_flair_background_color": null, "subreddit_type": "public", "ups": 1, "total_awards_received": 0, "media_embed": {}, "thumbnail_width": null, "author_flair_template_id": null, "is_original_content": false, "user_reports": [], "secure_media": null, "is_reddit_media_domain": false, "is_meta": false, "category": null, "secure_media_embed": {}, "link_flair_text": "Needs Help", "can_mod_post": false, "score": 1, "approved_by": null, "author_premium": false, "thumbnail": "self", "edited": 1592759375.0, "author_flair_css_class": null, "author_flair_richtext": [], "gildings": {}, "content_categories": null, "is_self": true, "mod_note": null, "created": 1592787848.0, "link_flair_type": "text", "wls": 6, "removed_by_category": null, "banned_by": null, "author_flair_type": "text", "domain": "self.reactjs", "allow_live_comments": false, "selftext_html": "<!-- SC_OFF --><div class=\"md\"><p>My friend and I want to make a ERP system and one of the fancy requirements from my designer friend is to include dynamic tabs. When the user click on a new link on the sidebar, he will be sent to the existing tab if the link has already been opened, or create a new tab. The tabs need to persist internal states, so I was thinking non-unmounting elements, or creating (registering) redux slices dynamically. But there are still tons of questions in my head.</p>\n\n<p>I start to have some simple idea today but I feel like I need more than one or two weeks (or more) to implement it. And I feel like reinventing the wheel because I almost started to clone the whole react-router packages and edit it to be my code.</p>\n\n<p>Is there any existing tutorials/packages that provide dynamic tabs in react?</p>\n</div><!-- SC_ON -->", "likes": null, "suggested_sort": "confidence", "banned_at_utc": null, "view_count": null, "archived": false, "no_follow": true, "is_crosspostable": false, "pinned": false, "over_18": false, "all_awardings": [], "awarders": [], "media_only": false, "link_flair_template_id": "c808a3ce-8520-11e8-b3d4-0e03aa55af0c", "can_gild": false, "spoiler": false, "locked": false, "author_flair_text": null, "treatment_tags": [], "visited": false, "removed_by": null, "num_reports": null, "distinguished": null, "subreddit_id": "t5_2zldd", "mod_reason_by": null, "removal_reason": null, "link_flair_background_color": "#b8001f", "id": "hdad5j", "is_robot_indexable": true, "report_reasons": null, "author": "hinsxd", "discussion_type": null, "num_comments": 1, "send_replies": true, "whitelist_status": "all_ads", "contest_mode": false, "mod_reports": [], "author_patreon_flair": false, "author_flair_text_color": null, "permalink": "/r/reactjs/comments/hdad5j/what_is_the_best_way_to_implement_a_dashboard/", "parent_whitelist_status": "all_ads", "stickied": false, "url": "https://www.reddit.com/r/reactjs/comments/hdad5j/what_is_the_best_way_to_implement_a_dashboard/", "subreddit_subscribers": 195438, "created_utc": 1592759048.0, "num_crossposts": 0, "media": null, "is_video": false}}], "after": "t3_hdad5j", "before": null}} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 24a7ad8..a2c5d3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3272,6 +3272,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +cross-fetch@^3.0.4: + version "3.0.5" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.5.tgz#2739d2981892e7ab488a7ad03b92df2816e03f4c" + integrity sha512-FFLcLtraisj5eteosnX1gf01qYDCOc4fDy0+euOt8Kn9YBY2NtXL/pCoYPavw24NIQkQqm5ZOLsGD5Zzj0gyew== + dependencies: + node-fetch "2.6.0" + cross-spawn@7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.1.tgz#0ab56286e0f7c24e153d04cc2aa027e43a9a5d14" @@ -5934,6 +5941,14 @@ jest-environment-node@^24.9.0: jest-mock "^24.9.0" jest-util "^24.9.0" +jest-fetch-mock@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/jest-fetch-mock/-/jest-fetch-mock-3.0.3.tgz#31749c456ae27b8919d69824f1c2bd85fe0a1f3b" + integrity sha512-Ux1nWprtLrdrH4XwE7O7InRY6psIi3GOsqNESJgMJ+M5cv4A8Lh7SN9d2V2kKRZ8ebAfcd1LNyZguAOb6JiDqw== + dependencies: + cross-fetch "^3.0.4" + promise-polyfill "^8.1.3" + jest-get-type@^24.9.0: version "24.9.0" resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e" @@ -7023,6 +7038,11 @@ no-case@^3.0.3: lower-case "^2.0.1" tslib "^1.10.0" +node-fetch@2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd" + integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA== + node-forge@0.9.0: version "0.9.0" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579" @@ -8472,6 +8492,11 @@ promise-inflight@^1.0.1: resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3" integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM= +promise-polyfill@^8.1.3: + version "8.1.3" + resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-8.1.3.tgz#8c99b3cf53f3a91c68226ffde7bde81d7f904116" + integrity sha512-MG5r82wBzh7pSKDRa9y+vllNHz3e3d4CNj1PQE4BQYxLme0gKYYBm9YENq+UkEikyZ0XbiGWxYlVw3Rl9O/U8g== + promise@^8.0.3: version "8.1.0" resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"