DEV Community: Chris Hansen

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

Filter Your React Data With Basic Javascript 🤘

Chris Hansen ・ Aug 27 '21

Your NextJS + Styled-Components + Darkmode quick-starter

Chris Hansen — Mon, 13 Dec 2021 19:39:33 +0000

Hey devs 👋

This past weekend, I decided to make a little quick-starter for all my NextJS and Styled-components based projects.

It was a little annoying to bring up the docs for each tool to implement because I can never remember all the setup and configurations 😅

So, if you're a react dev tinkering with NextJS, you can use my starter to bootstrap your next app!

It has the bare minimum including a:
functioning Navbar, Mobile Nav, example component, react-icons library, and darkmode! That's it.
Please customize to your needing! If you understand React, basic CSS and :root variables, you'll find yourself editing and navigating through the files very easily. It also features the easiest Darkmode you've ever experienced!

Resources

Getting started

As always, after cloning the repo, to get started simply run npm install , and in the case of a NextJS app, you're going to run npm run dev to start the development process.

That's it 💯

If your familiar with create-react-app, the pages folder is like your src folder. Inside you'll find the index.js file, which is like your App.js file in a create-react-app project. You'll also find _app.js which is like your index.js file in create-react-app.

Conclusion

That wraps up Your NextJS + Styled-Components + Darkmode quick-starter! I hope you can make use of this quick-starter. NextJS is seriously cool, styled-components makes CSS even more fun, and darkmode doesn't have to be such a drag with next-theme! Have fun!

Have questions

Running into problems or have any questions!? Hit me up on Twitter!

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

#webdev #beginners #html #css

Master Frontend Development 💻 By Cloning These Websites 💯

Chris Hansen ・ Sep 14 '21

Great Beginner Friendly API's To Start Practicing Frontend Development 🧑‍💻

Chris Hansen ・ Aug 30 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

A No-Thrills Minimal Nextjs Blogging template With Contentful CMS

Chris Hansen — Wed, 01 Dec 2021 20:28:43 +0000

This is my first attempt at making a blogging template for community! I really hope it can be useful to someone! Please be aware, I don't claim that this will have best practices. 😅 I was essentially learning Next.js and a Chakra-UI as I went along.

Please hit me up on 👋 Twitter if you have any questions!

Hey devs!

After a distraction here and there, a break and holiday, I finally built a nextjs blogging template for anyone to use!

It's very minimal and based on the 'masonry' layout. It has a darkmode, and a custom 'theme.' It also has a local 'template' .json file for you to easily change content in all of your components.

I would highly recommend you cruise through the Chakra-UI docs if you want to make any significant changes. There are ALL KINDS of pre-made components and UI elements ready to go in Chakra. It's very tailwind inspired, so rest assured it's a great looking UI library!

Resources

Setup

Clone repo
Install dependencies
Create your Contentful account
Set up your .env.local file and update the env variables
You should be ready to roll!
Don't hesitate AT ALL to DM me on twitter if any problems arise!

Step One

First, clone the repo.
Once you have your project locally, make sure to be at the root of your project, and install the dependencies

Step Two

Create your Contentful Account
Create your first content model. You'll need two. A 'Blog Post' model and a 'Project' model. You can think of a model as a simple schema, that's comprised of fields. So a 'Blog Post' model might have the fields, 'Title', 'Slug', and 'Caption.'
Let's create the 'Blog Post' model. It should look like this: Use this image to determine the field types. For example, you can see that the 'Blog Title' is of the Short Text type.
There are a few important additional details I need to cover for the 'Blog Post' model. In The 'Title' field, make sure you tick the 'This field represents the Entry title.' Also under the validation tab, make sure to tick required and unique.
For your 'Slug' field, make sure to also make that field 'unique' under the validation tab. In addition, make sure to set its 'Appearance' to type 'Slug.'
Lastly, for the 'Date' field, under the appearance tab, I selected, 'Date Only' format.

Step Three

Create your 'Project' model. Again, use the image below to determine the types for all other fields. For example, you can see the 'Project Description' field is set to type 'Long Text.'
Just like our 'Blog Post' Title field, let's make sure to tick the 'this field represents the 'Entry Title' for our 'Project Name.' Also, be sure to tick the 'required' field in the validation tab.
The default set up for all other fields should be fine.

Step Four

Create your .env.local file and be sure to update the values to your own.

