first commit

src/App.css

@@ -0,0 +1,26 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}
+
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}

src/App.tsx

@@ -0,0 +1,12 @@
+import './App.css';
+import { Parent } from './children-render/parent';
+
+const App = () => {
+  return (
+    <div className="content">
+      <Parent />
+    </div>
+  );
+};
+
+export default App;

src/children-render/children.tsx

@@ -0,0 +1,13 @@
+type ChildrenProps = {
+  counter: number;
+};
+
+export const Children = (props: ChildrenProps) => {
+  console.log('__children render');
+  return (
+    <div>
+      <h6>I'm its child</h6>
+      <p>My counter is {props.counter}</p>
+    </div>
+  );
+};

src/children-render/parent.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Children } from './children';
+
+export const Parent = () => {
+  console.log('__parent render');
+  const [counter, setCounter] = useState(0);
+  const [childrenCounter, setChildrenCounter] = useState(0);
+
+  return (
+    <div>
+      <h4>I'm the parent</h4>
+      <button onClick={() => setCounter((prev) => prev + 1)}>
+        Change own state! {counter}
+      </button>
+      <button onClick={() => setChildrenCounter((prev) => prev + 1)}>
+        Change children state!
+      </button>
+      <div>
+        <h5>These are my children</h5>
+        <Children counter={childrenCounter} />
+      </div>
+    </div>
+  );
+};

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

src/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  );
+}