React.js, React Hooks, and Redux

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.

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!

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.

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. 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.

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.

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.