Tips

If you ever forget the 'id' of your Content Models at our Contentful API, simply head back to Contentful, go to your Content Models, click your interested Model, and on the right panel towards the bottom, you will see the 'Content Type Id.'

Also, if you ever forget the field ID's for each other Content Model, again, simply go to your Content Models, click your concerned Model, and simply click on the JSON preview tab. It will show your entire Model Type in JSON format, and you can see the Field Name, along with the Field ID. For example, since I named our first Field, 'Blog Title,' it's actual ID that we'll use on the frontend is 'blogTitle.'

You can also find your ID's by simply clicking on 'settings' on each individual Content Model's field.

Wrapping up

That's the end to A No-Thrills Minimal Nextjs Blogging template With Contentful CMS! I really hope you guys dig the UI of this. It's meant to be very simple, minimalistic, but at the same time, gets the job done. You can take this template, and customize the h*ll out of it!

If anyone at all goes through this entire tutorial and makes use of it, please let me know on Twitter! ✌️

Some other articles you may enjoy 😎

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

#webdev #beginners #html #css

Master Frontend Development 💻 By Cloning These Websites 💯

Chris Hansen ・ Sep 14 '21

Great Beginner Friendly API's To Start Practicing Frontend Development 🧑‍💻

Chris Hansen ・ Aug 30 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

#webdev #beginners #html #css

How to create a dynamic `scrollToTop` button in React! No library necessary! EVER

Chris Hansen — Wed, 20 Oct 2021 20:12:35 +0000

Hey devs 👋

Have you always wanted to know how to get that buttery smooth scroll back to top button!?

Ya don't need another library to achieve this! Get the job done in just a few minutes with some basic logic and javascript!

PREFACE

This is a speedcode tutorial, and I'll assume you have some working knowledge of:

HTML, CSS, JS
React
Good concept of CSS or SASS
Not necessary, but I'll be using Styled-components ( CSS in JS library )

Resources

Speedcode tutorial ⤵️

Conclusion

Thats it for "How to create a dynamic scrollToTop button in React! No library necessary! EVER" I hope you enjoyed the video, and hope you never have to use another scroll button library again! Once you get the hang of the code, you'll be able to add this to your website in just a couple minutes, no doubt about it! #happycoding!

Additional resources you may enjoy!

Master Frontend Development 💻 By Cloning These Websites 💯

Chris Hansen ・ Sep 14 '21

Easiest Way To Add Icons To Your React Apps 😎

Chris Hansen ・ Aug 10 '21

Blog Highlight Section Built with React and `CSS-in-JS`

Chris Hansen ・ Sep 1 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

Credit Card Payment UI With ReactJS

Chris Hansen — Fri, 17 Sep 2021 14:36:22 +0000

This is not a tutorial, or anything even informational. Just a place to share my project, hoping to inspire some creativity. Hopefully you learn about a new resource or try a new project. Repo is available!

Hey devs, we're pretty fortunate 😉

This badass platform gives us the ability to show off a project with the "#showdev" community tag and I am taking that opportunity!

Resources

Try different credit card issuers:

Visa cards start with 4
Mastercards 51
Discover 6011 / or 65
Diners Club 300

Features

ReactJS
JSX
Basic Javascript
Custom SCSS
Cleave.JS
Dynamic rendering

Something to point out

The FUNNIEST thing about the entire project, what I am also the most proud of, is the holographic sticker on the top left! It's a picture of raindrops on a window! 🤣

Conclusion

Let me know what you think about it. So much more could be added to this. For example, I would like to add a rotateX animation that allows the user to instead enter their security code on the back, once they click on the form field! That would be cool.

If you are practicing frontend development and using React, give it a go! It's really based on all the fundamentals of React and the basics of Javascript.

Show off your project below if you end up giving a shot! I'm sure you can do something even better! 😎

Follow me on Twitter

for byte-sized web dev content!

You should also follow my Instagram

Dev-related stuff only!

Check out these other beginner friendly articles also written by me! ⤵️

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

Filter Your React Data With Basic Javascript 🤘

Chris Hansen ・ Aug 27 '21

Great Beginner Friendly API's To Start Practicing Frontend Development 🧑‍💻

Chris Hansen ・ Aug 30 '21

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

Master Frontend Development 💻 By Cloning These Websites 💯

