How to become a React developer in 2018

Despite the fact that the post was written this year, you probably will not have time to study the entire proposed program for the remaining months. Therefore, you can safely take the developer map with you next year.

Adam Golab, an expert on React and JS, has developed a step-by-step curriculum that will help you become a developer from scratch, or indicate the direction for further skills development in the profession.
')
Adam's plan is a list of the main points that you need to study on your own. We have added a description, and in some difficult points we have provided links to additional reference materials, with the help of which you will receive an answer to the question: “What should I learn as a React-developer?”.

Here is the original diagram of the formation of the React-developer.

1. The basics
   
   • HTML
     
     • Learn the basics of HTML.
     • Make some HTML pages.
     
     
   • CSS
     
     • Learn the basics of CSS.
     • Add the pages from the previous step CSS.
     • Create a page with grid and flexbox.
     
     
   • JS Basics
     
     • Check out the syntax.
     • Learn the basic operations of the Document Object Model.
     • Learn the mechanisms specific to working with JS (Hoisting, Event Bubbling, Prototyping).
     • Make some AJAX calls (XHR).
     • Explore new features (ECMA Script 6+).
     • If possible, check out the jQuery library.
     
     
   
   
2. General developer skills
   
   • Explore Git, create several repositories on GitHub, share your code with other people.
   • Get an idea of ​​the HTTP (S) protocol, query methods (GET, POST, PUT, PATCH, DELETE, OPTIONS).
   • Do not be afraid to use search engines .
   • Check out the terminal, set up your shell (bash, zsh, fish).
   • Read several books about algorithms and data structures. Or look at the preparatory course " Algorithms and Data Structures " from the Technosphere.
   • Read a few books on design patterns. For example, JavaScript Design Patterns . The publication contains many proven solutions for typical tasks, so the book is useful both for learning and as an assistant at work. We also recommend Learning JavaScript Design Patterns (Creative Commons) and a collection of Patterns For Large-Scale JavaScript Application Architecture articles that discuss patterns to help you create large, scalable JavaScript applications. Articles have a translation into Russian .
   
   
3. Check out the React documentation on the official website or take courses .
4. Learn more about the tools you will use.
   
   • Package managers. At the moment there are several similar competing package managers that help automate the downloading and updating of libraries from the central repository. In 2013, the most popular was Bower , by 2015, ceded the npm palm. Since the end of 2016, yarn is widely used as an alternative to the npm interface.
     
     • Npm
     • Yarn
     • Pnpm is also not lost on the general background - it is a fast dispatcher that efficiently uses disk space. Unlike yarn and npm, it maintains a global cache for each ever installed version of a package, the links to which packages are made in the project's node_modules folder.
     
     
   • Task management tools.
     
     • npm scripts
     • gulp build system One of the most popular automation tools for various operations of the assembly process. It uses plugins that act as a wrapper for other tools that need the command line.
     • Webpack. A tool for building modules into single packages (bandler) that has access to the file system. The resulting packages are compatible with the browser, which does not need access to the file system.
     • Rollup. Another bundler, which is called a more compact and efficient alternative to Webpack for combining JavaScript files.
     • Parcel. Small and fast bundler for small projects. Does not require configuration and is ready to work immediately after installation. Details can be found in the article .
     
     
