diff --git a/public/phone-doctor.webp b/public/phone-doctor.webp
new file mode 100644
index 0000000..4a796c9
Binary files /dev/null and b/public/phone-doctor.webp differ
diff --git a/public/react.webp b/public/react.webp
new file mode 100644
index 0000000..3297278
Binary files /dev/null and b/public/react.webp differ
diff --git a/src/app/articles/a-guide-to-creating-charts-in-react-with-typescript/page.mdx b/src/app/articles/a-guide-to-creating-charts-in-react-with-typescript/page.mdx
new file mode 100644
index 0000000..f1ef831
--- /dev/null
+++ b/src/app/articles/a-guide-to-creating-charts-in-react-with-typescript/page.mdx
@@ -0,0 +1,275 @@
+import { ArticleLayout } from '@/components/ArticleLayout';
+
+export const article = {
+ author: 'Bradley Dirheimer',
+ date: '2024-10-08',
+ title: 'A Guide to Creating Charts in React with TypeScript',
+ description:
+ 'Visualizing data is a critical component of many modern web applications, and using charts effectively can significantly improve user experience. React, with its declarative nature, combined with TypeScript’s strong typing system, provides a robust environment for building interactive and type-safe charts. This blog post will guide you through the process of integrating charts into a React application using TypeScript.',
+};
+
+export const metadata = {
+ title: article.title,
+ description: article.description,
+};
+
+export default (props) => ;
+
+
+
+
+
+Visualizing data is a critical component of many modern web applications, and using charts effectively can significantly improve user experience. React, with its declarative nature, combined with TypeScript’s strong typing system, provides a robust environment for building interactive and type-safe charts. This blog post will guide you through the process of integrating charts into a React application using TypeScript.
+
+Why Use TypeScript with React for Charts?
+TypeScript helps catch potential bugs and improves the development experience by providing type safety. When creating charts, TypeScript ensures that your data structures, configurations, and event handling are well-defined, preventing common runtime errors. With React’s component-driven architecture, you can easily integrate, customize, and manage charts in your web applications.
+
+In this guide, we’ll walk through setting up charts in a React project using TypeScript and a popular charting library.
+
+Setting Up a React and TypeScript Project
+First, let’s set up a new React project with TypeScript:
+
+```bash
+npx create-react-app react-charts --template typescript
+```
+
+```bash
+cd react-charts
+```
+
+This command initializes a new React project with TypeScript as the default configuration.
+
+Installing a Charting Library
+There are many charting libraries available for React, such as:
+
+Chart.js: A powerful, simple, and flexible charting library.
+Recharts: Built on top of D3.js for React.
+Victory: Declarative charting library for React.
+For this example, we’ll use recharts as it provides an easy-to-use API and good documentation for React and TypeScript.
+
+To install Recharts:
+
+`npm install recharts`
+
+Creating a Simple Bar Chart with Recharts
+Now that we have our project set up and the charting library installed, let’s create a basic bar chart.
+
+Create a new component called BarChartComponent.tsx:
+
+```tsx
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+// Define the type for our data
+type ChartData = {
+ name: string;
+ value: number;
+};
+
+// Sample data for the chart
+const data: ChartData[] = [
+ { name: 'Page A', value: 400 },
+ { name: 'Page B', value: 300 },
+ { name: 'Page C', value: 200 },
+ { name: 'Page D', value: 278 },
+ { name: 'Page E', value: 189 },
+];
+
+const BarChartComponent: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BarChartComponent;
+```
+
+In this example:
+
+We define a ChartData type, ensuring that every data point has a name (string) and a value (number).
+We create a simple bar chart using Recharts’ BarChart component. We configure the chart with axes, a tooltip, and a legend, and make the chart responsive using ResponsiveContainer.
+The Bar component renders the bars, and we pass the dataKey as value to tell the chart where to pull the numerical values from.
+Use the BarChartComponent in your app:
+Open src/App.tsx and add the new chart component.
+
+```tsx
+import React from 'react';
+import './App.css';
+import BarChartComponent from './BarChartComponent';
+
+function App() {
+ return (
+
+
React Chart Example
+
+
+ );
+}
+
+export default App;
+```
+
+> Now, run your application:
+
+```bash
+npm start
+```
+
+You should see a bar chart displayed on the screen with sample data. This is a simple example, but the structure allows you to scale easily and add other chart types or more complex configurations.
+
+Adding Type Safety for Chart Props
+Let’s take this a step further by making our chart component reusable with type-safe props.
+
+Update BarChartComponent.tsx to accept props:
+
+```tsx
+type BarChartProps = {
+ data: ChartData[];
+ xAxisKey: string;
+ yAxisKey: string;
+};
+
+const BarChartComponent: React.FC = ({ data, xAxisKey, yAxisKey }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+```
+
+Now, the BarChartComponent accepts props for data, xAxisKey, and yAxisKey, which allow you to customize which properties to map to the X and Y axes. This type-safe structure ensures that any data you pass must conform to the ChartData type, preventing mismatches and errors.
+
+You can now use the component like this:
+
+``
+
+Advanced Charts and Customization
+Recharts offers a variety of charts such as line charts, pie charts, and area charts, all of which you can configure with TypeScript. Here’s an example of a Line Chart with custom tooltips:
+
+```tsx
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+
+const LineChartComponent: React.FC = ({ data, xAxisKey, yAxisKey }) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+```
+
+Handling Asynchronous Data
+Many real-world scenarios involve fetching data from an API and rendering it in charts. You can handle asynchronous data in TypeScript with tools like fetch or libraries like axios:
+
+```tsx
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const DataFetchingChart: React.FC = () => {
+ const [data, setData] = useState([]);
+
+ useEffect(() => {
+ axios.get('/api/data').then((response) => {
+ setData(response.data);
+ });
+ }, []);
+
+ return ;
+};
+```
+
+This example demonstrates fetching data from an API and updating the chart once the data has been retrieved.
+
+## Conclusion
+
+Creating charts in React with TypeScript offers both flexibility and type safety, making it easier to handle data, manage props, and ensure that your chart components work as expected. With libraries like Recharts, you can quickly build a variety of charts, while TypeScript’s strong typing helps prevent bugs.
+
+To sum up:
+
+Choose a charting library that fits your project needs.
+Leverage TypeScript to define clear types for your chart data and props.
+Handle asynchronous data by integrating APIs and React’s lifecycle methods.
+Customize charts based on your application’s requirements for interactivity and design.
+With this approach, you’ll have a solid foundation for creating robust and scalable data visualizations in React using TypeScript.
+
+## API for rechart
+
+`Charts`
+- AreaChart
+- BarChart
+- LineChart
+- ComposedChart
+- PieChart
+- RadarChart
+- RadialBarChart
+- ScatterChart
+- FunnelChart
+- Treemap
+- SankeyChart
+
+`General Components`
+- ResponsiveContainer
+- Legend
+- Tooltip
+- Cell
+- Text
+- Label
+- LabelList
+- Customized
+
+`Cartesian Components`
+- Area
+- Bar
+- Line
+- Scatter
+- XAxis
+- YAxis
+- ZAxis
+- Brush
+- CartesianAxis
+- CartesianGrid
+- ReferenceLine
+- ReferenceDot
+- ReferenceArea
+- ErrorBar
+- Funnel
+
+`Polar Components`
+- Pie
+- Radar
+- RadialBar
+- PolarAngleAxis
+- PolarGrid
+- PolarRadiusAxis
+
+`Shapes`
+- Cross
+- Curve
+- Dot
+- Polygon
+- Rectangle
+- Sector
\ No newline at end of file
diff --git a/src/app/articles/understanding-startTransition-in-react/page.mdx b/src/app/articles/understanding-startTransition-in-react/page.mdx
new file mode 100644
index 0000000..32804e7
--- /dev/null
+++ b/src/app/articles/understanding-startTransition-in-react/page.mdx
@@ -0,0 +1,137 @@
+import { ArticleLayout } from '@/components/ArticleLayout';
+
+export const article = {
+ author: 'Bradley Dirheimer',
+ date: '2024-10-08',
+ title: 'Understanding startTransition in React: A Guide to Non-blocking State Updates',
+ description:
+ 'When building modern web applications, one of the challenges developers face is keeping the UI responsive during complex updates. React’s startTransition API is designed to help by letting developers mark certain state updates as non-blocking transitions, ensuring the UI remains responsive even during heavy renders.',
+};
+
+export const metadata = {
+ title: article.title,
+ description: article.description,
+};
+
+export default (props) => ;
+
+
+
+When building modern web applications, one of the challenges developers face is keeping the UI responsive during complex updates. React’s startTransition API is designed to help by letting developers mark certain state updates as non-blocking transitions, ensuring the UI remains responsive even during heavy renders.
+
+This blog post will explore the startTransition function, its usage, and how it can help improve the user experience by preventing UI freezes during state updates. We’ll also cover caveats and scenarios where it is most effective.
+
+## What is `startTransition`?
+
+startTransition is a function that lets you mark state updates as transitions, which are low-priority updates. Unlike normal state updates, which can block the UI while rendering, transitions allow the UI to remain responsive, deferring the state updates without showing unwanted loading indicators.
+
+## Example:
+
+```tsx
+import { startTransition } from 'react';
+
+function TabContainer() {
+ const [tab, setTab] = useState('about');
+
+ function selectTab(nextTab) {
+ startTransition(() => {
+ setTab(nextTab);
+ });
+ }
+
+ return (
+
+
+
+
+ );
+}
+```
+
+In this example, startTransition is used to wrap the setTab state update. The update is marked as a transition, ensuring that if the UI is doing something heavy during the update, it won't block other more urgent UI interactions, like clicking another tab.
+
+## Key Features of startTransition
+
+Non-blocking Updates: Updates wrapped in startTransition are treated as low priority, allowing the UI to continue responding to user input, even while the update is in progress.
+Responsive User Interfaces: This function is especially useful when handling complex state changes that might otherwise cause the UI to freeze temporarily.
+No isPending Flag: Unlike useTransition, startTransition doesn't provide a way to check if the transition is still pending. It’s a lightweight alternative when you don’t need to track ongoing transitions.
+How Does startTransition Work?
+startTransition takes a function as an argument, called a scope. The scope function contains state updates that React marks as transitions, meaning they are treated as low-priority updates. This function will be executed synchronously, and all state updates within it will be considered part of the transition.
+
+```tsx
+startTransition(() => {
+ // State updates here are non-blocking
+ setSomeState(newValue);
+});
+```
+
+## Parameters:
+
+- scope: A function that updates some state by calling one or more set functions. The state updates made in this function will be non-blocking transitions.
+
+## Key Caveats and Limitations
+
+1. No Tracking of Pending Transitions: Unlike useTransition, startTransition does not provide an isPending flag to track whether the transition is ongoing. If you need to track this, consider using useTransition instead.
+2. Transitions are Interrupted by Higher-Priority Updates: If a user performs another action, such as typing in a text input, while a transition is happening, the transition will be interrupted. For example, if you’re updating a chart inside a transition and the user starts typing into an input, React will pause the chart update to handle the input.
+3. Only Works with Synchronous State Updates: The function passed to startTransition must be synchronous. State updates scheduled asynchronously (e.g., inside a setTimeout) won’t be marked as transitions.
+4. Not for Controlling Text Inputs: Transition updates cannot be used to control real-time input changes, such as typing into a text field, as these need to be handled with immediate, high-priority updates.
+5. Batching Transitions: React may batch multiple ongoing transitions together, which could delay their completion. This behavior may change in future releases of React.
+
+## Practical Usage of startTransition
+
+1. Marking State Updates as Non-blocking Transitions
+Let’s walk through a simple example of marking a tab change as a transition. Normally, when a user switches tabs, the UI may freeze if the update involves heavy computation or rendering. By using startTransition, we can ensure the tab switch feels smooth, even if the rendering is delayed.
+
+```tsx
+import { startTransition } from 'react';
+function TabContainer() {
+ const [tab, setTab] = useState('home');
+function handleTabChange(newTab) {
+ startTransition(() => {
+ setTab(newTab);
+ });
+ }
+return (
+
+
+
+
+
+ );
+}
+```
+
+With startTransition, the UI remains responsive, allowing the user to switch between tabs quickly, even if the rendering for each tab takes time.
+
+2. Handling Large Dataset Updates
+If you are working with large data sets, such as charts or lists, startTransition can help prevent UI freezes. For example, you might be rendering a list of items or updating a chart based on user input. These updates can be wrapped in startTransition to ensure that the UI doesn’t block while the rendering happens.
+
+```tsx
+import { startTransition } from 'react';
+
+function DataChart({ data }) {
+ const [chartData, setChartData] = useState(data);
+
+ function updateChart(newData) {
+ startTransition(() => {
+ setChartData(newData);
+ });
+ }
+
+ return ;
+}
+```
+
+In this example, updating the chart is wrapped in startTransition, allowing other interactions (such as navigating through the app) to remain smooth.
+
+## When to Use startTransition
+
+Complex UI Updates: Use startTransition when you’re updating complex UI components (e.g., charts, large lists, or expensive re-renders).
+Low-priority State Updates: If a state update can be deferred without immediately impacting the user experience, mark it as a transition.
+When You Don’t Need to Track Pending Transitions: If you don’t need to display a loading or pending state during the transition, startTransition is a lightweight way to manage non-blocking updates.
+
+## Conclusion
+
+React’s startTransition API is a powerful tool for ensuring that your UI remains responsive during complex state updates. By marking certain updates as low-priority transitions, you can improve the user experience, especially on slower devices or in applications with heavy rendering requirements. While there are some caveats and limitations to be aware of, startTransition is a valuable addition to React’s toolkit for building smooth, responsive user interfaces.
+
+If you need to track ongoing transitions, useTransition might be a better fit, but for simpler use cases, startTransition is a great choice. Start experimenting with startTransition today to enhance the performance of your React applications!
\ No newline at end of file
diff --git a/src/app/articles/understanding-the-use-api-in-react/page.mdx b/src/app/articles/understanding-the-use-api-in-react/page.mdx
new file mode 100644
index 0000000..d9a08c2
--- /dev/null
+++ b/src/app/articles/understanding-the-use-api-in-react/page.mdx
@@ -0,0 +1,146 @@
+import { ArticleLayout } from '@/components/ArticleLayout';
+
+export const article = {
+ author: 'Bradley Dirheimer',
+ date: '2024-04-16',
+ title: 'Understanding the use API in React',
+ description:
+ 'Currently available only in React's Canary and experimental channels, use aims to simplify the handling of Promises and contexts by integrating with Suspense and error boundaries.',
+};
+
+export const metadata = {
+ title: article.title,
+ description: article.description,
+};
+
+export default (props) => ;
+
+
+# Understanding the use API in React
+
+
+
+
+React continues to evolve, and one of the newest and most exciting features is the experimental use API, which allows developers to manage asynchronous resources and context more efficiently. Currently available only in React's Canary and experimental channels, use aims to simplify the handling of Promises and contexts by integrating with Suspense and error boundaries.
+
+This blog post will explore what the use API is, how it works, and the various scenarios where it shines. We’ll also cover common pitfalls, how to handle errors, and why this feature is a game changer in modern React development.
+
+What is use?
+In a nutshell, use is a React API that lets you read the value of a resource like a Promise or context. Unlike existing hooks like useContext, the use API offers more flexibility and can be used inside loops or conditionals.
+
+```tsx
+import { use } from 'react';
+function MessageComponent({ messagePromise }) {
+ const message = use(messagePromise);
+ const theme = use(ThemeContext);
+ // Render the component using the fetched data
+}
+```
+
+With the use API, you can seamlessly work with asynchronous resources, allowing your components to "suspend" their rendering until a Promise is resolved. This makes it an ideal candidate for use with Suspense boundaries, which we’ll explore in more detail below.
+
+## Key Features of use
+
+Flexibility: Unlike hooks like useContext, the use API can be called within conditionals and loops. This makes it more versatile for various use cases.
+Integration with Suspense: When a Promise is passed to use, the component "suspends" rendering until the Promise resolves. If the component is wrapped in a Suspense boundary, the fallback UI will be displayed while waiting for the data to load.
+Error Handling: If a Promise passed to use is rejected, the closest error boundary will display its fallback.
+
+## Usage of use
+
+1. Reading Context with use
+The use API can read context, much like useContext, but with more flexibility. You can call use conditionally inside components, allowing for more dynamic logic.
+
+```tsx
+import { use } from 'react';
+
+function Button() {
+ const theme = use(ThemeContext);
+ return ;
+}
+```
+
+Unlike useContext, which must be called at the top level of a component, use allows you to call context conditionally.
+
+```tsx
+function HorizontalRule({ show }) {
+ if (show) {
+ const theme = use(ThemeContext);
+ return ;
+ }
+ return null;
+}
+```
+
+This code showcases how use works well in conditionals, making it easier to handle context dynamically.
+
+2. Streaming Data from Server to Client
+You can use use to stream data from the server to the client by passing a Promise from a Server Component to a Client Component. This is ideal for fetching data that might not be available immediately.
+
+```tsx
+import { fetchMessage } from './lib.js';
+
+function App() {
+ const messagePromise = fetchMessage();
+ return (
+ waiting for message...}>
+
+
+ );
+}
+```
+In the Client Component:
+
+```tsx
+'use client';
+
+import { use } from 'react';
+
+function MessageComponent({ messagePromise }) {
+ const message = use(messagePromise);
+ return
{message}
;
+}
+```
+
+When messagePromise is passed, the Suspense boundary displays the fallback while the Promise resolves. Once resolved, the data is passed to the component.
+
+3. Handling Rejected Promises
+When a Promise is rejected, you can handle the error gracefully using use. There are two main approaches:
+
+Using an Error Boundary: Wrapping the component in an Error Boundary ensures the fallback is displayed when the Promise fails.
+
+```tsx
+import { ErrorBoundary } from 'react-error-boundary';
+
+function MessageContainer({ messagePromise }) {
+ return (
+ ⚠️ Something went wrong}>
+ ⌛ Downloading message...}>
+
+
+
+ );
+}
+```
+
+Providing an Alternative Value: You can use the catch method on the Promise to provide a fallback value in case of rejection.
+
+```tsx
+const messagePromise = new Promise((_, reject) => reject()).catch(() => {
+ return 'No new message found';
+});
+```
+
+## Troubleshooting Common Issues
+
+
+
+1. “Suspense Exception: This is not a real error!”
+This error usually occurs when you call use outside of a React Component or Hook function. Ensure that use is called inside a component or Hook and not within closures or try-catch blocks.
+
+2. Avoid Calling use in Try-Catch Blocks
+You cannot call use in a try-catch block. If error handling is required, wrap the component in an Error Boundary or handle the Promise rejection via the catch method.
+
+Conclusion
+The use API in React's Canary release is a significant leap forward in handling asynchronous resources and context in a more flexible and powerful way. By integrating seamlessly with Suspense and error boundaries, use allows for smoother data fetching, error handling, and dynamic component rendering.
+
+With more flexibility in conditionals and loops, use overcomes some of the limitations of hooks like useContext, making it an essential tool for modern React developers. As this API continues to evolve, it’s an exciting time to experiment with it and see how it can improve your component logic.
\ No newline at end of file