diff --git a/src/routes/posts/2023-07-03-from-svelte-to-react.md b/src/routes/posts/2023-07-03-from-svelte-to-react.md
new file mode 100644
index 00000000..b2ed50be
--- /dev/null
+++ b/src/routes/posts/2023-07-03-from-svelte-to-react.md
@@ -0,0 +1,244 @@
+---
+title: From Svelte to React
+description: Learning React for Svelte Developers
+excerpt: ""
+created_at: 2023-07-03T20:42:50.725Z
+updated_at: 2023-07-04T21:07:01.191Z
+coverImage: /images/cover/from-svelte-to-react.jpg
+coverImageAlt: a programmer sitting at a desk with two laptops in front of him. on the left laptop screen, there is the svelte logo. on the right laptop screen there is the react logo
+draft: false
+tags:
+ - programming
+ - react
+ - svelte
+ - learning
+categories: []
+twitterImage: /images/cover/from-svelte-to-react.jpg
+opengraphImage: /images/cover/from-svelte-to-react.jpg
+meta: ""
+layout: post
+keywords: []
+---
+
+
+
+# Contents
+
+## Creating a Web App Skaffold
+
+
+
+You can create Vite-based apps using the vite skaffold tool. This is the recommended way, as Vite is
+much faster and easier to use than webpack-based projects like create-react-app and create-svelte.
+
+```sh
+pnpm create vite
+# follow the prompts!
+```
+
+
+ )
+}
+
+/* app.jsx */
+import MyComponent from './myComponent.js';
+export default function App() {
+ return (
+
+ This is an app!
+
+
+ )
+}
+
+```
+
+
+
+
+## Returning Multiple Components
+
+
+
+
+```html
+
+ Hello World!
+
+
+ Nice to meet you!
+
+```
+
+
+
+
+JSX requires a return of only one element, so you need to nest multiple elements inside a single element,
+such as the `...` element or the null-element (`<>...>`)
+
+```js
+function MyComponent() {
+ return (
+ <>
+
+ Hello World!
+
+
+ Nice to meet you!
+
+ >
+ )
+}
+```
+
+
+
+
+
+## Styling Components
+
+
+
+
+```html
+
+
+
+ Hello World!
+
+
+```
+
+
+
+
+You can't use `class` in JSX, as it is a reserved word in ECMAScript. Use `className` instead. If you want
+to use inline styles, you need to use the JS properties of the `style` object instead of the html/css properties
+used in normal HTML. the `style` attribute takes an object, so you can pass an object
+
+```jsx
+function MyComponent() {
+ let borderColor = 'blue';
+ const styles={ borderColor }
+ return (
+
+ Hello World!
+
+ )
+}
+```
+
+
+
+
+## Displaying Variables
+
+## Conditional Rendering
+
+## Rendering Data Structures
+
+## Passing Props to Components
+
+## Event Raising and Handling
+
+## Handling Component State
+
+## Using Framework-Specific Features
+`use*` function in react.
+
+https://github.com/joshnuss/react-hooks-in-svelte
+
+## Render Caching
+`useCallback` in react. Completely not necessary in svelte. use stores to save state.
+
+## Sharing State Between Components
+
+## Fallbacks While Loading Data
+React's `` element
+
+## Server-Side Components
+`use client/server` in react. `+server.js` in sveltekit.
\ No newline at end of file
diff --git a/static/images/cover/from-svelte-to-react.jpg b/static/images/cover/from-svelte-to-react.jpg
new file mode 100644
index 00000000..12061484
Binary files /dev/null and b/static/images/cover/from-svelte-to-react.jpg differ