WebDevPro #13: React with TypeScript: 10 Pro Tips to Supercharge Your Code, useEffect hook in React, GraphQL and React CheatSheet
Hi,
Welcome to the _webdevpro! Frontend Web development is a crucial piece of the puzzle for any Web Developer. With so many touch points - one delayed rendering, long load time or just bad UX design results in customers dissatisfaction. A good starting point to ensure good frontend web development is using React with TypeScript.
Today edition focuses on web development with React and TypeScript. We start with community discussions on React with TypeScript: 10 Pro Tips to Supercharge Your Code, useEffect hook in React, GraphQL and React CheatSheet.
React with TypeScript, our recently published book is at the center of solving the frontend development problem! We discuss a React with TypeScript tutorial on Creating a React and TypeScript component to get you up to speed. Don't miss our repository of curated tools on TypeScript to jumpstart your journey to help you boost your web development. We also bring you the latest in Web Dev, with releases from Laravel, Ruby on Rails, and Spring to help you keep up to date!
Curious about the book? Read React with TypeScript now!
We have listened to the _webdevpro readership and we think this is something you have been searching for. If you liked this installment in our new series, fill in our survey below and win a free Packt credit. We're committed to bringing our readers exactly what they want, so help us make the right choices.
Take the feedback survey and get free credit!
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
React with TypeScript Community Insights
React with TypeScript: 10 Pro Tips to Supercharge Your Code - React and TypeScript are a powerful combination for building robust and scalable web applications. While React provides a flexible and efficient UI development framework, TypeScript adds static typing and enhances the development experience. In this article, we will explore ten essential tips that can help beginners improve their React TypeScript code.
The useEffect hook in React - The useEffect hook is a crucial part of building with React. It allows you to perform side effects in your components, such as fetching data from an API, subscribing to events, or manipulating the DOM. In this blog post, we will explore the useEffect hook in React and understand how it can be used effectively.
React CheatSheet - This Sheet contains all the React v17 Concepts all the way from basics to advanced with Router and Redux + Toolkit. Explore all of the concepts now!
10 best Tailwind CSS component libraries - Using component libraries with Tailwind CSS allows developers to utilize the best of both utility-first and component-based approaches. In this roundup, we'll explore the ten best free and open source Tailwind CSS component libraries that currently exist.
GraphQL - Diving Deep - The GraphQL specification was open sourced in 2015 by Facebook along with some basic implementations with a completely unique approach on how to structure, consume, transmit and process data and data graphs. This blog is a part of a series on GraphQL where we will dive deep into GraphQL and its ecosystem one piece at a time.
Guide to using React Custom Hooks - What if the operation requires to call one or more React hooks, then the function cannot be used to perform such operations as React hooks can only be called in React functions. To solve this, we make use of React custom hooks. In this blog post, we will dive into what React custom hooks are and how to use them to encapsulate any resuable logic that you may need to share across multiple components.
Web Development Motivation
"The beauty of React is its ability to bring simplicity and elegance to complex web development challenges."
- Dan Abramov, React Developer and Co-author of Redux
Food for Thought...
In this quote by Dan Abramov, a prominent React developer and co-author of Redux, we discover the essence of React's power and appeal. It highlights React's unique capability to streamline and simplify the development process, making it easier to tackle intricate web development tasks. React's elegance lies in its ability to provide elegant solutions to complex problems, empowering developers to create robust and efficient user interfaces. Embrace the beauty of React and unlock a world of possibilities in your web development journey.
TypeScript WebDev Resources
Working with TypeScript? Here are some TypeScript project starter resources that might come in handy!
typescript-starter – A CLI to quickly generate and configure new libraries and Node.js projects
next-smrt – A Typescript/NextJs boilerplate with Redux/Styled Components/Material UI and TypeSafe Actions.
Next-Postgres-With-Typescript - Forum-like fullstack web app boilerplate with Next.js 7.0.2 + Sequelize 4/Postgres + Typescript + Redux + Passport Local Auth + Emotion
MicroTS Microservice code generator with interface-first approach: from OpenAPI (Swagger) REST API specification is generated complete project with TypeScript code, input validator, UI, tests and Docker configuration.
pankod/next-boilerplate A well-structured production ready Next.js boilerplate with Typescript, Redux, Jest, Enzyme, Express.js, Sass, Css, EnvConfig, Reverse Proxy, Bundle Analyzer and Built-in CLI
jsynowiec/node-typescript-boilerplate Up-to-date, developer ready and comprehensive, yet minimalistic template. Works out of the box for most Node.js projects. All basic tools included and configured. Targets latest Node.js LTS and TypeScript releases.
typescript-express-starter - Quick and Easy TypeScript Express Starter.
React with TypeScript Tutorial
Creating a React and TypeScript component
In this section, we will use TypeScript to make the component strongly typed and experience the benefits. We start by adding a type to the alert component’s props and then experiment with defining a type for its state. After completing the alert component, we will inspect the component using React’s DevTools.
Adding a props type
We will continue using the React and TypeScript project created in the last section with Create React App. Take the following steps to add a strongly typed version of the alert component:
Open the project in Visual Studio Code if it isn’t already open. Make sure you open the project in the app name folder so that
package.jsonis at the root.Create a new file in the
srcfolder calledAlert.tsx. Paste in the JavaScript version of the alert component, which can be found on GitHub.
Notice that type errors are reported on some of the props because they can only be inferred as having the any type.
Add the following type just above the component. This will be the type for the component props:
type Props = {
type?: string;
heading: string;
children: React.ReactNode;
closable?: boolean;
onClose?: () => void;
};The heading and children props are required but the rest of the props are optional.
The children prop is given a special type called React.ReactNode. This allows it to accept JSX elements as well as strings.
The name of the type can be anything, but it is common practice to call it Props. ...read more.
What's Happening in Web Dev?
Laravel
Laravel 10.14 Released - This week, the Laravel team released v10.14 with a new can validation rule, define custom Gate denial response, global HTTP client middleware, HTTP client convenience methods, and more.
Ruby on Rails
Rails Versions 7.0.5.1, 6.1.7.4 have been released! - Rails versions 7.0.5.1 and 6.1.7.4 have been released! These are security releases, so please upgrade when you get a chance! You can check out the CVE details here.
Spring
Using Spring for GraphQL with Spring Data Neo4j - A few weeks ago version 1.2.0 of Spring (for) GraphQL was released with a bunch of new features. This also includes even better integration with Spring Data modules. Motivated by those changes, more support in Spring Data Neo4j has been added, to give the best experience when using it in combination with Spring GraphQL. This post will guide you on creating a Spring application with data stored in Neo4j and GraphQL support.