A Beginners Guide to Learning ReactJS
Tags: design, generalcoding, inspiration, react
Published: 2019-11-19 14:30:02

---
title: A Beginners Guide to Learning ReactJS
published: true
date: 2018-05-30 12:06:23 UTC
tags: Design,General Coding,Inspiration,ReactJS
canonical_url: https://thoughtsandstuff.com/beginners-guide-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](http://thoughtsandstuff.com/atom-package-theme-setup/), and is integrated with Github. It works nicely with React, and also has a sexy little thing called [Teletype](https://teletype.atom.io/).

[https://atom.io/](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](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](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://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](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](https://firebase.google.com/) with React.

[https://css-tricks.com/intro-firebase-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](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](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](https://blog.hellojs.org/importing-images-in-react-c76f0dfcb552)

[http://interglobalmedianetwork.com/post/importing-images-in-react/](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](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](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/](http://carinyperez.com/create-quiz-react/)

 

### Create a Blog with React

A tutorial series on creating a full blogging app with React. Very comprehensive.

[https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171](https://code.tutsplus.com/series/creating-a-blogging-app-using-react--cms-1171)