diff --git a/.gitignore b/.gitignore
index 4d29575..8ac8d49 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,96 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+### JetBrains+all template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### VisualStudioCode template
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Local History for Visual Studio Code
+.history/
+
+# Built Visual Studio Code Extensions
+*.vsix
+
diff --git a/src/App.js b/src/App.js
index 3784575..fb90132 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,22 +1,70 @@
-import logo from './logo.svg';
+import React from "react";
+// import logo from './logo.svg';
 import './App.css';
 
 function App() {
+  // vue3 组合式 API
+  // React 必须大写 Pascal 命名 组件
+  function FnHello({name="Fn"}){
+    return <div>Hello world By {name}</div>
+  }
+
+  let com = FnHello({name:"obj"})
+
+  function FnHello2(){
+    return React.createElement("div", [], "Hello world By React.createElement")
+  }
+
+  // vue2 选项式 API
+  class ClassHello extends  React.Component {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props) {
+      super(props);
+    }
+
+    render() {
+      return <div>Hello world By Class</div>
+    }
+  }
+
+  // React 不能直接渲染 js 对象
+  let obj = {
+    a: 1,
+    b: 2
+  }
+
+  // 如果是数组则依次遍历
+  let arr1 = [
+      1,
+      2,
+      3
+  ]
+
+  let arr2 = [
+    FnHello({name:"arr1"}),
+    FnHello({name:"arr2"}),
+    FnHello({name:"arr3"}),
+  ]
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        {/*<img src={logo} className="App-logo" alt="logo" />*/}
+        <FnHello/>
+
+        <FnHello2/>
+
+        <ClassHello/>
+
+        {com}
+
+        {JSON.stringify(obj)}
+
+        <br/>
+
+        {arr1}
+
+        {arr2}
       </header>
     </div>
   );