React 的组件

周大胖子

react 的组件 继承了 一个react 的 基类 叫做 ： Component
老版本[反正跟我现在生成的不一样 ] 的 写法是 ：
在 App.js 中 ：

1. import React from 'react';
   
2. 
   
3. class App extends React.Component {
   
4.   render() {
   
5.     return (
   
6.       <button className="square">
   
7.         {this.props.value}
   
8.       </button>
   
9.     );
   
10.   }
    
11. }

复制代码

这种引入方式 也等于

1. import React , { Componet } form 'react';
   
2. class App extends Componet(){
   
3.   render(){
   
4.     return(
   
5.       <div>222222</div>
   
6.     );
   
7. }
   
8. }

复制代码

新版本【反正不跟上面的版本一样 都叫新版本】依照我的个人经验，这个版本是省略了很多不必要的声明 ；具体 我的经验对不对 咳咳 等我再学学就知道

1. import React from 'react';
   
2. import './App.css';
   
3. 
   
4. function App() {
   
5.   return (
   
6.     <div className="App">
   
7.      2
   
8.     </div>
   
9.   );
   
10. }
    
11. 
    
12. export default App;
    

复制代码

1.一个JS文件造出来，那一个组件就完成了；
2.把这个组件 丢到页面上 ：
    2.1 在 index.js 页面中引入这个页面：

1. import Mytest from './Mytest';

复制代码

   2.2 使用内置的 JSX 语法  把它渲染到指定的ID上；

1. ReactDOM.render(<Mytest />, document.getElementById('mytest'));
   

复制代码

3. 在 相应的页面上添加组件ID：

1. <div id="mytest"></div>

复制代码

依照我的个人经验，下一章该讲路由了 然后是 组件之间的传值