5. Code style
   
   • CSS preprocessors
     
     • Sass / CSS. Sass turned CSS into a decent programming language, represented as a preprocessing engine that implements nesting, variables, mixins, extends, and logic in style sheets. This way you can better organize your CSS files, you will have several ways to decompose large pieces of CSS code into smaller files. We talked about this in more detail in the article “ Evolution of CSS: from CSS, SASS, BEM and CSS modules to styled-components ”.
     • PostCSS. The second generation modular processor that extends the basic CSS with JavaScript. PostCSS is great for writing your own CSS converters in the form of plug-ins.
     • Less. Another framework that simplifies working with styles is by adding variables, mixins, functions, and many other techniques that will make CSS more supported and extensible.
     • Stylus. The next generation of preprocessors. We used it to unify the design of 11 content projects. Stylus is flexible, easy to maintain (edit bugs) and very effective.
     
     
   • CSS frameworks
     
     • Bootstrap. A free set of tools for creating interface sites and web applications, ranked second in the number of stars on GitHub.
     • Materialize , Material UI , Material Design Lite. Material Design visual language frameworks, most commonly used in mobile applications (for example, in many Google mobile applications).
     • Bulma. Adaptive CSS framework with modular architecture built on flexbox.
     • Semantic ui. A framework for creating portable interfaces that helps reuse UI elements in their projects. Good alternative to Bootstrap for prototyping interfaces right in the code.
     
     
   • CSS architecture
     
     • BEM. BEM (BEM - Block, Element, Modifier) ​​is a component approach to web development. It is based on the principle of separation of the interface into independent units. It allows you to easily and quickly develop interfaces of any complexity and reuse existing code, avoiding Copy-Paste. Periodically subjected to criticism due to the elongation of the class names, the dependence of elements on the name of the block, as well as due to difficulties with the inheritance of modifiers.
     • CSS modules. A CSS module is a CSS file in which all class and animation names have a local default scope. The modules are based on the idea of ​​creating dynamic class names for each locally defined style. This method allowed us to get rid of visual regressions arising from the introduction of new CSS properties.
     • Atomic. A way of structuring CSS that eschews "semantic classes" in favor of small, specialized classes. When using Atomic CSS, you use classes with syntax like functions that can be used to generate the corresponding style sheet.
     • OOCSS. Object Oriented CSS (object-oriented CSS) is the opposite of the above-mentioned Atomic methodology. Based on the principles of separation of the structure from the shell and content from the container. OOCSS is rather complicated in practice, as it offers not specific rules, but abstract recommendations. Therefore, some developers took the basic ideas of OOCSS and improved them to create more specific ways to structure the code.
     • SMACSS. In SMACSS (Scalable and Modular Architecture for CSS, scalable and modular architecture for CSS) they took the key concepts of OOCSS, but reduced the amount of code and simplified its support, making it easier to work with.
     • SUIT CSS. Style tools for interface components. SUIT CSS works well with React, Ember, Angular.
     
     
   • CSS-in-JS
     
     • Styled-components. Styled-components are visual primitives that serve as a wrapper. They can be tied to specific HTML tags that just wrap child components with Styled-components. Instead of creating styles that are then manually tied to components, as in standard CSS capabilities, in the Styled-components approach, components are created directly. See the CSS Evolution article for more details.
     • Radium. A set of tools for managing embedded styles that supports mediaqueries and pseudo-classes.
     • Emotion. High-performance lightweight library that minimizes the cost of executing CSS-in-JS by analyzing styles using babel and PostCSS. The kernel of the library in runtime is 2.3 Kb, support for React is 4 Kb.
     • Jss. One of the early CSS-in-JS libraries for generating real CSS, rather than inline styles.
     • Aphrodite. Like other libraries, it often helps to organize the generation of critical CSS and HTML rendering on the server within a single call, but at the same time Aphrodite has important advantages - simple migration and a low learning curve. As an Aphrodite performance improvement using, read the article " Inline CSS at Khan Academy: Aphrodite ."
     
     
6. Application State Management
   
   
   • Component State / Context API. State (state) is in any framework and architecture. In React, a state is used to transmit and record data that changes over time. Context API (API for working with context), which supports static type checking and deep updates, was added to React 16.3.
   • Redux A small, popular, efficient library that provides a compact API that competently solves a multitude of questions by introducing a simple and predictable state model, as well as using a bias in functional programming and immutable data.
   • Asynchronous calls (side effects)
     
     
     • Redux-Thunk. A simple, widely used approach to managing asynchrony. Redux-Thunk introduces the concept of thunk, which, if necessary, provides deferred execution.
     • Redux-Better-Promise. Another simple and efficient approach that supports asynchronous operations and more.
     • Redux-Saga. Advanced library that simplifies and improves side effects by working with sagas. Sagas are a design pattern that comes from the world of distributed transactions. In the context of Redux, the saga is implemented as an intermediate layer that coordinates and induces asynchronous actions. For more information, see “ Understanding redux-saga: From action generators to sagas, ” and even in the article “ Sagas, ” published back in 1987, this was the first description of the saga for distributed systems.
     • Redux-Observable. An alternative to Redux-Saga, although many indicate that the saga = observable. From a formal point of view, this is just a different interface for accessing the same entity, the code turns out to be extremely similar.
     
     
   • Assistants (we improve Redux)
     
     
     • Rematch. Rematch wraps Redux, giving developers a simplified API. Removes action types, action generators, and switch (thunks) statements.
     • Reselect. A library with many features that enhance Redux. For example, Reselect helps to eliminate unnecessary rerender components and make complex selectors with auto-caching. Other features can be found in the article .
     
     
   • Data transfer
     
     
     • Redux-Persist. A tool to load redux storage in localstorage and restore it (other storage locations are supported).
     • Redux-Phoenix. Phoenix manages static resources with npm and collects them out of the box using Brunch or Webpack. The integration of React and Redux with the Phoenix framework is inspired by a bunch of elixir-react-redux-example in which Phoenix leverages the ability of the Erlang VM to handle millions of connections, along with beautiful syntax and powerful Elixir tools.
     • Redux-Form. The Redux-Form library repeats the Redux library's work scheme (view → action → middlewares → reducers → state → view) by the same principle, but for forms (“ Redux-form. When working with forms is simple ”).
     
     
   • MobX. A simple standalone MobX library, also used in conjunction with React. Allows you to update only those components that depend on the changed data.
   
   
