react
TypeScript
Our great sponsors
react | TypeScript | |
---|---|---|
78 | 1294 | |
43,795 | 97,451 | |
1.0% | 1.0% | |
7.1 | 9.9 | |
26 days ago | 1 day ago | |
JavaScript | TypeScript | |
MIT License | Apache License 2.0 |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react
-
How to use Typescript in React apps
Congratulations, you now know how to use TypeScript in your React App. For further reading check out this React TypeScript cheat sheet
- React Basics: Essential Knowledge for Every React Developer
-
Ultimate Guide & Resources to Enhancing Your ReactJS Skills || 16 GitHub repositories
Quickly reference the essentials with these handy React cheatsheets.
- Anyone got good resources for experienced devs that don't know front end?
-
16 Github Repos to master React
11-) You have started to use React effectively with Typescript, but if you are wondering about the tricks, this repo is for you. typescript-cheatsheets/react
-
Reasons to Use Typescript Along with React - Get the Benefits of Static Typing and IntelliSense
To get the most out of React with TypeScript, take a look at the React TypeScript Cheatsheet for more information about the many advantages TypeScript provides for React developers.
- Please suggest a good resource for React + TS + TDD.
-
If you haven't worked with TypeScript yet it's a good time to get started now. I prepared an intro that covers the most important points to React with TS. Including a few embedded exercises for you to practice.
I know there are quite some resources out there about React and TS like the TS docs or the React TypeScript cheatsheet. But they I found them a bit too detailed and overwhelming if you just want to get something done. So I decided to write a small crash course focusing on the most important features and also added some interactive exercises to practice.
-
How to Migrate your React Project to TypeScript
This is in our handleChange function that’s attached to our element. When our user types in the
</code>, the event is passed to the <code>handleChange</code> function and becomes the value for our <code>setAffirmation</code> hook. We know that we don’t want the type of our event to be <code>any</code>. This is a journal app and that value is text, or more specifically, a string.</p> <p>We need to let the application know that we don’t want it to accept any other type. We’re going to give our function a type of <code>React.ChangeEventHandler<HTMLTextAreaElement></code> since we have access to <code>React.ChangeEventHandler</code> through <code>@types/react</code>. This is what it will look like if you use inline types:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">const</span> <span class="nx">handleChange</span><span class="p">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">ChangeEventHandler</span><span class="o"><</span><span class="nx">HTMLTextAreaElement</span><span class="o">></span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">setAffirmation</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">}</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>The next update we need to make is in our <code>handleSubmit</code> function:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code> <span class="kd">const</span> <span class="nx">handleSubmit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="nx">setFinalAffirmation</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">}</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>If we hover over the <code>e</code>, we get the same message we did above. You might be tempted to type it in the same way, but let’s think about what’s happening here for a second. We’re submitting a completed form here. If we head over to the <a href="https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forms_and_events/#list-of-event-types">React TypeScript Cheatsheet</a>, we’ll find an event type of <code>FormEvent</code>, which they describe as an “Event that occurs whenever a form or form element gets/loses focus, a form element value is changed or the form is submitted.” That sounds like a good choice.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="cm">/* submit is a form event */</span> <span class="kd">const</span> <span class="nx">handleSubmit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">:</span> <span class="nx">React</span><span class="p">.</span><span class="nx">FormEvent</span><span class="o"><</span><span class="nx">HTMLFormElement</span><span class="o">></span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="cm">/* prevent page from refreshing */</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">()</span> <span class="nx">setFinalAffirmation</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">}</span> </code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode</title> <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title> <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path> </svg> </div> </div> </div> <p>We add a comment there for clarity that submit is a form event, and then we specify the type as an <code>HTMLFormElement</code>.</p> <p>We’ll move on to the last one in this example.</p> <p>Around line 57, we can see that TypeScript is complaining about <code>socketRef.current</code>. If we hover over it, we get this message:<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MZeL3Owj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu1y0hn4dvb0xo76tlim.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MZeL3Owj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uu1y0hn4dvb0xo76tlim.png" alt="Type 'WebSocket' is not assignable to type 'null'" loading="lazy" width="880" height="151"></a></p> <p>Because we added the WebSocket types package, <code>@types/websocket</code>, we have access to a WebSocket type. However, we don’t set the type on line 57. The actual problem is with <code>const socketRef = useRef(null)</code>.</p> <p>We need to let TypeScript know that we’re looking at a WebSocket or null: <code>const socketRef = useRef<WebSocket | null>(null)</code>.</p> <p>With that last update, we no longer have TypeScript complaining in this file. That doesn’t mean that there aren’t other updates that we can make. If you hover over other variables or functions, we can see what TypeScript is inferring.</p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4MI3Ycnp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny009v1ukv7hxfz820uo.gif" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4MI3Ycnp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny009v1ukv7hxfz820uo.gif" alt="gif hovering over code" loading="lazy" width="880" height="357" data-animated="true"></a></p> <p>To complete this migration, we need to update the .js files to .tsx. But the nice thing is that we don’t have to do that all at once. For now, this is where we’ll leave it.</p> <h2> <a name="learn-more-about-typescript" href="#learn-more-about-typescript"> </a> Learn More About TypeScript </h2> <p>There’s a lot to learn about TypeScript. Here are some resources I've found helpful:</p> <ul> <li><a href="https://www.typescriptlang.org/docs/handbook/intro.html">TypeScript Handbook</a></li> <li><a href="https://www.totaltypescript.com/tutorials/beginners-typescript">Totally TypeScript</a></li> <li><a href="https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets">React + TypeScript Cheatsheets</a></li> </ul> <p>And check out the Bonus Section of Sandra’s post on how to <a href="https://blog.deepgram.com/build-a-todo-list-with-pinia-and-vue-3/#bonus-section:-add-typescript">Build a To-do List App with Pinia and Vue 3</a>.</p> <p>To access the code for this blog post, select the <code>feature/typescript</code> branch from the <a href="https://github.com/deepgram-devs/react-app">React App GitHub Repository</a>. If you have any thoughts, comments, or questions, please drop a comment in our <a href="https://github.com/orgs/deepgram/discussions/categories/general">General Discussion category</a>, or if you want to say hey, drop your intro in our <a href="https://github.com/orgs/deepgram/discussions/3">intro thread</a>.</p>
-
Great resources for learning React and Typescript
React TS Cheatsheet
TypeScript
-
Building a Dynamic Job Board with Issues Github, Next.js, Tailwind CSS and MobX-State-Tree
Familiarity with TypeScript, React and Next.js
-
Building a Fast, Efficient Web App: The Technology Stack of PromptSmithy Explained
On top of that, Vite’s compiler is super fast, supports Typescript (which we of course used), and built just fine on our host, which was Cloudflare Pages. Cloudflare Pages is a super fast static website hosting service by Cloudflare, which allows your site to take advantage of their global CDN to make sure your site is as close to your users as possible. It supports nearly any JS framework you could want to use for your site, and can even host plan old HTML if you’re of that persuasion.
-
Incredible JavaScript Animation Libraries
Popmotion prioritizes simplicity and ease of use in its design. Written in TypeScript and compatible with any API that accepts numerical input, it offers a straightforward API and supports major browsers. Popmotion's architecture powers animations in Framer Motion and can be extended through plugins.
-
Full Stack Web Development Concept map
Typescript can be used in both the front end and the back end and gives strong typing to javascript for easier error prevention. The learning curve can be difficult at times but the benefits are worth it! docs
-
Building a full stack app with Remix, Prisma, and Neon
Basic knowledge of React and TypeScript
-
How to stream data over HTTP using NextJS
Take note that the implementation will be based on typescript to make in evidence the objects' type that we are going to use.
-
Top Paying Programming Technologies 2024
28. TypeScript - $77,104
-
Six Factors That Raise The Risk Of Bugs In A Codebase
1. Lack of Static Code Analysis Static code analysis tools like TypeScript and ESLint play a crucial role in identifying and preventing bugs. TypeScript provides static typing, enhancing the robustness of the code. ESLint detects issues and enforces coding standards. The absence of these tools can significantly elevate the likelihood of bugs due to the lack of early detection and guidance provided during development.
-
Unit Testing in Node.js and TypeScript: A Comprehensive Guide with Jest Integration
TypeScript version 4.0 or higher. TypeScript is a superset of JavaScript that adds static types and other features to the language. You can check your TypeScript version by running tsc -v in your terminal.
-
TypeScript Template Literal Types: Practical Use-Cases for Improved Code Quality
In recent years, TypeScript has become an indispensable tool for many JavaScript developers, offering type safety, improved code maintainability, and enhanced developer experience with many advanced type features, like generic types, type guards and conditional types. One of the powerful features introduced in TypeScript 4.1 is template literal types which provide greater flexibility and control over string literal types.
What are some alternatives?
zod - TypeScript-first schema validation with static type inference
Flutter - Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Tailwind CSS - A utility-first CSS framework for rapid UI development.
zx - A tool for writing better scripts
esbuild - An extremely fast bundler for the web
gray-matter - Smarter YAML front matter parser, used by metalsmith, Gatsby, Netlify, Assemble, mapbox-gl, phenomic, vuejs vitepress, TinaCMS, Shopify Polaris, Ant Design, Astro, hashicorp, garden, slidev, saber, sourcegraph, and many others. Simple to use, and battle tested. Parses YAML by default but can also parse JSON Front Matter, Coffee Front Matter, TOML Front Matter, and has support for custom parsers. Please follow gray-matter's author: https://github.com/jonschlinkert
Yup - Dead simple Object schema validation
Quasar Framework - Quasar Framework - Build high-performance VueJS user interfaces in record time
rescript-compiler - The compiler for ReScript.
linaria - Zero-runtime CSS in JS library
fp-ts - Functional programming in TypeScript
lodash - A modern JavaScript utility library delivering modularity, performance, & extras.