How slyamzit Habr in a quick way

It happened on Monday, February 13th, the world will no longer be the same. Vacancy is open:

To work on our projects, we are looking for a strong front-end developer. You have an ambitious task: to introduce a component approach in the development of all current and new projects of the company.

Great, working on! Perform "test task".

The process of transferring our favorite site to react-components is extremely simple . You need to click the [square with cursor arrow] button in Chrome DevTools, copy the selected HTML block to the temp.html file, add attributes like data-component = "MyReactComponent" to future components, and run in the console:

$ html2react ./temp.html 

Result in ./components/ - ready JSX-scripts.

What is the beauty of the components? The decomposition of tasks is more obvious, it is possible to estimate labor costs more precisely, as a result, it is easier to manage the development process. Gradually, an understanding will be formed of how to divide the layout blocks into components: just a lot of code into one component, some kind of interactive, additional functionality. The main thing is not to get involved yet, the first task is the Minimum Viable Product (MVP) .

Oh, how many experienced web developers pushed the mess out of the HTML tags inside the JavaScript code. My allergy went away after three years, and then ES6 arrived in time - the nightmare of a retrograde . But everything is for the better, during this time the React's ecosystem has grown and strengthened. As before, people lived without Redux, they probably suffered. :)

The great thing is create-react-app , eliminating the need to set up a node-application at the current initial stage, while not imposing anything superfluous.

And then the first Habr's page on localhost: 3000 appeared, almost indistinguishable from the original - this is Happiness!

There are also errors in the layout, and legacy-blocks; The code requires thoughtful viewing and editing. Replaced links on the template " https://habrahabr.ru/ " with "/ # /", since they are almost everywhere absolute. I connected @ font-face, restored the performance of the "#scroll_to_top" plate.

 //   <a ... onclick="if (typeof ga === 'function') { ga('send', 'event', 'footer', 'links', 'ios_app'); }" > //    <a ... onClick={ga('footer', 'links', 'ios_app')} > //    export const ga = (eventCategory, eventAction, eventLabel) => () => { if (typeof window.ga === 'function') { window.ga('send', 'event', eventCategory, eventAction, eventLabel) } } 

I will activate Redux while I fill the fake data in initialState. You can already add a new article from the form to the Store. Made some static pages on the links from the column "Info" in the basement, the routing works tolerably, but you need to implement crumbs in the "Help" section. Using the "react-helmet", I discerned the connection of css-files (since page 404 is framed differently). I use "reselect" (example in components / PostTeaserList.js - filter by threads), "redux-act" (example in reducers / editPost.js). For processing side effects connected "redux-thunk". I add inline styles using "styled-components" (example in components / InfoHelpPost.js).

The general rule is not to dwell on details. If the problem is not solved in 15 minutes, or simply distracts, then postpone with the TODO mark. It is believed that 85% of the time is occupied by minor modifications. It is important to quickly grow the skeleton, and build up the meat - the subsequent stages through iterative continuous integration.

PS

If you need to quickly reincarnate an old web application, then try on the trendy component approach (hello, Delphi'95 & Rapid Application Development).

Leonid Arkadyevich, taking this opportunity, also convey my greetings to Mail.ru and Fast Line Ventures; simplified "adaptation" of successful foreign projects. By the way, for indie developers this is a way to raise your little candle factory: saving on TK, on ​​design, on layout. Remember ideas don't cost anything? Implementation is also subject to reduction in price.

The described method of transferring the layout to react-components is also applicable to current projects at React, if your team is divided into layout designers and developers.

When you want to master a new technology (for example, React), then the best learning method is to copy an existing project using the required technology. At least for a portfolio on GitHub. Project sources are updated here .

Demo: yobr.ru

Introductory video tutorials

• Javascript
• ES6
• ReactJS
• Redux react