7. Type Check
   
   
   • PropTypes. Module for checking types of React-properties and similar objects in runtime mode. PropTypes checks the property passed to the component against the desired type. This verification mechanism is not currently included in React by default, to use it, you will need to add this feature to the project as a dependency.
   • TypeScript. Typescript is a scripting programming language introduced by Microsoft in 2012. Similar to next-generation JavaScript, but with the addition of optional static typing. Allows you to more fully describe the properties and methods of objects and classes, eliminating the need to verify all the arguments included in the method or function.
   • Flow. An open source library for static type checking that allows you to gradually add types to JavaScript code. Introduction to syntax and language Flow in the article .
   
   
8. Form Assistants
   
   
   • Redux-form
   • Formik. A simple and convenient solution that simplifies data retrieval from the form, data validation, error messages, and much more.
   • Formsy. A flexible form validator containing a set of basic validation rules, such as isEmail. Pretty easy to use.
   • Final Form. The library is based on the Observer pattern, where observers can subscribe to receive updates of a form or field. It has no dependencies and does not depend on frameworks itself. React Final Form is a wrapper around the Final Form that allows you to use it with React. Read more in the article " Final Form: The road to the checkered flag ".
   
   
9. Routing (change URL when navigating between pages)
   
   
   • React-Router. A popular library with several tens of thousands of stars on Github, with powerful route nesting capabilities, good high-level abstraction, and the ability to build very flexible solutions. The project's philosophy is based on “dynamic routing” versus “static routing” in Rails, Express, Ember, Angular, and other projects.
   • Router5. A fairly simple alternative running on the client side and on the server side, providing full control over the transitions.
   • Redux-First Router. There is always an easier way to route when using Redux. Redux-First Router is an attempt to find a faster and more intuitive way of working. It automatically synchronizes to both sides the state and URL of the application, works out of the box at the “set and forget” level, keeps all application data in Redux, including routing data.
   • Reach Router. There are many routing solutions created for React and Redux, with various APIs, functions, and targets. And the list is just expanding. Reach Router is a router with an emphasis on the availability of interfaces: focus management, relative links, nested configs.
   
   
10. API clients
    
    
    • REST (REpresentational State Transfer, view state transfer) API is a simple way to interact with the backend architecture without having to figure out this very architecture. The REST API allows you to interact with resources on the web, focusing on the development of the frontend and not worrying about architecture.
      
      • Fetch An asynchronous call API that can be used to extract multiple web resources in parallel. Fetch allows you to make requests similar to XMLHttpRequest (XHR). The main difference is that the Fetch API uses promises, thanks to which you can use a simpler and cleaner API, avoid a catastrophic number of callbacks and the need to remember the API for XMLHttpRequest.
      • SuperAgent. A small progressive API created with consideration of flexibility, readability and ease of learning, with many high-level HTTP client functions.
      • Axios . A library for performing HTTP requests in Node.js or XMLHttpRequests in the browser. Supports promises, automatic conversions of JSON data, works the same on the server and on the client.
      
      
    • GraphQL. The query language for the API, which allows the client to strictly determine what data the server should send to him (the structure and amount of data is determined by the client application). It was developed as an alternative to the typical REST architecture. With GraphQL, you can get all the necessary data for rendering a component in a single request to the server. In GraphQL, developers describe the data required for an interface using a declarative language. Above the language are built libraries, which will be discussed further.
      
      
      • Apollo. Apollo, which allows you to execute GraphQL queries in a browser, provides a convenient way to work with data in React applications. Most often, working with data in the Apollo client is easier than using Redux, although the entire Redux ecosystem with numerous tools and libraries is available in applications on Apollo. A bunch of React, Apollo-client and GraphQL greatly simplifies the development of React-applications.
      • Relay. Facebook’s own tool, tailored to their needs. For this reason, it is believed that for some users it may be a bit redundant. From scratch, the Relay Modern version was created - simpler to use, more extensible, and, most importantly, capable of improving performance on mobile devices.
      • Urql. The Universal React Query Library client, which appears as a set of ReactJS components, is designed to make GraphQL on the client side as simple as possible.
