{"id":7074,"date":"2020-10-09T09:58:55","date_gmt":"2020-10-09T07:58:55","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=7074"},"modified":"2020-10-09T09:58:55","modified_gmt":"2020-10-09T07:58:55","slug":"reactjs-getting-started","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/10\/09\/reactjs-getting-started\/","title":{"rendered":"ReactJS | Getting Started"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Readings<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/reactjs.org\/docs\">The official docs<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/egghead.io\/courses\/the-beginner-s-guide-to-reactjs\">The Beginner\u2019s Guide to ReactJS<\/a>\u00a0by\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/u\/db72389e89d8?source=post_page-----5d0303b7ffc1--------------------------------\" target=\"_blank\">Kent C. Dodds<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.freecodecamp.org\/news\/all-the-fundamental-react-js-concepts-jammed-into-this-single-medium-article-c83f9b53eac2\/\">Fundamentals of React<\/a>\u00a0by\u00a0<a href=\"https:\/\/www.freecodecamp.org\/news\/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6\/undefined\">Samer Buna<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/react.holiday\/\">React Holiday<\/a>\u00a0by\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/u\/49e1066348ce?source=post_page-----5d0303b7ffc1--------------------------------\" target=\"_blank\">michael chan<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-ea8fc8d9-980f-44db-81f4-786ab30eaaff\"><li><a href=\"https:\/\/www.reactenlightenment.com\/\">React Enlightenment<\/a>\u00a0by\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/u\/c54dd6160844?source=post_page-----5d0303b7ffc1--------------------------------\" target=\"_blank\">cody lindley<\/a>\u00a0<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-3906dde5-a093-4587-8340-2658283ebc1e\"><li><a href=\"https:\/\/egghead.io\/courses\/advanced-react-component-patterns\">Advanced React Component Patterns<\/a>\u00a0by\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/u\/db72389e89d8?source=post_page-----5d0303b7ffc1--------------------------------\" target=\"_blank\">Kent C. Dodds<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/reactpatterns.com\/\">React Patterns<\/a>\u00a0by\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/u\/49e1066348ce?source=post_page-----5d0303b7ffc1--------------------------------\" target=\"_blank\">michael chan<\/a><\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.freecodecamp.org\/news\/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6\/\">Learning React &#8211; Roadmap from Scratch to Advanced<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/jscomplete.com\/learn\/complete-intro-react#top\" data-type=\"URL\" data-id=\"https:\/\/jscomplete.com\/learn\/complete-intro-react#top\" target=\"_blank\">Complete Introduction to React<\/a><\/li><li><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learning Path<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Fundamentals Props and State<ul><li>Create React App<\/li><li>JSX<\/li><li>Function Components<\/li><li>Class Components<\/li><li>useState and useEffect Hooks<\/li><li>setState and Component Lifecycle Methods<\/li><li>Conditional Rendering<\/li><li>Lists and Keys<\/li><li>Building Simple Forms<\/li><\/ul><\/li><li>Advanced Topics<ul><li>Hooks<ul><li>useContext<\/li><li>useReducer<\/li><li>useRef<\/li><li>useMemo<\/li><li>useCallback<\/li><li>Custom Hooks<\/li><\/ul><\/li><li>Context<\/li><li>Higher Order Components<\/li><li>Render Props<\/li><li>Refs<\/li><li>Error Boundaries<\/li><li>Portals<\/li><li>HTTP Requests<ul><li>GET<\/li><li>POST<\/li><\/ul><\/li><\/ul><\/li><li>Ecosystem<ul><li>State Management <ul><li>Redux\/ Mobx<\/li><\/ul><ul><li>Apollo Client<\/li><\/ul><\/li><li>Routing<ul><li>React Router<\/li><\/ul><\/li><li>Styling<ul><li>Styled Components\/ Emotion<\/li><li>Tailwind CSS<\/li><li>Chakra UI \/ Material UI \/ Ant Design<\/li><\/ul><\/li><li>Forms<ul><li>Formik<\/li><li>React Hook Form<\/li><\/ul><\/li><li>Testing<ul><li>Jest + React Testing Library<\/li><li>Cypress<\/li><\/ul><\/li><li>Misc<ul><li>TypeScript<\/li><li>React i18Next<\/li><li>Storybook<\/li><li>Firebase<\/li><li>Practical React Libraries<\/li><\/ul><\/li><li>Next Steps<ul><li>Gatsby<\/li><li>Next.js<\/li><li>React Native<\/li><\/ul><\/li><\/ul><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Topics<\/h3>\n\n\n\n<div class=\"wp-block-advgb-list\"><ul class=\"advgblist-c314c28c-fd5e-4f17-aa1c-bd6a752a08a6\"><li>Create React App<\/li><li>Functional Components<\/li><li>Class Components<\/li><li>JSX<\/li><li>Props And State<\/li><li>useState and useEffect Hooks<\/li><li>setState and Component Lifecycle Methods<\/li><li>Conditional Rendering<\/li><li>Lists and Keys<\/li><li>Building Simple Forms<\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Get Started<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Create App<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Run the following commands to create a new React Native project called &#8220;app-getting-started&#8221;:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx create-react-app  app-getting-started\ncd app-getting-started<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Start App<\/h3>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm start<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Readings The official docs The Beginner\u2019s Guide to ReactJS\u00a0by\u00a0Kent C. Dodds Fundamentals of React\u00a0by\u00a0Samer Buna React Holiday\u00a0by\u00a0michael chan React Enlightenment\u00a0by\u00a0cody lindley\u00a0 Advanced React Component Patterns\u00a0by\u00a0Kent C. Dodds React Patterns\u00a0by\u00a0michael chan Learning React &#8211; Roadmap from Scratch to Advanced Complete Introduction to React Learning Path Fundamentals Props and State Create React App JSX Function Components Class Components useState and useEffect Hooks setState and Component Lifecycle Methods Conditional Rendering Lists and Keys Building Simple Forms Advanced Topics Hooks useContext useReducer useRef useMemo useCallback Custom Hooks Context Higher Order Components Render Props Refs Error Boundaries Portals HTTP Requests GET POST Ecosystem State Management Redux\/ [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[66,67],"tags":[],"class_list":["post-7074","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-reactjs"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7074","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7074"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7074\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}