Chris Hansen — Tue, 14 Sep 2021 16:49:28 +0000

UPDATE

I cloned one of these websites! I haven't built a website with pure html, css and js for a while, so I gave #14 Discord a go. This is how it turned out. Not by best work, but I worked pretty fast! 🤣
Discord Cloned

Why clone websites?

Frontend development has everything to do with the client side. Everything the user can see and interact with on their web browser.

Studies show that if a website does not load within 2 seconds, users bounce. How do you think users react if a website design is not up to par with modern designs and trends?

That being said, design has just as much importance as all the frontend programming going on in the background. After all, developers are tasked to implement a professional design into a working website all the time. It's very much an important piece of a frontend developers arsenal. Get good at it!

The goal

Master this frontend skill, by cloning these websites as close to identical as possible.

Try to incorporate functionality, like modals and drop downs. Include responsive design, like mobile navigation, and grids.

All websites listed below are similar, but just different enough to force different design concepts. For example, majority of these websites have:

Large homepage banners
Big block designs
Reversed grid columns
Full or half page menus
Sticky or absolute positioned navigations
Galleries
Dropdown / accordions
Minor animations like fade, or type effects
Two grid columns
Responsive design and more!

TIP: You can also use web scrapers to download all the assets you find on websites.
Extract Pics
Image Downloader

BONUS 🔥
If you want to go full on leet mode, add javascript functionality. Like routing, dynamic content, 3rd party APIs ( i. google maps ) etc.

⚠️ If you push your project up to the web, make sure to not claim your designs or assets as your own!

Websites for you to clone!

1. Netflix

When logged in Netflix is a pretty simple design. Horizontal rows, galleries, with a big featured banner.

2. Hulu

Just like Netflix, the logged in experience in Hulu is pretty similar. Has a large featured banner, and basically rows of movies or tv shows with every few rows having a featured section.

3. Apple

You'll know what I mean by "big block" design. Apple does this well. It's clean, intuitive and pretty straight forward. If you break everything down into smaller components, you'll see how easy it would be to implement the design.

4. Airbnb

Airbnb is such a beautiful website! The assets are amazing. Break this design down into smaller components, and you'll see how it's just a bunch of big rows and small rows. Blocks either spanning multiple columns, or the entire row.

5. SpaceX

Super easy design. SpaceX is basically multiple fullscreen images with fade up content and a link section.

6. NVIDIA

Another easy, but professional looking design. Just a banner, grid layout, and rows.

7. Razer

A mix of a large home banner, full page featured sections, and big box design. Have fun with this sick color scheme!

8. Salesforce

Another great website to polish your css skills. A mix of banners, rows, columns, reverse columns, big box design, but also has featured list, multiple call to actions, and fun images.

9. Adobe

Another big box design. But also features some cool background gradients.

10. Microsoft

Features a modal, big banners, multiple featured sections, big call to action. Pretty straight forward, but professional looking design.

11. Blockchain

Learn about blockchain while you clone this one. This design incorporates a few more difficult design concepts. It also features a big banner, call to actions, gradient effects, but also has big box designs as links and dynamic accordions. So not only does the accordion tab drop more content below it, it changes the image beside it! You probably have a tool of choice for this 🤔

12. Paypal

Features a big banner, call to action, and reverse rows. Straight forward, but effective design.

13. Slack

Slack features a fun homepage banner. In the banner is a toast banner, a call to action, a google sign in button, and a row of icons featuring companies that use Slack. The rest of the layout is a simple grid system with a typical reverse row design. Minimal animations, like hover effects.

14. Discord

Probably my favorite looking website on the list. It has fun vibrant colors, a minimalistic homepage banner featuring a call to action, reverse row grid layout, and a nice big featured section.

15. Amazon

The king of e-commerce. This is a straight up "show off" mockup. If you can nail Amazons design, your frontend dev design skills are up to industry standard. Features a slightly more complex grid layout, with content spanning one or more rows and columns. Has a search bar in the navigation. Also has recommended section, hover effects, carousels, etc. Have fun with this behemoth!

16. Playstation

Playstation.com has a nice large homepage banner featuring a slide show with a nice fade in effect. You can code this from scratch, or use your favorite library. Cloning website really gets you thinking about your tools. Also features single row gallery, large featured banners, dynamic content on click, multiple full screen call to actions, and minor animations. This is probably my second favorite looking website. Really enjoy the subtle animations and UI. It also really helps you polish multiple design concepts.

