Issue #5 - Get better at reading React errors, general browser tools, design presentation with JSX and learn about refs
Debug React errors with confidence with right approach to fix them, log multiple variable at once using objects, deep dive into CSS with Ahmad, know the internals of React Virtual DOM, Hooks, etc and design an interactive code presentation with React & JSX.
Tip of the day
Wrap your variables in a {} when you console.log , and it would display the names of your variables automatically, by of ES6's "Object literal value property shorthand".
const x = 5;
const y = 'scriptified';
console.log('x:', x, 'y:', y)
// -> x: 5 y: scriptified
// A shorter way to write the above log
// would be
console.log({ x, y });
// > { x: 5, y: 'scriptified' }
Articles
When working with React you must have got errors like Cannot read property map of undefined . In this article Dave discusses how to fix the above error specifically and how you should approach while fixing errors in general.
by Dave Ceddia
Much of what we can do with JavaScript is the result of the way closures work and they are very critical part of React. Understand how they work with examples in this article with Dan.
by Dan Abramov
Tools
A collection of browser tools like SVG to JSX generator, Keyboard events codes, Gradient generator etc. that can ease your life as a web developer.
by Vitaly Rtishchev
A React library that lets you build interactive presentation decks with JSX syntax, and allows you to live preview your code.
by FormidableLabs
Dev of the Week
Ahmad Shadeed
Ahmad is an Independent Product Designer and Front End Developer from Palestine. He writes extensively on CSS, Accessibility, and RTL (right to left) text styling. He also published an e-book 'Debugging CSS' which will help you improve your debugging CSS skills. His articles on CSS are a must read if you want to understand CSS & sharpen your CSS skills.
Tech Talks
Explore how the Virtual DOM, Hooks and suspense for data fetching work in React as Tejas deconstructs React and recreates them in this talk.
Quiz
What will be the value of ref.current on line 13 when the Cause re-render button is pressed thrice?
import React, { createRef, useState } from "react";
function App() {
const [renderIndex, setRenderIndex] = useState(1);
const ref = createRef();
if (!ref.current) {
ref.current = renderIndex;
}
return (
<div className="App">
Current render index: {renderIndex}
<br />
Output from ref: {ref.current}
<br />
<button onClick={() => setRenderIndex((prev) => prev + 1)}>
Cause re-render
</button>
</div>
);
}
This week in GIF
Liked this issue? Share on Twitter or read previous issues.
Scriptified is curated by Prateek Surana & Ayush Gupta.