Skip to main content
React JS Banner

A Beginners Guide to Learning ReactJS

Understanding props, module bundling, project structuring and more. I have started the nosedive into learning ReactJS and all of the attached bits and pieces (I used to be a Gulp man, now it looks like Webpack is the one).

 

This post is to keep all of the articles and resources I have found helpful in one place, and hopefully help others. The idea is to continually add to this as I learn. Stay Tuned!

 

Setting the Scene

What editor to use?

I have always used Brackets for my dev, but for some reason Brackets renders ReactJS incorrectly. It highlights sections that it shouldn’t, and doesn’t highlight sections it should. This meant it was time for a change. Enter Atom. Easy to add themes, plugins, and is integrated with Github. It works nicely with React, and also has a sexy little thing called Teletype.

https://atom.io/

 

Structuring projects and naming components in React

To allow a project to scale, and for other members of the team to understand what the hell you have created, the project needs to be properly structured. I wanted to make sure from the word go the projects I was creating were structured correctly, and the components named in a understandable and consistent way. This article was the perfect jump off point for me.

https://hackernoon.com/structuring-projects-and-naming-components-in-react-1261b6e18d76

 

 

Understanding Props

React JS Tutorials: Props

A consise article breaking down props in an easy to understand way. Helped me a great deal.

http://www.reactjstutorial.net/props.html

 

Google Sheets?

This isnt “database” really, but both of these links are nices example of how you can easily send simple data to Google Sheets using JS.

https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server

https://blog.416serg.me/building-an-app-using-google-sheets-api-react-d69681d22ce1

 

 

What about a database?

Intro to Firebase and React

CSS-Tricks has put together a brilliantly written guide to integrating Googles Firebase with React.

https://css-tricks.com/intro-firebase-react/

 

Module Bundling, and managing those tasks

How to use Webpack with React: an in-depth tutorial

In this tutorial you will see the basics of Webpack for React to get started, including React Router, Hot Module Replacement (HMR), Code Splitting by Route and Vendor, production configuration and more.

https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060

 

CSS Modules & Sass in Create React App

How to use modules and Sass side by side

https://medium.com/@kswanie21/css-modules-sass-in-create-react-app-37c3152de9

 

Adding Images

This one stumped the hell out of me! Why can’t I just add an image like usual and be done with it. Well apparently that isn’t the case. React also wants to do some funny business with the image, and if it is a smaller size it loads a base64 version. All about the speed! The two links below go about the same thing in different ways. Both really helped me get my head around it!

https://blog.hellojs.org/importing-images-in-react-c76f0dfcb552

http://interglobalmedianetwork.com/post/importing-images-in-react/

 

 

Keep that app speedy

Progressive Web Apps with React.js — Page Load Performance

Mobile web speeds matter. On average, faster experiences lead to 70% longer sessions and 2 x more mobile ad revenue. Investments in web perf saw the React-based, Flipkart Lite triple time-on-site, GQ get an 80% increase in traffic, Trainline make an additional 11M in yearly revenue and Instagram increase impressions by 33%.

https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2

 

Reduce class name size generated by CSS-Loader

CSS-Loader is a brilliant plugin that allows CSS to be used as modules. With this setting it creates randomised names for module and css function. The issue is the name tends to be quite long.

The solution is here!

https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b

 

Examples

Create a quiz

One of my past clients had me make a quiz on WordPress. To solve the problem they had I had to write a crazy about of JS. If I had known about React I would have just done this.

http://carinyperez.com/create-quiz-react/

 

Nike React

Creative / Development Inspiration 30

This is my first version of Creative and Development Inspiration (See the first ever Creative and Development Inspiration, we have come a long way), organised in a more understandable way. Rather than the blog being thrown together with no structure like in the past, I will be breaking each section up so you can go straight to what interests you. This also helps me go back and find that interesting link I found, for when I need it some point in the near future!

 

Website Inspiration

This weeks selection of websites that inspired me. I will always try to keep them relevant to design and development, but sometimes its just a nice website!

 

Audi is beta testing a new site

This new website for Audi simply and efficiently shows the models of each car. Granted, I haven’t tested it on mobile, but it looks great on desktop!

https://beta.audi.co.uk/models.html

 

Nike React

Nikes website for their React brand. Cleverly put together, a bit of fun as you build your own show.