11. Libraries
    
    
    • Lodash. A library offering a huge number of auxiliary functions for JS objects. Lodash simplifies JavaScript by eliminating the need to work with arrays, numbers, objects, strings, etc. Provides utility functions for common tasks using the functional programming paradigm.
    • Moment. Convenient library for working with dates and times in JavaScript, which is gently hinted at by the name. The concept of work can be traced in this article: “ We count working days with Moment.js ”.
    • Classnames A library for simple conditional combining of class names.
    • Numeral. Library for easy formatting of numbers. Numeral allows you to set the number of decimal places, the declension of nouns depending on the number, the number in words, separator symbols for the fractional part and groups of digits, the format for representing currencies, etc.
    • Rxjs A modular library that allows you to create and link data streams. Using RxJS, you can turn complex sequences of actions into a concise code that is easy to work with, but it takes time and a certain level of preparation to master this tool.
    • Ramda As Scott Sayet pointed out in the article “ Why Ramda? , Ramda offers a style of writing code, borrowed from functional programming languages. Here the mechanism for creating complex functional logic is implemented using composition. On the other hand, most of Ramda’s core capabilities are already covered in Underscore and Lodash .
    
    
12. Testing
    
    
    • Unit testing
      
      • Jest A framework that provides a platform for automated unit testing, as well as a basic library that allows you to build statements (Expect). Jest is based on Jasmine, but the API allows you to use another engine. The framework is easy to configure and easily integrates into projects, has great functionality. When testing, it executes the code with the input parameters and compares the result with the expectation.
      • Enzyme. Enzyme can be called an add-on for three other libraries: React Test Utils, JSDOM (JS-implementation of DOM, which allows to emulate a browser), CheerIO (analogue of Jquery for working with DOM-elements). Thus, Enzyme combines the capabilities of the listed libraries and adds new functionality, which is described in more detail in the documentation.
      • Sinon. Sinon allows you to test using the so-called spyware (spy), stubs (stub) and imitations (mock). This system can work with any unit testing frameworks. Another feature of Sinon is a fake server (fakeserver), which allows you to install fake responses to certain AJAX requests.
      • Mocha. A popular library that uses third-party assertion tools and external tools for creating imitations and spy functions. Allows asynchronous testing. Generates reports in various variants, and also is able to create documentation from tests.
      • Chai. Assertion library - a library with a set of functions for checking test conditions. Chai, unlike Mocha, already has built-in assertions. In Chai, there are three types of assertions: should, expect, assert. Chai also has the Chai HTTP plugin, which allows you to test HTTP requests. By the way, Mocha and Chai are a great combination for testing APIs based on promises.
      • Ava. This minimalist library, originally intended for testing node.js modules, supports parallel execution of tests. They do not depend on the global state and on other tests, which, of course, simplifies the whole procedure.
      • Tape. One of the simplest testing frameworks with a small and clear API. Tape does not welcome the use of features like beforeEach, which reflects the desire for modularity tests and provide maximum control over the testing process. The library is able to work wherever JS can run.
      
      You can learn about other popular tools for testing JavaScript projects in the article .
    • End-to-end testing
      
      
      • Selenium , Webdriver. In general, we are talking about the type of testing, where the scripts that examine the entire flow of execution, the tester runs under conditions that the user most likely has.
        Selenium allows automated tests to open browser windows, load test pages into them, enter text into forms, click on page elements, as well as perform other user actions and perform necessary checks. Within the framework of the Selenium project, a whole series of software products is being developed.
        
        Selenium Webdriver is a software library for managing browsers: populating UI elements, reading values, running scripts, etc. Webdriver is a driver for various browsers and client libraries in different programming languages ​​designed to manage these drivers.
      • Cypress. Fast, simple and reliable testing tool for everything that runs in the browser. Cypress has a well-written and understandable documentation, contains convenient tools for debugging and logging. Since September 2018, supports cross-browser testing.
      • Puppeteer Library for Node.js, which allows you to automate the work with Chrome without a user interface. With Puppeteer, you can control a browser that is running normally, which is especially useful when debugging programs. With the help of Puppeteer, you can also create programs for automatic data collection from websites that simulate the actions of a regular user. Also note the high performance of the library.
      • Cucumber.js. A testing program that can be understood not only by a programmer who is “honed” for the language used, but also by an ordinary person (Behavior Driven Development). Tests will be understood even by business customers themselves, which can be useful when displaying test reports. Cucumber tests can be written in various languages ​​supported by the framework, including JS.
      • Nightwatch.js. The library was originally sharpened to work with Selenium (Nightwatch based Webdriver), but also knows how to work directly with the Chromedriver. Tests on Nightwatch send requests to Chromedriver, while Chromedriver calls ChromeBrowser to perform tests. Nightwatch has a very simple and readable syntax.
      
      
    • Integration testing (service tests)
      
      • Karma. Test-runner for JavaScript allows continuous integration testing. Karma supports a testing server with a special web page, in the environment of which tests will be performed. This page can be opened in a variety of browsers.
      
      
    
    
