The employer rejects most resumes simply by running them diagonally. This is a little discouraging, right? So it is very important that he immediately sees the knowledge and skills he needs from you. Now is the right time to upgrade, especially if you have nothing to brag about on your resume. You don't need to go to university to learn new skills: you just need to go in the right direction and not deviate from it.
If you, for example, know how in ReactJS, this will allow you to become a more in-demand specialist. If you are a beginner web developer and already know JavaScript and HTML, ReactJS is the next step.
In this article, I'll share my list of tools and libraries worth learning to become a good JavaScript developer and use React.
What is React and why is it worth learning?
React is a js library for user interface development that Facebook rolled out in May 2013 (and continues to support). It allows you to create dynamic user interfaces in JavaScript.
Since React is one of the most powerful js libraries out there, you can do a lot of good things by learning it. React is used by developers Amazon, PayPal, BBC, CNN and many other tech giants. In addition, the library is flexible enough to meet any need. It can be used in conjunction with your favorite tech stack. React can be used to create data dashboards, messaging apps, social networking apps, single page web apps, and personal blogs, among others.
If you can learn React while working on real projects, it will not only help you learn quickly, but also give you the opportunity to show off to potential employers.
1.npm
It is clear that this tool will not be a revelation for anyone. I just could not ignore him.
To work with JavaScript (including the React library), you need to install the Node package manager ( npm ). Like the package manager that comes with your Linux distribution (or Chocolatey for Windows or Homebrew for macOS), npm provides commands to query the software repository and install the required packages, including ReactJS components.
You can install Node.js (and npm along with it) from the repository of your Linux distribution.
On Fedora or Red Hat Enterprise Linux, do the following:
$ sudo dnf install nodejsOn Ubuntu or Debian, slightly different:
$ sudo apt install nodejs npmIf your distribution's repository does not include npm, visit Nodejs.org to learn how to install Node.js and npm in this case.
2. Quick start
Create React App is a template project for quickly creating React applications. Setting up a working project in React used to be a tedious task. But with this tool, you can set up a frontend build pipeline, project structure, environment, and application optimization for zero configuration in seconds. You can do it with one command. Moreover, if you need more complex configuration, you can "extract" Create React App and edit its config files directly.
Create React App is distributed open source under the MIT license. Its source code is in the GitHub repository .
Installation:
npm start
npm init react-app my-appIf you don't want to use Create React App, you can look towards React Boilerplate and React Slingshot . Both are open source under the MIT license.
3. React Sight
React Sight is a popular visualization tool that allows you to present your application as a hierarchical tree of components (such as a flowchart). It can be connected as a Chrome extension (you still need react devtools to display information about your application). Using its interface, you can add filters to focus on the components you need to interact with the most. Hovering over the nodes will display information about the current state and props of the component. React Sight is very useful for debugging large and complex projects.
React Sight is released under the MIT license, and you can access its source code in the GitHub repository . You can use the Chrome web store to install it .
4. React Belle
React Belle is a custom React library containing reusable components: Toggle, Rating, DatePicker, Button, Card, Select, and more. It is designed to provide a convenient user experience. Components are optimized for mobile and desktop. They are highly customizable and support Accessibility Standards for People with Disabilities ( WAI-ARIA ). The library supports various themes such as Belle and Bootstrap.
Belle is released under the MIT license, and you can access its source code in the GitHub repository .
Installation:
npm install belle5. Evergreen
Built on top of a React UI primitive, Evergreen is a UI framework containing high quality components that you can use to build your project. Developers love this tool for its easy component import.
Evergreen is released under the MIT license, and you can access its source code in the GitHub repository .
Installation:
npm install --save evergreen-ui6. Bit
Bit is an online platform and command line tool for publishing and sharing React apps. This is one of the best options if you are building and sharing components. Its marketplace is a place where people can publish their React apps and search for the components they need. So you don't have to reinvent the wheel every time you need a new React app or component.
So Bit:
- provides code reuse;
- increases the efficiency of design and development;
- maintains the consistency of UI and UX;
- increases the stability of the project.
Bit is released under the Apache 2.0 license, and you can access its source code in the GitHub repository .
Installation:
$ npm install bit-bin --global7. Storybook
Storybook is a tool for rapidly developing UI components. It allows you to view a library of components and track the status of each one. With StoryBook, you can develop components separately from your application, making it easier to reuse and test UI components.
What's more, the Storybook API offers many features and makes customization easy. Companies such as Coursera, Squarespace and Lonely Planet use this tool.
The Storybook is released under the MIT license, and you can access its source code in the GitHub repository .
First install Storybook using the following commands:
$ cd my-react-app
$ npx -p @storybook/cli sb initNext, run the run command:
$ npm run storybook8. Formik
Formik helps you create and validate forms during debugging, testing and analysis. It allows you to create dynamic forms, so you don't need to manually change or update the state and props of its components. This makes development faster and more enjoyable.
Formik is released under the MIT license, and you can access its source code in the GitHub repository .
Installation:
$ npm install formik --save9. Immer
Immer is a js library that allows you to maintain immutability as your project structure gets more complex. More precisely, the library makes it easy to keep your code immutable.
Some of the main features of Immer are:
- Immer is strongly typed: this is useful when your state object is of a type.
- Immer shrinks boilerplate: Most state management tools require you to write a lot of boilerplate code. Immer allows you to write less code.
- Immer allows you to use JS data structures: you can create immutable states in Immer using basic JS data structures.
Immer is released under the MIT license, and you can access its source code in the GitHub repository .
Installation:
$ npm install immer10. React Proto
React Proto is an app prototyping tool for developers and designers. It helps you plan your project structure so you can make decisions ahead of time. Therefore, you don't waste time making changes during development. This tool is especially helpful for people who prefer design to coding: for example, you can drag and drop elements instead of writing code to do it. The tool will help you to mark all selected components and give them names, properties and hierarchy.
React Proto is released under the MIT license, and you can access its source code in the GitHub repository .
To install it, first fork the repository . Then install the dependencies with:
$ npm installThen run:
$ npm start
$ npm run devA new step in your career
Basically, you can find a lot of JavaScript and React material yourself. But to learn more about the tools I mentioned in this article (and many others), check out the Awesome React GitHub repository.
By studying and implementing these tools, you will increase productivity and make your resume more attractive to the employer.
Advertising
Need a server for your ReactJS app or any other purpose? Our epic servers with modern and powerful AMD processors will do just fine. A wide range of configurations with daily pay.