17. Nintendo

Ahhhh, childhood memories! Well, kind of, more of a Sega player. But I digress! Nintendo.com has a nice colorful homepage banner with a minimal call to action beneath it. Has a continuously scrolling single row gallery which is new on the list. So this will offer some great practice. Again, you can use a library for this as you don't need to re-create the wheel every time. Other than that, straight forward big box grid design and single row galleries. One row will help you practice "quick favoriting" items.

Conclusion! 😎

That's a wrap on "Master Frontend Development 💻 By Cloning These Websites 💯" I really believe cloning one or multiple of these website, will drastically improve your CSS. There's a lot of analytical thinking that comes with cloning websites, as you break down designs from larger to smaller components. And you also need to think about the best tools as you approach new problems. Then there is responsive design. A mobile or desktop first approach? For example, do you think Microsoft.com should prioritize the desktop or mobile experience? If it was up to me, I'd like to think most people wait till they can access a desktop to make very large purchases like desktops and laptops. Therefore I'd probably prioritize the desktop. This is a big part of a Frontend Developers job! Whether you're freelancing or working for a company. Designs are either up to you, or by professional designers. Master this part of Frontend Development!

Follow me on Twitter

for byte-sized web dev content!

Check out these other beginner friendly articles also written by me! ⤵️

Great Beginner Friendly API's To Start Practicing Frontend Development 🧑‍💻

Chris Hansen ・ Aug 30 '21

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

Blog Highlight Section Built with React and `CSS-in-JS`

Chris Hansen — Wed, 01 Sep 2021 16:17:38 +0000

⚠️ This is not a tutorial, or anything even informational. Just a place to share my project, utilizing the #showdev tag! Hoping to inspire some creativity. Hopefully you learn about a new resource or get inspired for a new project! 💯

Resources

Tools

Project

Conclusion

That's a wrap on Blog Highlight Section Built with React and 'CSS-in-JS.' I hope you liked it. Let me know what you think in the comments section!

Hit me up ⬇️

Don't forget to follow me on Twitter for more byte-sized web dev content!
Also give my Instagram a follow! ✌️

Filter Your React Data With Basic Javascript 🤘

Chris Hansen ・ Aug 27 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

Easiest Way To Add Icons To Your React Apps 😎

Chris Hansen ・ Aug 10 '21

Great Beginner Friendly API's To Start Practicing Frontend Development 🧑‍💻

Chris Hansen — Mon, 30 Aug 2021 18:45:56 +0000

UPDATE:
I have updated my list of beginner friendly APIs.
Check out numbers 9, 10 and 11 on the list! 🔥

Every beginner has been there. Once you really start to get efficient at HTML, CSS and Javascript, it's only a matter of time before you want to start playing with real-life data.
There are so many ways developers can manipulate data to make really cool and beautiful websites.

This is my list of low barrier to entry Rest API's to get you started! 💯

1. JSONPlaceholder

JSONPlaceholder provides a restful API to a wide variety of resources.

Posts
Comments
Albums
Photos
Todos
Users

2. Fake Store API

The Fake Store restful API provides the most important resources when you are trying to build you first mock e-commerce store.

Products
Cart
Users
Login Token

3. Unsplashed API

The Unsplashed restful API may live up to it's catchphrase as the "The most powerful photo engine in the world." What you'll have available to you:

Over 3 million photos
Search photos by keyword
Search random photos
Multiple datasets

4. Quotes API

The Quotes rest API provides a wide variety of different quotes and types of quotes, like:

Quote of the day
Quotes by categories
Randomly selected quotes
Quotes by Authors
Quotes by popularity

5. NASA API

One of my personal favorites, and one I believe will truly get the inner geek's imagination running wild. The Nasa restful API provides multiple resources like:

APOD ( astronomy photo of the day)
Astroid NeoWs ( near earth object web services)
Insight ( mars weather services )
Nasa Image and Video Library
And so much more!

6. SpaceX API

How about the worlds most popular space company, SpaceX! This restful API offers a variety of cool rocket details like:

Rockets
Rocket launches
Core
Starlink
Launchpad
Landing pad data

7. Coingecko

The Coingecko API is my go to resource for all things crypto. There are many out there, but this is the easiest hands down. Requires no api key, it's free, great for side projects! It provides multiple endpoints:

