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.
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%.
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!
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/
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
