一: 初始化项目

src/index.css

@@ -1,13 +1,27 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+.deep1-box {
+  border: 1px solid rgb(146, 89, 236);
+  padding: 8px;
+}
+.class-component {
+  border: 1px solid rgb(228, 147, 147);
+  padding: 8px;
+}
+.function-component {
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid rgb(133, 233, 120);
+}
+.deep2-box-1 {
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid rgb(233, 224, 107);
+}
+.deep3-box {
+  padding: 8px;
+  border: 1px solid rgb(55, 189, 241);
+}
+.deep2-box-2 {
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid rgb(23, 143, 77);
 }

src/index.js

@@ -1,17 +1,57 @@
-import React from 'react';
+import { Component } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+class ClassComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    return (
+      <div className="class-component">
+        <div>this is a class Component</div>
+        <div>prop value is: {this.props.value}</div>
+      </div>
+    );
+  }
+}
+
+function FunctionComponent(props) {
+  return (
+    <div className="function-component">
+      <div>this is a function Component</div>
+      <div>prop value is: {props.value}</div>
+    </div>
+  );
+}
+
+const jsx = (
+  <div className="deep1-box">
+    <ClassComponent value={666} />
+    <FunctionComponent value={100} />
+    <div className="deep2-box-1">
+      <a href="https://github.com/zh-lx/mini-react">mini react link</a>
+      <p style={{ color: 'red' }}> this is a red p</p>
+      <div className="deep3-box">
+        {true && <div>condition true</div>}
+        {false && <div>condition false</div>}
+        <input
+          type="button"
+          value="say hello"
+          onClick={() => {
+            alert('hello');
+          }}
+        />
+      </div>
+    </div>
+    <div className="deep2-box-2">
+      {['item1', 'item2', 'item3'].map((item) => (
+        <li key={item}>{item}</li>
+      ))}
+    </div>
+  </div>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(jsx, document.getElementById('root'));