https://www.nike-react.com

 

 

Designer Resources, examples and inspiration

Articles on the newest design concepts, why things should be done in a certain way, or just plain old sexy images. Always related to web, always meant to inspire.

 

WTF! (Whats the Flow)

If you don’t read anything else on this weeks Creative and Development Inspiration, read this! A great article on why User Flows are so important, and how they should be laid out. Too many people don’t follow this, and it leads to problems further down the line.

https://uxdesign.cc/the-biggest-wtf-in-design-right-now-87139f367d66

 

Why You Shouldn’t Use Bright, Saturated Colours for Backgrounds

If you’re using a bright and saturated colour for your background, you’re making it hard for users to keep their eyes on your page. Bright, saturated colours attract the most user attention. Too much of it in a large area overstimulates the retinas which can strain the eyes.

http://uxmovement.com/content/why-you-shouldnt-use-bright-saturated-colors-for-backgrounds/

 

 

Development Snippets and Samples

This weeks selection of libraries, code snippets and development inspiration. I will always try to include this section, and hopefully help you grow your projects.

 

RModal JS

A 1.2kb modal dialog box with no dependencies. All browsers seem to be supported, up from IE9, and it is Bootstamp and Animate.css friendly. Worth a look.

https://rmodal.js.org/

 

Keyframe App

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor. And it gives you the CSS when you’re done.

https://keyframes.app/

 

Nano JS

nanoJS is around 100 lines of code (0.6 Kb compressed) JavaScript library for basic DOM manipulation. It has jQuery like syntax and supports chaining.

https://vladocar.github.io/nanoJS/

 

Hybrids

A brilliant UI library for creating Web Components with simple and functional API

https://github.com/hybridsjs/hybrids

 

 

A bit of everything

You try so hard to categorise everything, and then you find an article that doesn’t quite fit, but is worth linking!

 

How not to write an error message

Discover all the ways the internet’s most well-meaning messages can go horribly, horribly wrong.

https://webflow.com/blog/how-not-to-write-an-error-message

 

Google Material Design

Creative / Development Inspiration 29

I had a lot of fun collating this weeks creative and development inspiration run down. There have been so many great projects released recently. Take a look and let me know which one was your favourite.

 

Material.io

Google keep pushing and pushing – as shown in Creative and Development Inspiration 21. Now they have redesigned their “Material Design” style rule book. God damn its pretty. Open sourced, and designed specifically to help teams build digital experiences. Have a click about the site, so much to see.

https://material.io/

 

7 Rules for Creating Gorgeous UI (Part 2)

This guide for “visual aesthetics” covers some very interesting points. The section on laying text over an image is very prominent to me, seemingly an issue that crops up time and time again. Nicely broken down with examples and explanations. Worth a flick through.

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

 

Screely

Screely instantly turns your screenshot or design into a beautiful image you can share anywhere. No Photoshop or Sketch templates necessary! This is brilliant for quickly sending screenshots to clients, but making sure they look that little bit better.

https://www.screely.com/

 

More Than Pixels: Selling Design Discovery

I am constantly pushing to make the web development process more efficient and more informed. When juggling projects, and dealing with many stakeholders (most of whom aren’t interested in dev…understandably…) it is easy to push past the toughest bit. Research and analysis of a project is not something at the forefront of our minds, and it should be. Smashing magazine shows us how this can be covered, and profitably.

https://www.smashingmagazine.com/2018/05/more-than-pixels-selling-design-discovery/

 

Heavenly Hues

Design Seeds have been on my radar for a whilst now, but I have never written about them. Daily colour palettes from photos, this particular palette vibed with me on this sunny day. I would recommend looking through some of there other posts. Some great colours.

https://www.design-seeds.com/in-nature/heavens/heavenly-hues-34/

 

Homey landing – Website Landing Page Design

Scrolling through Dribble, I stumbled across this great landing page design by Mehedi Hasan. Really nice light style, with lots of spacing, and a really draw on your eye.

https://dribbble.com/shots/4608766-Homey-landing

Colour Wheel

Creative / Development Inspiration 28

Tabler

Tablet is a premium and Open Source dashboard template with responsive and high quality UI. It has so many modules and components that it could be used immediately off the bat with no customisation required. Built with Bootstrap and icons integrated into thew build, its definitely bookmark-able.

