قالب وردپرس درنا توس
Home / Tips and Tricks / The best reactive tools and libraries to accelerate front-end development – CloudSavvy IT

The best reactive tools and libraries to accelerate front-end development – CloudSavvy IT



react logo

Because it is the most popular front-end JavaScript framework, the React ecosystem is lively and full of useful tools and packages that you can integrate into your app. We discuss some of the most useful ones here and show you how to use them.

React DevTools

react devtools

React Devtools is a Chrome and Firefox add-on that is extremely useful for troubleshooting React applications. You can think of it as Chrome’s Element Inspector – it lets you navigate down your application tree, but instead of displaying HTML and CSS, you look at props and permissions.

You can also select elements just as if you were inspecting elements with Chrome’s devtools, which can be useful when working with complex applications.

The add-on also includes React Profiler, which times component reproduction and helps eliminate poor performance and “jank” in your application.

React Profiler times rendering of components and helps eliminate poor performance and

The profile can scan your app and output a bar chart of the most render-intensive components.

React to the router

react-router is the go-to package for managing track-based routing in your app. It adds a new component that sits at the top level of your app and directs to other components based on the URL path, so you can organize everything into “Container” components that represent individual pages.

For example, the top the component of your application can look like this:

export default function App() {
  return (
    
      
); }

The the component looks through all its children and finds one component with a path arguments that match the specified path. If it matches, all child components in reproduced, usually contains a container component for an entire page.

You can also set paths with variables, for example users/:userID, which can be downloaded in the child component with useParams().

Since React Router handles all routing itself, it is insanely nice for the client. This is known as a single page application or SPA. Instead of requesting new pages from a server, the client rewrites the current page dynamically. As for React Router, it directs based on the URL to provide a seamless experience – your users will just think your site is loading immediately.

again

Redux is a permit container for your React application. It adds a global data warehouse that you can connect to from any component, complete with actions and reducers that you can send to change the current state.

Really, Redux is just a nice cover for React’s Context API. Context allows you to send data to any component without sending props manually through intermediate components. While you could implement your own basic global data warehouse similar to Redux quite easily, Redux has some advantages over that method.

First, Redux troubleshooting tools are fantastic. Because the state is unchanged and can only be updated through actions and reductions, it enables Time-Travel troubleshooting. You can scroll back in time and see how your actions affect the current state and explore your state tree with Redux Devtools.

redux devtools

Redux can also be expanded with middleware and provides a good platform for the package’s interoperability. Redux Saga is, for example, a side effect model for Redux that makes it easier to work with asynchronous measures, such as retrieving data from a database or browser cache.

Redux also handles component updates cleanly – a single state change will not trigger a rendering of each connected component, only those that affect, preventing unnecessary jank.

Styled components

designed components

styled-components makes it easier to work with CSS in React. While you can just give all the class names and design them as usual, it is not that “smart” and does not connect to props and sets very easily. React has its own styling system, but it uses different syntax, and it’s a bit clumsy.

Styled Components solves that problem by allowing you to type CSS directly in a string letter and create a new “styled component” in the process. For example, you can create a button that changes color based on props.primary by replacing background value with a function that looks up from props, such as:

const Button = styled.a`
border-radius: 3px;
padding: 0.5rem 0;
background: ${props => props.primary ? "palevioletred" : "white"};
border: 2px solid white;`

You are not limited to primitives either – you can create customized versions of your own components.

React Bootstrap

react bootstrap

Bootstrap is the most popular front-end component library on the web. It offers many different components for common user interface elements such as hub fields, forms, cards and much more, saving you from typing them from scratch.

React Bootstrap offers Bootstrap’s primitives as React components, which you can expand with custom styling to suit your app’s needs. Bootstrap reduces the hassle of customizing the formatting behind the scenes such as padding, margins, flexbox and layout, so you can focus on the design and functionality of your app.

You can browse their component libraries here to learn more.

Storybook

If your app uses many components, you may be interested in a better way to manage and test them. Storybook provides a sandbox environment for building and testing UI components in isolation, as well as an easy way to manage and organize your component library as a whole.

storybook

Each component can be seen in isolation and has several “knobs” that control the data sent to them. You can also write extended documentation for the component, which helps to improve the internal usability. Of course, Storybook requires a certain level of extra installation for each component, and writing documentation is not free, but for large teams with a lot of clutter ./components folder, Storybook can help organize it.

To demonstrate how to use it, they have many live demos available online from companies such as IBM, Uber and Coursera that use Storybook to manage their component libraries.

If Storybook is too much for you, you can try Style Guide, which provides an easy-to-manage style guide for your developers to refer to.


Source link