Web-based app built in React searches for Breaking Bad characters via API

Tailor-made improvements:

1. Status translate function to Brazilian Portuguese
2. Function that converts dates to Brazilian format
3. Search using UseState (real-time search)
4. Use Axios to query via query (real-time search)

#API #frontend #components #CSS #JavaScript #react

Made using React 6, Axios, Redux, Webpack and CSS3, JavaScript and HTML5 API provided by https://breakingbadapi.com

Repository: https://github.com/marcelxv/Breaking-Bad-Char-Index Live project: https://breaking-bad-char-index.vercel.app/

Walkthrough (step by step):

• Create a React App Structure via npm
• Clean code that we’ll not use
• Clean files that we’ll not use
• Open terminal on VSCODE and give command to create react app
• Open new folder on VSCODE
• Add imagens (pasta em src)
• Mistake with hard reload
• Copy CSS from repository
• Create components folder
• Use ES7 React/Redux to create a pre-modeled component (template) with arrow function
• @ Header.js import logo using Webpack
• @ Header. Js apply class center
• @ Header.js insert logo image
• @app.js Test Header component
• @app.js Import UseState
• @app.js Import UseEffect
• @app.js Create const to cards, with setCards function to useStates (empty)
• @app.js Create const to carregando, with estaCarregando function to useStates (true)
• @app.js Create useEffect arrow function to fetch data (using AXIOS)
• @app.js Import AXIOS
• @packcage.json Check if it’s installed
• @ terminal Install AXIOS via npm
• @app.js Create const to FetchData / arrow function async = await axios( base url )
• @app.js Console log to test data fetch
• @app.js Get an error caused by never called FetchData function
• @app.js Call fetch item
• Clear console errors get rid of Webvitals module
• @app.js set data fetched to cards (setCards)
• Create a new folder called Characters
• Create component inside /Characters GridPersonagens.js
• @CharacterGrid.js use ES7 shortcut to create component rafce
• Call gridPersonagens em @app.js
• @app.js pass data from state of cards and estaCarregando para GridPersonagens.js
• Catch values / data from app.js densconstructive way
• @GridPersonagens.js returns estaCarregando
• @GridPersonagens.js Use a ternary to check if isLoading is true / false
• @GridPersonagens.js create a section with class name of cards (to use pre-style from css)
• @GridPersonagens.js Use map to catch data through items and put that on cards via react list
• @GridPersonagens.js Test card receiving data passing name card.name to element H1
• @GridPersonagens.js add key={card.char_id} to element to get rid of error on react list without index
• Create a file called ItemPersonagem.js inside ui/personagens to deal with specific character item component
• Generate a component with arrow function using Redux
• @ItemPersonagem.js Bring Card value as a prop
• @GridPersonagem Import ItemPersonagem.js
• Test if card name value pass through via props
• @ItemPersonagem.js create following UI’s in the JSX format: div.card, div.card-inner, div.card-front, div.card-back,
• @ItemPersonagem.js use h1 for card.name, li for card.portrayed, card.nickname, card.status and card.birthday
• Test if values is applied to all UI elements correctly
• Create a new file on components/ui called search.js
• Use redux to create arrow function component
• Give a section class name of search
• Create a input type text
• Test while @app.js import
• @search.js Create a const for search (arrow function) for text and setTextfunction
• @search.js Add value = value={text} at input
• @search.js add onChange= setText
• Error on useState caused by forgot to import use state in the header of @search.js / correct
• Test if search.js is collecting user value in the input
• @app.js create a const to useState that queries (setQuery) the value of search input and use it on fetch url
• @search.js Change onChange value to function called onChange with e.target.value
• @search.js Create arrow function for onChange (previous assign to onChange at input with two values that get a ‘q’ value
• @app.js set at search module a getQuery parameter with value of (q) on arrow function of setQuery(q)
• @app.js on url of axios promise, change the format to a dynamic format that put {query}
• At fetchData const (arrow function) assign query as dependency (inside brackets at end)
• Test the input and useState render – it’s reacting to letters typed
• Create a new component inside components/ui called spinner
• Use Redux to start a the new component with arrow function
• @spinner.js Import the spinner gif
• @spinner.js Add image with spinner as src
• @GridPersonagem.js import spinner component
• @GridPersonagem.js change h1 tag for the Spinner Component
• Test it out

• useState: allow use different ‘states’ inside of an component
• UseEffect: fire off when component loads to make HTTP request to get the data