5 React Libraries & Tools You Need in 2020

searching for react libraries and tools for your project i'll give you five that will level up your code also stick around to the end of this video for some bonus content what's up ed here with stack that code helping you go from zero to full stack developer with online tutorials in this video i list five libraries that make it fun and productive to create your react apps now if you find that this is useful smash the like button and if you didn't find this useful smash the like button also subscribe for more content now let's get into it alright the first item on our list is a library called react material ui what it gives is a set of components that's styled after google's material design the upside to using this library is that it greatly speeds up development you get a solid code base that's been around since 2014 and you get a consistent load that people know and trust having said that let's take a look at the components so we're gonna go and click on getting started and it takes us to this installation page as you can see you install it with npm or yarn and you need to include link tags to use the font or font icons if you want to use svg icons you would also use npm or yarn to install that now let's take a look at how to use it so we'll click on usage if you look through the documentation you'll see that using these components is very straightforward you import the component that you need into your code you use it in your jsx definition and you change its properties to suit your needs let's take a look at what other components are there in this library so we see that you have components for layout you have components for inputs navigation and so on to take a look at a specific component of the details of it and you would go to the component api let's take a look at button and you see that when button pulls up you see all the properties that it has all the css styling that you can change so this library is very easy to use you can speed up your development and it's great for things like building an mvp really quickly next let's take a look at an animation library called reacts spring number two on our list is react spring this is a different type of animated library and what makes this different is that it's spring physics based rather than time based what this means is that you get a more realistic interaction with the animated components now the original idea came from chenglo's react motion but this library incorporates that as well as ideas from christopher shadow's animated library in a nice neat package how to install that is you use npm install and we'll take a look at some basics on how to use it so we'll click on basics the library consists of five hooks these are the hooks here's an example of using one of the hooks to use spring so you import the hook and you would use the hook to define the property then you would use the property in an animated div so it's pretty straightforward but this is the basics it goes a little bit deeper as you can see you can use this in your project to add a little bit of pizzazz to your front end next let's take a look at some testing with react testing library all right number three on our list is react testing library i know what you're thinking why have react testing library when we already have jess the answer to this is that react testing library works with jess and it renders and checks components that are actually inside the dom this encourages good testing practices to install it you would use npm and one of the great features of this library is that you can wait for components to show up before continuing on with your testing i'll show you what i mean by clicking on example now in example we have the first test inside the test we fire a click event that click event renders a component we wait for the component to show up after that we do more testing this is a great feature and it makes testing much easier again this library is great to include in your project and you can use it to ensure that your code is behaving like it should having said that let's move on to the next item on our list it's create react app number four on our list is create react app it's one of those things that almost doesn't need an introduction it's been around for a long long time and it's indispensable in creating react apps it's really easy to use you would type in npx create react app and the name of the app and it scaffolds everything for you again one of those amazing tools you need in your arsenal and i highly recommend it now finally the fifth item on our list that we're going to see is react bootstrap now number five is react bootstrap it's very similar to react material ui in that it speeds up development it's a very stable code base and you have a ui that people are familiar with the choice to use react bootstrap really depends on if you like the ui or not to get more information on react bootstrap let's click on get started and you see that to install it you would use npm you would also need to include some script tags in your index page and to use it you would import the component that you want into your react code and use it in your jsx on the side here you have items for layouts for utilities and also our components let's take a look at the buttons component on the buttons page you see all the different types of options four buttons and if you scroll to the very very bottom and this is very similar for all the components you have the api you can look through this and figure out how to use the component this is a very stable library for quick prototyping highly recommended in that case now that ends our five items on our list and as a bonus we're going to give you another library to use let's talk about nevo now for our bonus item we're going to talk about nevo and evo is very interesting in that it's a library for outputting beautiful charts and graphs on top of that they have an interactive documentation where you can play around with things and it spits out the code that you want for your project let's take a look at line documentation and here was all the things i was talking about it says all these inputs to play around with so let's play around with this the point size and you can see it changing on the graph and we'll play around with enable grid so let's disable it and then we'll enable it again after all of that you have this code being written here so you can copy and paste it into your project eventually you'll learn how to edit the code yourself but this is a good way to ease yourself into your api so again this is a really interesting library to use in your project and that wraps things up hopefully you're excited about the libraries and tools listed in this video now i have a question for you is there a library that i missed that you think is really good leave it in the comments below now before i leave don't forget to like and subscribe for more content keep stacking and i'll see you next time searching for react searching for the full stack developer with online helping you go from zero to on now keep stacking and i'll see you next time

Channel: STACK THAT CODE

Views: 13,613

Rating: 4.7995825 out of 5

Keywords: stack that code, stackthatcode, react libraries, react component library, react testing library, create react app typescript, react material ui, react framework, react animation library, styled components react, react ui framework, material design react, material ui github, react best practices, react ui library, react transition, react styles, react widgets, react ui components, react ui kit, react best practices 2020

Id: IxcAnWLsR1k

Length: 7min 1sec (421 seconds)

Published: Wed Jul 22 2020