Copy
Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

Hi <<First Name>>,
 
Everything New In React 18
React 18 Alpha is here there are many things that got added in react 18 as react 17 there really wasn't much added But it's definitely not a case with react 18 In this article we will look at some of the top updates.

Read more
 
A Complete Beginner's Guide to Next.js
I've used Create React App non-stop to scaffold React apps, and I love it. Recently, though, I've been using Next.js for more and more of them. It has a bunch of great features like routing and server-side rendering that offer amazing experiences for both end-users and developers.

Next.js is a React metaframework, which means that it's a framework built on top of React that enforces more structure and gives you additional capabilities: like server-side rendering, routing, bundling, and more. In this post, we'll go through how to get started with Next.js, SSR vs. SSG, and routing.

If you haven't used React before, read my getting started with React tutorial and then come back here to do this tutorial! You'll need a React foundation first.


Read more
 
Cypress Tutorial
Tired of having users email you that your web application is broken? Using Cypress.io, the JavaScript End to End Testing Framework, as a quality control tool will help a lot in preventing those emails. Yet Cypress.io, good as it is, is not a silver bullet.
 
In this upcoming video course Maurice de Beijer will teach you all about using Cypress.io. You will learn how easy it is to get started and create your first useful tests. You will also learn how to make tests for data driven applications more reliable and even faster. He will show you how to test applications using 3rd party authentications services. And you will learn how to include all that as part of your continuous integration build. Hellping you prevent errors from ever deploying.
 
Want to learn more? Go to https://www.cypress-tutorial.net/ and subscribe to hear about the updates and the course launch. Don’t worry, I am not going to spam you. And you can unsubscribe at any time.
Github Copilot and React
Understand how GitHub Copilot works with React, React Native, TypeScript and Redux.

Learn more about GitHub Copilot (and try it out!): https://copilot.github.com
OpenAI: https://openai.com

Watch video
 
Rendering in an iframe in a React app

Sometimes you want to render a tree of components within an iframe. You may want to do this because you may be creating something like CodeSandbox that runs other people's code or developing a Storybook-kinda library to design & test components in isolation or you are building a visual editor for designing web apps likes us.

Whatever the reason may be, you would use an iframe for the following two features that iframe offers:

You want to isolate the styles between the parent document and the iframe document. Since the styles are inherited by the children because of the cascading nature of CSS. CSS stands for Cascading Style Sheets after all.

You want to sandbox JS used in an iframe for security. For example, the content in the iframe loads a script from an untrusted location.


Read more
 
How to Add a Netlify Form to a React App Built with create-react-app

If you are a web developer, at some point you will need to capture information from people who use your website or app.

One way of doing so is by using HTML forms. But there are also tons of frameworks out there that you can use to build web apps very quickly.

One such framework is React. You can bootstrap a single page application (SPA) very easily using create-react-app (CRA). Then you can deploy it to platforms such as Netlify, Vercel, Firebase and Digital Ocean in just a couple of steps.

The main focus of this article will be on how to add Netlify form functionality to a React app bootstrapped using create-react-app. At the end of this tutorial you will be able to:

  • Quickly set up a single page app using create-react-app
  • Add functionality to utilize Netlify's builtin form handling feature
  • Deploy the app to Netlify
  • Configure the builtin form handling feature on Netlify to send email notifications whenever a form has been submitted by a client

Whether you are beginner trying to deploy your first React app or you are an experienced React developer, this article will help you learn to use Netlify's builtin form functionality without writing any server side code.

If you are an experienced React developer, you can skip the introduction and go to step 6. If you are a beginner in React, you can follow along right from the beginning.


Read more
 
Debugging JavaScript Efficiently with Chrome DevTools
Tired of console.log() to debug all the time? Use DevTools and these strategies to be a more efficient debugger!

Are you still typing console.log() in your projects to debug? In this article, let's learn how to be a more efficient debugger using Chrome DevTools.

What is Chrome DevTools?

The Google Chrome browser offers a built-in developer tools (aka DevTools) that help developers edit their code directly on the browser, add breakpoints to detect issues and debug their code quicker.



Read more
 
React video courses
Because I need to pay my bills 😉
 
Copyright © 2021 ABL - The Problem Solver, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp