no message

chenxuan1/src/App.js

@@ -14,8 +14,7 @@ class App extends Component{
     return(
       <div className='mainContainer'>
         <div className='nav'>
-              <NavLink to='/about' children="About"/>
-              <NavLink  to='/home' activeclassname='active'>Home</NavLink>
+              <NavLink  to='/jsx' activeclassname='active'  children="jsx语法"></NavLink>
               <NavLink to='/ref1'>ref-字符串</NavLink>
               <NavLink to='/ref2'>ref-内联函数</NavLink>
               <NavLink to='/ref3'>ref-函数</NavLink>

chenxuan1/src/pages/about.jsx

@@ -1,13 +0,0 @@
-import React,{Component} from "react";
- class About extends Component
- {
-     render()
-     {
-         return(
-             <div>
-                 <h1>This is About</h1>
-             </div>
-         )
-     }
- }
- export default About;

chenxuan1/src/pages/home.jsx

@@ -1,11 +0,0 @@
-import React,{Component} from 'react';
-class Home extends Component{
-    render(){
-        return(
-            <div>
-                <h1>This is Home</h1>
-            </div>
-        )
-    }
-}
-export default Home;

chenxuan1/src/pages/jsx.jsx

@@ -0,0 +1,25 @@
+import React from 'react'; 
+
+class JSX extends React.Component {
+    render(){
+        return vdome
+    }
+}
+let style={
+    color:"yellow",
+    fontSize:"40px"
+}
+let vdome=(
+    <div>
+        <h1>JSX语法</h1>
+        <h1>JSX语法</h1>
+        <h1 style={{color:"red"}}>JSX语法</h1>
+        <h1>JSX语法</h1>
+        <h1>JSX语法</h1>
+        <h1 style={{color:"green"}}>JSX语法</h1>
+        <h1>JSX语法</h1>
+        <h1 style={style}>JSX语法</h1>
+    </div>
+)
+
+export default JSX

chenxuan1/src/pages/ref2.jsx

@@ -2,15 +2,17 @@ import React from "react";
 class Ref extends React.Component {
   constructor(props) {
     super(props);
-    this.inputRef = React.createRef();
   }
-  componentDidMount() {
-    this.inputRef.current.focus();
+  haha=()=> {
+    const {hehe}=this
+    alert(hehe.value)
   }
   render() {
     return (
       <div>
-        <input type="text" ref={this.inputRef} />
+        <input type="text" ref={c=>this.hehe=c} />
+        <hr />
+        <button onClick={this.haha}>点我</button>
       </div>
     );
   }

chenxuan1/src/pages/ref3.jsx

@@ -2,15 +2,20 @@ import React from "react";
 class Ref extends React.Component {
   constructor(props) {
     super(props);
-    this.inputRef = React.createRef();
   }
-  componentDidMount() {
-    this.inputRef.current.focus();
+  haha=(c)=> {
+    this.hehe=c
+  }
+  test=()=> {
+    alert(this.hehe.value)
   }
   render() {
     return (
       <div>
-        <input type="text" ref={this.inputRef} />
+        <input type="text" ref={this.haha}/>
+        <hr />
+        
+        <button onClick={this.test}>点我</button>
       </div>
     );
   }

chenxuan1/src/router/index.jsx

@@ -1,5 +1,4 @@
-import About from '../pages/about'
-import Home from '../pages/home'
+import Jsx from '../pages/jsx'
 import Ref1 from "../pages/ref1"
 import Ref2 from "../pages/ref2"
 import Ref3 from "../pages/ref3"
@@ -9,12 +8,8 @@ import Props from "../pages/props"
 import Life from "../pages/life"
 const routes = [
     {
-      path: "/home",
-      component: Home
-    },
-    {
-      path: "/about",
-      component: About
+      path: "/jsx",
+      component: Jsx
     },
     {
       path: "/life",