13. Internationalization
    
    • React Intl. Popular library for internationalization on the client and on the server. React Intl is part of FormatJS. The library provides React with many components and an API for formatting dates, numbers and strings, as well as pluralization (depending on the quantitative attribute, the ending of the word will vary).
    • React i18next. i18next allows you to create a dictionary for each specific language, and then inside the applications, instead of writing text, write variables from these dictionaries. When the component is initialized, we select the language, and instead of the variable, the word is automatically substituted from the necessary dictionary.
    
    
14. Server Side Deployment
    
    
    • Next.js. A framework that postulates a “configuration zero” approach and works right out of the box. Built on the basis of React, Webpack and Babel. Simplifies the creation and deployment of applications that are built on the server side.
    • After.js. Similar Next.js framework for deploying React-applications on the server side. Built on the basis of React Router 4.
    • Rogue. An almost invisible framework. It is called this because it does not require a special directory / pages (like Next.js) or a separate routes.js file (for example, Afterjs). All you need is the usual App.js entry point. As an added benefit, Rogue also offers support for State Management (Redux) and CSS-in-JS (Emotion / Styled-Components).
    
    
15. Static site development
    
    
    • Gatsby. This static site generator, built on the basis of React, allows you to create websites in literally minutes, without any extra effort converting something like plain text into pages. Gatsby supports a large set of plugins using data from various sources. In addition, Gatsby retrieves data from several GraphQL APIs to create a completely static client React application. An interesting use case: “ Developing a static blog on Gatsby and Strapi ”.
    
    
16. Backend framework integration
    
    • React on Rails. React on Rails integrates Ruby on Rails with React using a Webpacker (especially with respect to rendering on the React server side) to solve the problem of the lack of a normal frontend in Rails.
    
    
17. Mobile environment
    
    
    • React Native. Popular framework for iOS and Android for the development of native mobile applications in JavaScript. Allows you to use a single code base for the two platforms, as well as create mobile applications that are no different from applications created using Objective-C or Java. React Native uses the same basic core components of the user interface as conventional iOS and Android apps.
    • Cordova / Phonegap. Cordova is an open source framework managed by Apache. Apache Cordova allows you to write mobile applications in HTML, CSS, and JavaScript, as well as access the low-level API using simple plug-ins. Phonegap provides rapid development of cross-platform mobile applications in JavaScript (as well as HTML5 / CSS) with the ability to call native code. In general, almost the same thing as described above. The main difference between the two frameworks is that Cordova is open source, and Phonegap belongs to Adobe. , Phonegap HTML5 Adobe.
    
    
18. 
    
    
    • Proton Native. React , React Native. , React, Redux. Node.js. Proton Native , React Native . , , Electron.
    • Electron. , Node.js, , HTML, CSS JavaScript. , Electron, -, .
    • React Native Windows. React Native . Windows 10, Windows 10 Mobile XboxOne (UWP).
    
    
19. The virtual reality
    
    
    • React 360. JavaScript React . React 360 VR-. Chrome, Firefox Edge.
    
    

Conclusion

, React. , . , , , , . , , , .