<h3>What is React?</h3><ol><li style="text-align: justify; ">It is best known deployment method to use HTML and jQuery as a front end when to create web page</li><li style="text-align: justify;">for a dynamic web page, it requires more jQuery which ends up being complicated</li><li style="text-align: justify;">given the situation that we are fully relying on jQuery which means java script, there is a recent concept that why not we use java script from scratch instead of HTML + jQuery, and this is the React developed by Facebook (ie facebook and instagram are based on react)</li><li style="text-align: justify;">in order to treat DOM(Document Objective Method, application programming interface(API) for HTML and XML documents), react uses JSX similar to HTML but more flexible</li></ol><p><br></p><h3>What is JSX?</h3><ol><li>Unique syntax in order for React to treat HTML(DOM)</li><li>Similar syntax as HTML(DOM) being more flexible and being able to use javascript with the combination of DOM operation</li></ol><p>Major syntax difference examples are;</p><ul><li>class => className</li><li>needs {{}} to use style, can't use '-'. For example, {{margin-bottom: '1px'}} => {{marginBottom: '1px'}}</li><li>Use {} for a variable</li></ul><p><br></p><h3>Advantages to use React</h3><ol><li>Can avoid to use jQuery</li><li>Can use javascript with DOM syntax being together, which gives us more flexible coding with simple code</li><li>Light</li><li>Since React coding is based on component/part level, which gives us reusability, easier maintenance, and similar concept of atomic design which is getting popular recently</li><li>Can extend to use for smart phone application using React Native which is conceptually same syntax</li><li>Easy to extend to progressive web app (PWA, I will post this in future)</li></ol><p><br></p><h3>What is Atomic Design?</h3><p>This reference well explain using chemistry as a analogy: <a href="https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/" target="_blank">Atomic Design Principles & Methodology 101</a><br></p><blockquote><p></p><div style="text-align: justify;"><span style="color: rgb(43, 43, 43); font-family: "Adobe Clean", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 18px;">Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.</span></div><span style="color: rgb(43, 43, 43); font-family: "Adobe Clean", -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 18px;"><div style="text-align: justify;">This methodology is called Atomic Design because the idea is founded in that of Chemistry, and the study of the composition of matter. The universe is made up of a fixed set of ‘atomic elements’ – known to many of us as the periodic table of elements. These elements are the building blocks of everything around us.</div></span><p></p></blockquote><p><br></p><h3>Disadvantages to use React</h3><ul><li>Potential problem to use legacy java script library => some of known library is re-designed for react like 'react-xxxx' and we can install by</li></ul><pre>npm install xxxx</pre><p></p><p></p><ul><li>Since it's still new, sintax rule potentially changes drastically</li><li>Complex environment is needed to use react. Requires couple of library such as node.js, babel, and webpack. It is likely causing revision compatibility issues from complex libraries. React offers starter package to minimize an effort to set up like below code and it runs smoothly once we create React environment in.</li></ul><pre>create-react-app</pre><ul><li>It requires ES6 (new version of java script)</li><li>Difficult to use it with visualization library like d3 which also directly modulate DOM (but there is a way to use it together and I will post in the future)</li><li>Some restriction for backend (a bit complicate using backend web library with React like django, I will post this in the future)</li></ul><p><br></p><h3>React learning steps</h3><ol><li>Learn ES6</li><li>Set up react environment and create 'hello world' app by 'create-react-app'</li><li>Find sample code run in your pc</li><li>Learn single page application by react-router to change page, no transition of screens asking server</li><li>Learn redux concept and use react-redux</li><li>Learn page transition with redux using redux-router</li><li>Learn how to treat ajax by react-saga with redux </li></ol><p></p><p></p><br><h3>What is Redux?</h3><ul><li>Different scheme with react, but likely to use together with React as it has a synergy</li><li>Simplify coding scheme if you would like to use same data across multiple pages which is hierarchically far away from react component structure. React manages data from parent component to children component by state => props, while redux manages data separately and pull data wherever you are in React structure</li></ul><p><br></p><h3>When to select React?</h3><p>As a conclusion remarks from my experience using react for couple of apps,</p><ul><li>HTML + jQuery is way faster if we would like to create static page</li><li>Better to use React if we would like to create dynamic page like native application</li><li>If we want production suite level UI for data science app. Typical data science app as PoC is based on R or Python and less flexible on UI and sometimes it's very poor interaction </li></ul>
<< Back to Blog Posts
Back to Home