Coin price
List of all coins
Markets
Tickers
Price history
Market charts
Rage in prices
Contracts
Trading platforms
Exchanges and more!

Thanks to izaias 👍

izaias • Aug 31 '21

Boa noite, ótimo trabalho.
Vc teria ai em sua pesquisa api para moedas virtuais seria de grande valia.
Obrigado e parabéns 😀

8. OpenWeatherMap

The OpenWeatherMap restful API is a beloved resources for developers as well as my personal favorite, due to its simplicity. It does require an API key, but don't let that discourage you. Simply append your API key to your endpoint, and you're set. Get weather data the way you prefer:

by City name
by State code
by Country code
by Zip code
by Rectangular zone of geographic coordinates
by Circular zone of geographic coordinates
Multiple units of measurements
Icons included

Thanks to Felipe Panegalli 👍

Felipe Panegalli • Sep 2 '21

Great Post. If will you be like to add a new API... Wheater API (classic ) :D.

9. RandomUser

The random user API is an absolute must for beginner developers! Quickly prototype new concepts or designs with instant access to random users! Comes with all the data you need too:

Name
Email
Birthday
Address
Country
Phone
Company title and more!

10. SWAPI

Who doesn't sci-fi!? Proud geeks should appreciate this one. The Star Wars API has all the data you can possibly want from your favorite Star Wars characters. Get data like:

Planets
Spaceships
Vehicles
Films
Species
Home planets
Date of Birth and so much more!

11. PokeAPI

Pokemon is just as relevant to me as ever! Get instant access to the very easy to use restful Pokemon API. Get your fix of Japanese anime culture and get all the data you need on your favorite pocket monsters like:

Types
Abilities
Forms
Species
Stats and more!

Conclusion 👏

That's it for Great Beginner Friendly API's To Start Practicing Frontend Development! 😎 Without a doubt these very beginner friendly API's will get you inspired to publish your next app to share with the world!

Let me know what you think and hit me up on Twitter and Instagram

// Detect dark theme var iframe = document.getElementById('tweet-1387078891261493249-342'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1387078891261493249&theme=dark" }

Also check out some of my other articles on productivity and react!

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen ・ Aug 18 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21

Filter Your React Data With Basic Javascript 🤘

Chris Hansen ・ Aug 27 '21

Filter Your React Data With Basic Javascript 🤘

Chris Hansen — Fri, 27 Aug 2021 04:52:14 +0000

You fetched some data in React, now what?

Don't just map through your data right away.

Recently, one of the first things I like to do whenever I'm working with data, is to use basic javascript to add some user friendly "reactivity."

My aim is to make this quick, and impactful. Let's get straight to it 💯

Preface and Resources 📚

Although this is quick and beginner friendly example, I'm assuming you have some working knowledge in:

Let's take a look at an e-commerce example

A gallery or grid just like this one, showcasing the entire stores products may be something you see, when initially arriving at an e-commerce website.

Or how about your portfolio? You may have all your projects displayed beautifully. However, wouldn't it be better if we gave our users the ability to filter our projects by technologies like Vue or React or our stores products by category?

Fresh create-react-app project.

Let's start off with our trusty create-react-app. I left all pre-loaded files and CSS alone. Only thing I did was removed the boilerplate code in our App() and the logo.

First, let's import useState and useEffect in our app like so: ```import

{ useEffect, useState } from 'react'


Then, in our terminal let's install our choice of CSS in JS library like so:

yarn add styled-components // yarn
npm install styled-components --save // npm


Next, let's import our library like so: ```import

 styled from 'styled-components'

Lastly, I moved the React logo png from the /public folder into our /src folder. Then I renamed it to react-logo.png. I will use this image for our loader later. Import it into our App.js like so: import Logo from './react-logo-.png

All our imports at the top should now look like this

Let's knock a few things out in `index.js` next

We're going to add global styles to our app so we can adjust the body and html how we like. At the top of index.js: ```import

{createGlobalStyle} from 'styled-components'

Next we're going to create a `GlobalStyles` variable and add some styles to the body and html. It should look like this:

![How globalStyles should look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxl6thirdcyuiqohxeco.png)
Lastly, above our `<App/>` component in `ReactDOM.render()` add our `<GlobalStyles />` component. Don't forget to add the `theme` prop with our `GlobalStyles` variable as it's value, like so:

