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.
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 is the first pillar and the most important skill for web developers. It provides the structure of web pages.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 can make your work easier. React developers have many tool libraries to choose from, such as:
Javin does not recommend learning all these libraries, you can start with lodahs, moments and classnames.
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
You can also learn this library, but it is recommended to learn Jest.
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
All these libraries provide React components and APIs for formatting dates, numbers and strings, including plural forms, and can also handle translation issues.
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:
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.
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
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:
- React Native
But these are advanced features. You can come and learn after you have mastered React.
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.