How can React.js developers practice their skills better?

Image for post
Image for post

ReactJS (Reat for short) is the most popular front-end framework. It is developed by Facebook and has developed rapidly in recent years and has become a standard library based on component GUI development.

Although there are other front-end frameworks, such as Angular, Vue.js, etc., React is unique in that it only focuses on component-based GUI development and does not involve other fields. For example, Angular is a complete framework that comes with many features, such as dependency injection, routing system, form processing, HTTP requests, animation, internationalization support, and a strong module system that supports lazy loading.

So, if you already have some libraries to complete these functions, or you don’t need all of these functions, then React is a better choice. However, learning React is not easy, especially for those who are just getting started with web development.

Basic knowledge

No matter which framework you learn, these basic knowledge are necessary, namely HTML, CSS and Java, these three are the three pillars of web development.

HTML

HTML is the first pillar and the most important skill for web developers. It provides the structure of web pages.

CSS

CSS is the second pillar of web development and is used to provide beautiful styles to web pages. Learn CSS can refer to this free course.

Java

This is the third pillar of Web development, and interaction is only possible with Java web pages. It is also the foundation of the React framework, so you must master Java before learning React.

General development skills

Whether you are a front-end developer or a back-end developer, or even a full-stack engineer, you must understand some general development skills in order to be a fish in the world of programmers.

Learning Git

As of 2020, Git is a technology that must be mastered. Try to build a few code repositories on GitHub, share the code with other subs, and learn how to download the code from Github to your IDE.

Understand the HTTP(S) protocol

If you want to become a web developer, you must understand and master the HTTP protocol.

I am not asking you to read the HTTP standard, but to at least be familiar with common HTTP requests such as GET, POST, PUT, PATCH, DELETE, OPTIONS, and the basic working principles of HTTP/HTTPS.

Learning terminal commands

Although it is not necessary for front-end development to learn Linux or terminal commands, I strongly recommend you to be familiar with terminal commands and configure your shell (such as bash, zsh, csh), etc. If you want to learn terminal commands and bash.

Algorithm and data structure

This is also the basic programming skills that React developers do not necessarily need, but it is definitely the only way to become a programmer.

Learning design patterns

Just like algorithms and data structures, design patterns are not necessary for React developers, but there are many benefits to learning this knowledge.

Design patterns are tried and tested solutions to common problems in software development.

Learn React.js

Finally entered the topic. You must learn and master React to become a React developer. The best learning material is React’s official website, but for beginners, this may be too complicated.

Learn to build tools

If you want to become a professional React developer, you should spend some time familiarizing yourself with the tools that web developers need to use, such as build tools, unit testing tools, debugging tools, etc.

Package manager

There are many package managers, but you don’t need to learn all the tools, you only need to learn npm and webpack. After you have a better understanding of web development and the React ecosystem, you can explore other tools.

After learning Bootstrap, you can further learn Materialize or Material UI.

State management

Another important area that React developers need to care about is state management. You must learn below mentioned concepts and frameworks:

  • Component state/context API
  • ReduxAsync action (side effect)

If you find it too complicated, I suggest you focus on Redux, it’s pretty good.

Class Type inspector

Since Java is not a strongly typed language, there is no compiler that can catch type errors.

As the application grows, type checking can catch many errors, especially when you use Java extensions such as Flow or Type.

But even if you don’t use these extensions, React also has some built-in type checking functions that can help you find bugs in advance.

Form aids

In addition to the type checker, you can also learn some form auxiliary tools, such as Rdux Form, which can easily manage the state of the form. In addition to Redux Form, you can also look at Formik, Formsy, and Final form.

Routing

Components are the core of React’s powerful descriptive programming model, and routing components are an important part of all applications.

React Router provides some navigation components that can define applications in a descriptive manner.

If you want to add bookmark able URLs to your application or want to provide navigation in React Native, React Router is essential.

In addition to React Router, you can also look at Router 5 and Redux-First Router.

API client

Now, people rarely only build APIs, and most of the time they need to communicate with other applications through APIs (such as REST, GraphQL, etc.).

Fortunately, many API clients are available to React developers.

REST

  • fetch
  • SuperAgent
  • axios

GraphQL

  • Apollo
  • Relay
  • urql

Apollo Client is my favorite client. It provides a simple and easy-to-use way to build client applications with GraphQL. The client is designed to help you quickly build UI and use GraphQL to get data. It can be used in conjunction with any Java front end.

Tool Library

Tool library can make your work easier. React developers have many tool libraries to choose from, such as:

  • lodash
  • moment
  • classnames
  • numeral
  • RxJ
  • SRamda

Javin does not recommend learning all these libraries, you can start with lodahs, moments and classnames.

Test

One of the techniques that React developers must master is testing. You should pay attention to libraries that help you test.

Here are some libraries i mentioned

Unit test

  • Jest
  • Enzyme
  • Sinon
  • Mocha
  • Chai
  • AVA
  • Tape

End-to-end testing

  • Selenium
  • Webdriver
  • Cypress
  • Puppeteer
  • Cucumber.js
  • Nightwatch.js

Integration Testing

  • Karma

You can also learn this library, but it is recommended to learn Jest.

Globalization

Another important topic of front-end development is internationalization. You need to provide localized GUIs for Japan, China, Spain and other European countries.

it’s not wrong to learn more:

  • React Intl
  • React i18
  • Next

All these libraries provide React components and APIs for formatting dates, numbers and strings, including plural forms, and can also handle translation issues.

Server-side rendering

You may not know the difference between server-side rendering and client-side rendering. Let’s take a look at this problem first, and then discuss which server-side rendering libraries can be used in React.

In client-side rendering, the browser will download the minimum amount of HTML, then load Java, and fill in the HTML.

In server-side rendering, React will execute on the server, output HTML and send it directly to the browser.

It is recommended to the learning the following server-side rendering libraries:

  • Next.js
  • After.js
  • Rogue

Static website generation

Gatsby.js is a modern static website generator. Use Gatsby to create a personalized website that supports login. It can combine data with Java to generate beautiful HTML content.

Back-end framework inheritance

React on Rails can integrate React with Rails. It can provide server-side rendering, SEO crawler indexing and UX performance that rails/webpacker cannot provide.

Mobile Applications

This is another benefit of learning React, because React Native is rapidly becoming the standard way to develop mobile applications. You can develop native interfaces using Java.

I suggests you that you learn the following techniques

  • React Native
  • Cordova
  • PhoneGap

Desktop application

There are also some React-based frameworks that can build desktop GUIs, such as React Native Windows, which can use React to build native UWP and WPF applications.

The proposed framework is as follows:

  • Proton
  • Native
  • Electron
  • React Native
  • Windows

But these are advanced features. You can come and learn after you have mastered React.

Virtual Reality

If you are interested in virtual reality applications, you can take a look at frameworks such as React 360, which all provide a very good VR experience through React.

Written by

Digital Nomad

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store