![How to wrap our app component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj00q9bpi3f1fxp5o5j4.png)
That's it for index.js! 

---

## Back in `App.js` lets set up our state
We're going to need two pieces of state. A `products` state, and a `loading` state. 
```javascript


  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);

We're expecting an array of data for our products, so we'll initialize it with an empty array. We also want a loading state, so users know things are happening in the background, while fetching data. Like a spinning logo for example.

Let's get some data

Let's start with a function that handle our fetch request.
We'll be using the fetch api. I prefer to use two variables. One for fetching our endpoint, and one for storing our results. It looks like this:



const fetchproducts = async () => {
    setLoading(true);
    const req = await fetch(`https://fakestoreapi.com/products`);
    const products = await req.json();
    setProducts(products);
    setLoading(false);
    console.log(products);
  }

We're also setting the loading state to true during our request, and once we have our results, setting the loading state back to false. We should also console.log() our products, to make sure we are indeed populating our state with data. It'll also make it easier to see our response from the API in chrome dev tools.

If you'd like to learn more about the Fetch API and async functions check out this resource.

Lastly, let's use our useEffect hook.
Below our state, and fetchProducts() function, let's call our request:



useEffect(() => 
  fetchProducts();
},[]);

We have our state, we have our data, now let's start creating our components

We are going to need a Grid, Product, Price and Image and Loading component. And don't create new files, as we're building custom styled components.
Below our App() but before our export let's begin creating our components.

Let's add our components to our `App()`

Now that we have our layout, you're probably noticing we're not using our data from our state.
Let's map through our products array like so:

Let' take it one step further. Let's take a preventive measure, and make sure we only render our products if we indeed have data in our states product array. And, we'll only render our data if we are no longer fetching the data from our API. A very simple way to handle this would be a ternary operator. Let me explain what's happening here in pseudocode: if notLoading AND if weHaveData ? mapThroughOurData : ELSE render loadingComponent.

Hopefully, everything is working properly. If you are running into any problems, please hit me up on Twitter!

You should have a fully responsive web app displaying content from the Fake Store API.

However, we have not added that spicy "reactivity" yet.
Let's do that next!

Let's add a query state to our App() component. Go ahead and add const [query, setQuery] = useState(''). Our state should now look like this:
Next, we need an event handler to handle the users input, and update our query state. It looks like this:
Next, let's build our Input as a styled-component. It should look like this:
Add our Input component to our App component and add the onChange prop and set it to our handleUserQuery function like so:
We're almost done! Let's add the secret sauce. We're going to create a simple function and its only responsibility is to filter our products state by filtering out everything that does not match the users input. It looks like this: ```javascript

const filteredProducts = products.filter(product =>
product.category.toLowerCase().includes(query.toLowerCase()) || product.title.toLowerCase().includes(query.toLowerCase())
);

We're simply filtering __out__ any products that do __not__ match our users input. Our users will be able to filter their results by searching for
categories or titles. 
6. Lastly, instead of mapping through `products` in our `Grid` component, let's instead map through `filteredProducts.` Replace `products` with `filteredProducts` and that's it! The store should render all the same, accept the user now has the ability to filter results according to the way they search for their products. 

--- 