https://tabler.github.io/

 

Nimiq Miner WP

I have mentioned Crypto Currency before in this blog, and am a strong advocate of the idea. I have recently been following a project called Nimiq, which labels itself as “the blockchain designed for simplicity”. I agree with this, the wallet is easy to set up, transfers are so fast! and mining is so easy! Because of my belief in the project I have started work on a WordPress plugin for mining Nimiq. It is at early stages with lots of features in the pipeline. Take a look!

https://github.com/justlikethisdesign/NimiqMinerWP

 

Three Essential Design Trends, May 2018

Web Designer Depot have written this great summary of what they thing the top 3 trends are of May. They have included some great examples of actual websites to go alongside their trends. Perfect website design inspiration.

https://www.webdesignerdepot.com/2018/05/3-essential-design-trends-may-2018/

 

Why You Should Never Centre or Right Align Your Logo

Many designers assume that centre or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.

http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo

 

Colour Theory

As a designer in the digital era, you certainly don’t have to stick to the colours available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to colour. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.

 

Canvas covers Colour Theory is a way that makes it so easy to understand. Definitely on the bookmark list for me.

https://www.canva.com/learn/color-theory

 

Priority Guides: A Content-First Alternative to Wireframes

A List Apart have put together this expansive article covering how Content-First allows you to better understand what is required on your website. They break down each stage to show how much simpler the concept is.

http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes


How paper wireframing will make you a better designer

This one goes against the above article. However, in a sense they also go hand in hand. The idea of moving away from from a computer and getting hands on allows a greater freedom of expression. You are not limited by the software and its toolbar. Worth the read.

https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13

Vector Art

Creative / Development Inspiration 27

Because we had a bank holiday (and I was BBQing and generally being sociable) I wasn’t able to get this weeks rundown out when I had hoped. However, you probably wouldn’t have read it anyway! I had a massive list of bookmarked articles and examples for this week, and have managed to get it down to 7 (all about quality over quantity here!). This weeks creative design and development inspiration covers a wide range of topics, from a incredibly small facial recognition library, how Photoshop shouldn’t be the final decision, and some pretty vector designs.

 

pico.js: a face-detection library in 200 lines of JavaScript

This library has so many potentials. A face detector in only 2kb of code. Take a look at the demo!

https://github.com/tehnokv/picojs

 

Scrolling interactions and techniques

Some greats do’s and don’ts of scrolling interactions in design. The article breaks down different beliefs about scrolling interaction and decides if they are correct. Some great examples including Nikes app and the Medium UI. This comes just weeks after I spoke about Scrollbooster on week 21, a great scrolling library – definitely worth a look if you haven’t already!

https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716

 

Optical Adjustment

So many of us rely on Photoshop and the concept of “Pixel Perfect” development. Luke Jones discusses how this isn’t always thew best way. The irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can’t.

https://medium.com/@lukejones/optical-adjustment-b55492a1165c

 

UN POSTER AL DÍA

Some great vector illustrations to give your brain something a bit different!

https://www.behance.net/gallery/64617617/Un-poster-al-dia

 

The Ultimate Guide to Font Sizes in UI Design

This is very text heavy, but well worth a bookmark. Erik puts 4000 words on the internet to help UI designers with the correct font sizes for different devices. No fear, it has a Table of Content to navigate!

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

 

Particle Effects for Buttons

I personally wouldn’t use this effect on any projects, but it is a nice effect and example of what can be achieved.

https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/

 

Responsive Type – Sass template

As Kyle states: “The last time you will ever have to worry about responsive type, seriously! Configure all type settings in one file using sass variables.” I haven’t used this yet, but I am definitely going to!

https://github.com/kyle-villeneuve/responsive_type

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

A Beginner’s Guide to Webpack 4 and Module Bundling

This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

https://github.com/nhnent/tui.calendar

 

Choosing cameras in JavaScript with the mediaDevices API

The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.  This simple tutorial walks you through the steps.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036

 

CSS Sliders

Creative / Development Inspiration 25

A new website is sometimes a bad idea

“We need a new web design!” Or “Our website has to be turned upside down!” These are slogans that are invariably evacuated every few years in many organizations. But is that always correct? It is not always necessary to set up a website or web design “from scratch” with every change or challenge in business management or marketing.

