React.js, React Hooks, and Redux
Published: 2021-02-01 02:23:22

#**__React.js__**

React.js is one of the most important things to know as a Full-Stack Developer. React provides an innovative way to integrate JavaScript into your web pages. React was initially developed by Facebook as an open-end UI to help developers make better static web pages. it has not transformed into one of the most useful skills a programmer can have today.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9o6w2kc5m89la9xptpov.png)

#**__React Hooks__**

React Hooks is on of the newest features in React 16.8, and it changes everything. They let you use state and other backwards-compatible React features without writing a class. One of the most common uses of hooks in React is importing data from APIs. By pinging a link, react can download data from anywhere in the web, and integrate it into your website. Many popular applications today have usable API's such as Spotify, Twitter, YouTube, Amazon, and even Rick and Morty!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29xlc04n2bm7nzvuzr0k.png)

#**__Redux__**

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It maintains the state of an entire application in a single immutable state tree (object), which can't be changed directly.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p5hj132va1o09gvba7jl.png)

#**__My React App__**

In my class we created a react app to learn about using react and hooks grab and utilize API's from the internet. We used the [Rick and Morty API](https://rickandmortyapi.com). One certain link returns a .json file that contains a list of numerous Rick and Morty characters. Our job as students was to import this API and use integrated CSS to style it how we please.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/29xlc04n2bm7nzvuzr0k.png)

I used this method to import the API. By using Axios, a node package we installed, we can grab the API from the internet, and download the .json data file that is returned. By using our .then (res =>) we send the newly acquired data to render and be displayed on our page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t1l65cyu9lo10mfvi6eu.png)

In this next picture above I used integrated CSS to design each object that is imported our our API's .json file. Our parts named c.image, c.name, c.status, and c.location are all properties imported per character object.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ap7fxnjl5zgraz3ectmw.png)

I wanted to add a bit extra and ad a colored circle next to the status of each character with the corresponding meanings:

* Green - Alive
* Red - Dead
* Orange - Unknown

Although it is a small feature, I believe it adds a lot more to the overall feel and functionality of the website.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o3odea81fxt20yegh4bm.png)

This was the final result of my website :)

#**_Sources_**

**My Class Teacher:** Matthew Larrubia
**React Crash Course:** https://daveceddia.com/react-getting-started-tutorial/