## Conclusion! 👏
That's a wrap for __Filter Your React Data With Basic Javascript__ 🤘 The idea was to inspire you to take this concept, and use it the way you see fit! Wether that's for an e-commerce store, a photo gallery, or your projects for your personal portfolio! You can get really creative with some basic javascript 😎 If something doesn't make sense, or you find an error, please don't hesitate to yell at me on [Twitter!](https://www.twitter.com/hyggedev) 

--- 

## Are you a beginner web dev on the learning journey!? 
Check out some of these articles also written by me! 


  
    
      
    
  
  
    
      How to stay focused 🔍 as a self taught Frontend Web Developer 💻
      Chris Hansen  ・ Jul 29 '21
      
        #beginners
        #webdev
        #productivity
        #devjournal
      
    
  



  
    
      
    
  
  
    
      No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖
      Chris Hansen  ・ Aug 18 '21
      
        #webdev
        #tutorial
        #react
        #javascript
      
    
  



  
    
      
    
  
  
    
      Easiest Way To Add Icons To Your React Apps 😎
      Chris Hansen  ・ Aug 10 '21
      
        #webdev
        #tutorial
        #javascript
        #react
      
    
  



  
    
      
    
  
  
    
      How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻
      Chris Hansen  ・ Aug 3 '21
      
        #webdev
        #tutorial
        #javascript
        #react

No Fuss Dark-Mode Toggle with React & Styled-Components! 🌞↔️🌖

Chris Hansen — Wed, 18 Aug 2021 05:32:36 +0000

Have you noticed dark mode is pretty standard lately?

Well, that's because it's badass!

Let's achieve this new standard of awesome by utilizing styled-components and React!

It's super easy to implement, so let's get straight to it! 💯

Resources

👉 Demo

👉 Repo

Some things I'm expecting you to know

Development Environment
Basics in React
Basic S(C)ass

1. Fresh React project

Let's clean up the file structure ~ if you want. I deleted all unnecessary files for this project. Removing App.css and all testing related files. Be sure to remove necessary lines of code in index.js. I also cleaned up the boilerplate between the header tags.

2. Install and Import styled-components

With a fresh project, let's now install and import styled-components.

yarn add styled-components or
npm install --save styled-components

Let's now import styled-components like so:



import styled from 'styled-components'{% raw %}`
```

---
## 3. Let's create a simple landing page with styled-components

In our `App()` let's return a `Page`, `Container`, `Heading`, `H1`, `P`, `Toggle`, and `ThemeImage` component, respectively. It should look like so
![Example code showing the Page, Heading, H1, P, Toggle, and ThemeImage components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dvrh7tpi1vtvfp2lp5f.png)

---

## 4. Now that we have our layout, let's create each of our components
`Page` and `Container`
![Page and Container component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0p4lz4gcacptj0ptwy7f.png)
`Heading` and `H1`
![Heading and H1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6io3xddrn3oypq22rjog.png)
`P` and `Toggle`
![P and Toggle components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fog9wx0oy7z4o9ko5ah2.png)
`ThemeImage` is the component that will contain our toggle state images 
![ThemeImage component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lokti6hl65uhkz6gd65n.png)

---

## 5. Let's create state for our toggle component
In order for us to to toggle between light and dark mode, we need to hold state. Let's begin by importing the useState hook. `import {useState} from 'react'`. Then add it to your `App()` component like so:
```javascript 
const [isDarkMode, setDarkMode] = useState(false);
```
Next let's add the logic that will toggle between light and dark mode for our button `Toggle` component. 
```javascript
const handleToggle = () => {
   setDarkMode(!isDarkMode);
   // console.log(isDarkMode);
}
```
This functions only responsibility is to toggle the opposite of what the current state is. In other words, if the state is currently `true`, toggling it will become `false`. If `false` it becomes `true`. 

---

## 6. Update our `Toggle` component
Now that we have a function that can toggle our light ~ dark state, let's update our `Toggle` component like so:
```javascript
<Toggle onClick={handleToggle}></Toggle>
```

---

## 7. Import images to display the active theme
If we want to show our users the current and next theme, we can do so visually with the use of a Moon and Sun image. Let's import the images at the top of our code like so:

*images are available in the repo*
```javascript 
import Moon from './images/moon.png';
import Sun from './images/sun.png';
```
Then lets update our `ThemeImage` component like so:
```javascript
<Toggle onClick={handleToggle}>
   <ThemeImage src={ !isDarkMode ? `${Sun}` : `${Moon}` } />
</Toggle>
```
Here we are updating the `ThemeImage` components src attribute as it is an instance of `img`. We are also conditionally setting the image with a simple ternary operator while also utilizing template literals. 
I'll explain with some pseudocode. You can read this like `if stateIsNotDarkMode ? render Moon : else render Sun.`

---

## 8. Let's update some style properties in our components
We're almost done! Let's update the `background` and `color` properties in a few of our components 

First, Let's change the `Page` components background style to: 
```css
background: ${props => props.light ? "#eee" : "#333"};
```
Secondly, let's change the `H1` components color style to: 
```css
color: ${props => !props.light ? "papayawhip" : "#000"};
```
Lastly, let's change the  `P` components color styles to: 
```css
color: ${props => !props.light ? "#eee" : "#333"};
```
Here we are conditionally styling our background or color properties based on the prop that we pass into our components. If the component contains the `light` prop, render this color, else render this color.

---

## 9. Pass in our default Theme to our components with the `light` prop
All we have to do now is update our components in the layout with the default `light` prop. Like so:
```javascript
  return (
    <Page light={!isDarkMode ? true : false}>
      <Container>
        <Heading>
          <H1 light={!isDarkMode ? true : false}>Dynamic Styling with Styled-Components</H1>
          <P light={!isDarkMode ? true : false}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta error natus at vitae sint qui sapiente impedit rerum commodi fugit ullam repudiandae itaque, saepe fuga facere temporibus excepturi dolore officia?</P>
          <Toggle light={!isDarkMode ? true : false}  onClick={handleToggle}>
            <ThemeImage src={ !isDarkMode ? `${Moon}` : `${Sun}` } />
          </Toggle>
        </Heading>
      </Container>
    </Page>
  );
}
```
Here I am also conditionally rendering the `light` prop to either be true, or false, depending on on our state. 

---

## Conclusion! 👏
Congrats! That's a wrap on **No Fuss Dark-Mode Toggle with React & Styled-Components!** Hopefully, if everything went right, you were able to implement a badass dark mode into your project, in 9 simple steps! 

Please don't hesitate to hit me up on [Twitter](https://twitter.com/hyggedev) in regards to any questions, concerns or if you just wanna say hello! 

---

## Are you a beginner web developer!? 

  
    
      
    
  
  
    
      How to stay focused 🔍 as a self taught Frontend Web Developer 💻
      Chris Hansen  ・ Jul 29 '21
      
        #beginners
        #webdev
        #productivity
        #devjournal
      
    
  



  
    
      
    
  
  
    
      How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻
      Chris Hansen  ・ Aug 3 '21
      
        #webdev
        #tutorial
        #javascript
        #react
      
    
  



  
    
      
    
  
  
    
      Easiest Way To Add Icons To Your React Apps 😎
      Chris Hansen  ・ Aug 10 '21
      
        #webdev
        #tutorial
        #javascript
        #react

Easiest Way To Add Icons To Your React Apps 😎

Chris Hansen — Tue, 10 Aug 2021 00:01:58 +0000

A great UI begins with some great icons.

Icons are important as they add familiarity to your website. Such as a hamburger menu. Everyone knows to click a hamburger icon to get more information, or how a down arrow at the bottom of the page, indicates the user should scroll.

If you're working with React, it's extremely easy to implement icons into your projects, with thousands of choices from various libraries.

Let's begin.

Resources

react-icons: https://react-icons.github.io/react-icons
Demo: https://react-icons-blog-example.netlify.app/

chansen17 / react-icons-blog

Example on how to use react-icons in a react-project.

1. We're going to be using the `react-icons` package 📦

Download react-icons either with yarn or npm. Like so:

yarn add react-icons 
or 
npm install react-icons --save

2. Import Icons ↩️

On the react-icons homepage, you'll see a ton of libraries to choose from. From Bootstrap, Font-awesome, Material-UI and many more. Choose your favorite.

Once you find the icon you like, click to add the code to your clipboard.

Now, in App.js all we need to do is import the Icon and the library like so:

// fa is the reference to the font-awesome library
import { FaReact, FaSass, FaLinux} from 'react-icons/fa';

// md is the reference to the material-ui library
import { MdFavoriteBorder, MdChat } from 'react-icons/md';

3. Let's use our icons 👍

Lastly, in your App() component, all you need to do is use the Icon like any other component. So back in step 2, if you imported the React, Sass, Linux, Favorites and Chat Icons, just use them like so:

function App() {
  return (
    <ul>
      <li><FaReact/></li>
      <li><FaSass/></li>
      <li><FaLinux/></li>

      <li><MdFavoriteBorder/></li>
      <li><MdChat/></li>
    </ul>
 );
}

Conclusion 😎

Congrats! That's it! That's all it takes to bring Icons into your React projects. You have the choice of thousands of Icons from 21 different libraries! And the best part is you only import the Icons you need from each individual library, which helps with performance!

So bring some flare to your UI, & get creative!

Are you on the Web Dev learning journey!?

Check out my other posts on productivity and React.

How to stay focused 🔍 as a self taught Frontend Web Developer 💻

Chris Hansen ・ Jul 29 '21

How to build a Responsive 📱 React Navigation Menu with Styled-Components 💻

Chris Hansen ・ Aug 3 '21