“https://cruxcreativesolutions.wordpress.com/2018/04/13/a-new-website-is-sometimes-a-bad-idea/

 

Gatsby

I found this static site generator when looking into how to link WordPress to ReactJS to create a web app with a well know backend. Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL.

https://www.gatsbyjs.org/

 

Glitch

Glitch is a creative community with thousands of bit of code. If you see an app you like you can jump on and edit it, meaning it is so easy to remix bits of code and deploy with no stress. I havn’t used it yet, but looks interesting.

https://glitch.com/

 

Optical adjustments in components

Every time you look at a computer interface, your brain is trying to fool you. No matter how hard you try to make things look aligned — the eye of the beholder will often disagree, due to a way we are wired to perceive objects in real life. So, as designers, the only option you have is to fool viewer’s brain back

https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0

 

Rematrix JS

On a recent project I have had to dive into the world of CSS transitions, and it was not a gentle dive. One library that was a great help was Rematrix. “Matrix transformations made easy”, and it really is. Definitely worth a look!

https://github.com/jlmakes/rematrix

 

How to Create a Good UI Slider in Mobile Design

Sliders present a great navigation option for sites and apps with only a few elements to explore. Sliders feel natural to users and provide a fun way to change settings or explore features. Sliders are easily recognizable to users, which makes them easy to use. This makes them a very practical option for designers to explore.

https://line25.com/ui-ux-design/how-to-create-a-good-ui-slider-in-mobile-design

TunnelBear

Creative / Development Inspiration 24

This weeks Creative & Web Development Inspiration does not touch the code at all. I have found 5 articles that look at the design aspect of websites, as well as a few ideas that cover the process of creating digital media. How emotional interfaces can help retain users, all the way to the idea of transparent design.

 

How To Design Emotional Interfaces For Boring Apps

Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation? Alice shares five secrets to more emotional UIs: gamification, humor, animation, illustration, and mascots.

https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/

 

Constant Small Improvements Pave the Way to Perfection

A great article from Invision on constant improvements on design. Baby steps forward. Constant iterations. Nonstop nudges in the right direction. That’s how an empire is built. The path to success doesn’t need to be sprinted. Start selling this to clients, for both a better relationship, and a better product.

https://www.invisionapp.com/blog/designer-perfection

 

Start your designs with a concept

Defining a concept upfront can help shape everything that follows: the interactions, the relationship between elements, the tone of voice and copy, the transitions, the animations, etc. Once you have a strong concept, all these aspects start to align. Interfaces that are conceived without a concept and designed on autopilot creates interaction patterns that aren’t strategically aligned, user paths that don’t follow a clear logic, screens that are inconsistent and do not ladder up to a consolidated metaphor or concept.

https://uxdesign.cc/start-your-designs-with-a-concept-7270e6b00fcc

 

New to email coding? Here’s where to start.

The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage. Email can seem like a tangled mess, and you will deal with some crazy parameters. But once you learn to embrace the peculiarities, beautiful things begin to happen. Caity covers some great resources and techniques for creating emails that even work on Outlook! I also covered a great resource in Creative and Development Inspiration 1 – Heml!

https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4

 

Why transparent, open design leads to happier clients

“When you bring the folks you’re working with directly into the project, you create a lot more buy-in,” said Adonya Ourshalimian, Client Partner at Citrusbyte. “There’s a much better understanding of what’s actually happening.” The program they use looks unbelievably useful as well, sit down XD – https://www.figma.com/

https://blog.figma.com/why-transparent-open-design-leads-to-happier-clients-aaf98a7cd50c

Neomedia Pokemon

Creative / Development Inspiration 23

This weeks creative & development inspiration covers some great articles, all the way from bad user onboarding and UX to using IBM Watson to analyse your social media. The most eclectic post so far.

 

4 Examples of Bad User Onboarding That Will Ruin Your UX

Starting off with this great article on bad user onboarding, Ty Magnin breaks down a few issues that are causing bottlenecks in getting users onto your service. It doesn’t just stop there either, if the user can sign up easily, they may hang around longer.

https://www.appcues.com/blog/bad-user-onboarding

 

Gender pay gap: women in graphic design earn £4,000 less than men

Gender equality is something that is being spoken about in all industries. This article discusses the issues behind the gender pay gap for woman in design, and how woman in design get paid 6% less than their male counterparts.

