One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite a while now. I\u2019m not sure how many things there will be to write about React. But I assume there will be a few weeks with React related content.<\/p>\n
I\u2019m going to start with basics and then move on to more advanced topics and try to cover the different aspects one have to consider writing an React app. This will also be an excellent opportunity for me to learn the various parts of React I personally don\u2019t use.<\/p>\n
The goal at the end of this small or large series of posts will be that you know everything you need to know to build from small apps to large apps; with or without server-side rendering.<\/p>\n
When I started to learn react I thought it was a challenge. Not because react itself is difficult, but because there was a lot of stuff surrounding it one had to know. It kind of reminded me about when I started to do web development back in the stone ages. \u201cYou need to know html, css, JavaScript, php, mysql\u201d. And I just understood that I should learn all of it, without understanding what everything was or why I had to learn it.<\/p>\n
The short version is that the react community is very good for better and worse to use the bleeding edge of new JavaScript features, even when they are in drafts stages. But I wasn\u2019t familiar with all of the new ES6 features when I started to learn React. And when you finally understood what was going on, then you had to learn how to get webpack or browserify up and running. Looking through a million different config files trying to find a config that works.<\/p>\n
What I recommend that you do today, if you want to learn React is to start with \u201ccreate-react-app\u201d. It is a very good package for starting a new react app without having to worry about anything but react. You might still want to learn how to configure webpack, but I don\u2019t think you need so unless you have some particular needs or have a larger app. I have deployed smaller apps into production using create-react-app.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do…<\/p>\n","protected":false},"author":7,"featured_media":3183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[93],"tags":[95,94],"powerkit_post_featured":[],"class_list":{"0":"post-3182","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-create-react-app","9":"tag-react"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Pk","jetpack-related-posts":[{"id":3194,"url":"https:\/\/code4developers.com\/react-hello-world-and-jsx\/","url_meta":{"origin":3182,"position":0},"title":"React: Hello World and JSX","author":"Arif Khoja","date":"January 8, 2018","format":false,"excerpt":"This is a typical Hello World implementation in React in JSX file. It shows one of two ways you can write components, and how you pass data to a components. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return (\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3189,"url":"https:\/\/code4developers.com\/what-react-is-and-how-it-is-different\/","url_meta":{"origin":3182,"position":1},"title":"What React is, and how it is different.","author":"Arif Khoja","date":"January 3, 2018","format":false,"excerpt":"We often compare React, Angular and Vue. I get why. But it isn\u2019t the best. Because both Vue and Angular are more complete solutions for building web apps, while React are just a library for dealing with the user interface part of it. And leave other things like communicating with\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15211,"url":"https:\/\/code4developers.com\/react-hooks-guide-top-tips-for-optimizing-performance-in-your-react-applications\/","url_meta":{"origin":3182,"position":2},"title":"React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications","author":"Arif Khoja","date":"April 2, 2024","format":false,"excerpt":"Boost the performance of your React applications with our top tips in the 'React Hooks Guide'.","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":14686,"url":"https:\/\/code4developers.com\/unlocking-the-power-of-react-hooks\/","url_meta":{"origin":3182,"position":3},"title":"Unlocking the Power of React Hooks: A Comprehensive Guide with Examples","author":"Yatendrasinh Joddha","date":"October 15, 2023","format":false,"excerpt":"In the ever-evolving world of web development, React has been a game-changer. It simplifies building interactive and dynamic user interfaces. With React, you can create components, manage states, and handle side effects seamlessly. But as React evolves, so do the best practices and techniques for building applications. One significant improvement\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/10\/React-icon.svg_-1-e1697396875978.png?fit=250%2C217&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3202,"url":"https:\/\/code4developers.com\/redux\/","url_meta":{"origin":3182,"position":4},"title":"Redux","author":"Arif Khoja","date":"January 16, 2018","format":false,"excerpt":"Okay. So redux is a very simple solution to manage state. It has a few different parts, but none of them are difficult to understand, and it is very easy to work with. I don\u2019t think I ever see any bugs in that part of my code bases. Let\u2019s begin\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/01\/Redux.png?fit=312%2C244&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3208,"url":"https:\/\/code4developers.com\/redux-example\/","url_meta":{"origin":3182,"position":5},"title":"Redux Example","author":"Arif Khoja","date":"January 22, 2018","format":false,"excerpt":"In case you missed out the basic for redux, you can Find it Here A Redux Store consists of a few different parts. You always have a single store, that uses either a single Reducer or Multiple Reducers (through Redux\u2019s CombineReducers method). And you dispatch actions to your reducers. (You\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/01\/Redux.png?fit=312%2C244&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3182"}],"version-history":[{"count":2,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3182\/revisions"}],"predecessor-version":[{"id":3185,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3182\/revisions\/3185"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3183"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3182"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}