https://www.designweek.co.uk/issues/3-8-april-2018/women-graphic-designers-earn-4000-less-year-men-gender-pay-gap-shows/

 

NEA Media

Whilst researching different portfolio websites for styles and how the page load is managed I stumbled across NEA Media. The way the site loads and then animates up is really enjoyable, as well as the design across the whole site. Definitely worth a look.

http://www.neamedia.fr/en

 

“Let’s not be elitist about what we do”: should designers give away their secrets?

Pentagram partner Natasha Jen recently lambasted the term “design thinking” as “bullshit”, “jargon” and “extremely dangerous”. Designers share their thoughts on the concept and discuss whether teaching design skills to businesses is helpful or irresponsible.

https://www.designweek.co.uk/issues/26-march-1-april-2018/lets-not-be-elitist-design-thinking-designers-share-secrets-natasha-jen/

 

Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js

Jamie Munro demonstrates how to perform a search with Twitter’s API to retrieve content that will be inputted into the ML algorithm to be analysed. This way, you’ll be provided with characteristics about the users who wrote that specific content so that you can get a better understanding of your audience. The example application will be written using Node.js as the server.

https://www.smashingmagazine.com/2018/04/analyzing-social-media-presence-ibm-watson-nodejs/

 

Modern PHP Without a Framework

This article discusses the reasoning behind not using a PHP framework for your next project. A fairly technical read, but definitely worth it if you work with PHP.

https://kevinsmith.io/modern-php-without-a-framework

 

Mitsulift Elevators by Base Design

The last link is a beautiful new identity by Base Design. The new identity manages to work across all mediums, whilst easily portraying the brand and what they do. Big fan.

http://bpando.org/2018/04/03/branding-mitsulift-elevators/

Slashpixel

Creative / Development Inspiration 22

This week I have pulled together a list of 6 sites for both web designers, and developers. Some really good reads, both informative and inspiring.

 

Slashpixels – Google for Designers

A great one to start this week.

“Smart Artificial Intelligence Image Search Engine and aggregator for Dribbble, Behance, Pinterest, Cargo, Awwwards, Pttrns and other top Design sources.” is the tagline.

When this is live, I honestly think it will be a game changer. Easy access to freebies, design related images and all the top design sites connected. Get signed up!

http://slashpixels.com

 

Cropping Away Negative Impacts of Line Height

I’m not sure how useful this would be in the real world, due to different browsers rendering in different ways. However as a concept and almost working code, this is worth the read. The number of times an element doesn’t site quite right due to weird white space above and below a sentence. A front end developers nightmare (over-exaggeration maybe). This may just be the solution…

https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

 

Here’s everything I’ve learned from designing 10,000+ UI screens as a lead product designer.

This article by Jon Moore speaks worlds to me. From not reinventing the wheel, to creating pattern libraries, each point seems like common sense. Unfortunately in a lot of design projects these seem to be forgotten. This is aimed at app and web designers, but as a developer I can also relate.

This strongly relates back to user experience article I covered in Creative and Development Inspiration 8.

https://medium.com/ux-power-tools/heres-everything-i-ve-learned-from-designing-10-000-ui-screens-as-a-lead-product-designer-7d2810bee810

 

HTTP2 Explained

This is a very long read, (and more for the developers) however if you are interested in what HTTP2 can do/does then you should read this. Daniel Stenberg from Mozilla goes into incredible detail on the background of HTTP2, how it works, and how it will be deployed.

https://daniel.haxx.se/http2/

 

Truffle Suite

This is stemming from my interest in Blockchain and Cryptocurrencies. The idea of a decentralised network that you can run programs on is pretty interesting, especially considering that data protection is so poignant at the moment (GDPR / Facebook data scandal).

Enter Truffle, the most popular development framework for Ethereum with a mission to make your life a whole lot easier.

http://truffleframework.com/

 

Designer Trend – Offset and Overlap

Designers are continuing to break out of the grid. It’s been a great evolution from the early days of responsive web design. 5 years ago, responsive simply meant that your content block would resize infinitely. But it was always within the confines of a rigid grid.

In fact, responsive web design had a negative effect on how designers used grids because it was so difficult to figure out how content should react. Not any more.

https://medium.com/ux-power-tools/design-trend-offset-overlapping-content-blocks-53e20157d2a8