筑基-函数组件与类组件
概念就不多介绍了，直接来正题吧。 接上创建项目
第一步 App.js
cp App.js App.js.bak 把App.js 备份一下 cp 为cmd 命令，linux 文件复制时很好用 vi App.js 编辑器查看App.js代码 vi 为vim 语法 查看 新建或编辑某个文件 复制代码
pwd : react/first-app/src/App.js pwd cmd 语法查看文件路径 function App() { return ( <div className="App"> 1、清空文件内容 2、增加一个<div>这是改后的</div> 3、浏览器查看证明ok 4、本步骤ok </div> ); } export default App; 复制代码第二步 创建对应文件夹和文件
mkdir -p src/views/home/ mkdir 创建文件夹命令 加-p 可以多层创建，可通过命令行操作，也可以编辑器操作 文中提到的命令，在win git bash mac iterm2 linux 中都可以正常使用 win 默认cmd 或vscode 中好多命令是不支持的。 vi src/views/home/index.jsx 创建一个文件 jsx 语法在后章节中介绍 复制代码
第三步 编写第一个类组件
pwd: src/views/home/index.jsx import React, { Component } from 'react'; /** //es6 导入模块 因为我们要编写一个类组件，所以需要使用react包 React 和Component 什么关系 这个其实就是 export 和export default 的关系 React.Component ======= Component 所以我们在创建组件，首先要继承react component **/ //class Home extends React.Component { //都可以，我们直接使用Component class Home extends Component { //每个类组件必需有个函数就是render(){} render(){ // 渲染页面正常是render返回值 return( <div>这是网站首页</div> ) } } export default Home; 写到，基本的一个类组件就ok 了， 来看上面的代码，如果是Test页面或About页面是不是都需要单独定义一个 类名 为了考虑程序代码复用以及潜意识开发。 我们可以统一使用View 看代码,有default 所以在外面使用和组件内不需要考虑对应关系 这样以后凡事看到 view 就默认就知道是页面了 class View extends Component { //每个类组件必需有个函数就是render(){} render(){ // 渲染页面正常是render返回值 return( <div>这是网站首页</div> ) } } export default View; 复制代码第四步 在浏览器里查看
修改App.js 1、导入home页面 import Home from './views/home'; 并且在app.js中使用这个Home 导入组件的名称要大写 <div className="App"> <Home/> </div> 从开发上讲要改一个大小写 所以我们把文件夹也大写 import Home from './views/Home'; function App() { return ( <div className="App"> <Home/> </div> ); } export default App; 这样在src/views/文件夹下创建的项目就不小写了 以后就统一大写了 src/views/Home/ 复制代码第五步 编写一个函数组件
函数组件其实App.js就相当于一个函数组件，那我们来写两个函数组件 function View(){ return( <div> 这是一个函数组件 </div> ) } export default View; 对应es6写法 const View = () =>{ return( <div> 这是一个函数es6写法组件 </div> ) } export default View; 这样简单的函数组件和类组件就ok了。 前期课程主要是类组件，函数组件会在具体hook讲了后那就是函数组件会多写一些。 复制代码第六步 写一个共公组件及目录强化
react/first-app/src/components/Header/index.jsx 目录为 src/ styles index.scss base.scss test.scss img/ a.png b.png views/ Home/index.jsx Test/index.jsx components/ Header/index.jsx Footer/index.jsx 内容为类组件 import React, { Component } from 'react'; class Com extends Component { render(){ return( <div> 这是一个header组件 </div> ) } } /* // function Com(){ // return( // <div> // 这是一个header组件 // </div> // ) // } const Com = () =>{ return( <div> 这是一个header组件 </div> ) } */ export default Com; 这里不用View了。用Com组件的简写 这样当我们看到View时就会发现这是页面 当我们看到是Com时默认就知道这是共公组件 潜意识开发 复制代码第七步 本章完整代码
react/first-app/src/App.js import Home from './views/Home'; import Test from './views/Test'; function App() { return ( <div className="App"> <Home/> <Test/> </div> ); } export default App; 复制代码react/first-app/src/views/Home/index.jsx import React, { Component } from 'react'; // export default // export 区别 // React.Component // Component // 一个类组件 // 1、导入react 对就包 // 2、编写一个class // render // return() // 3、export default Home; // Home/index.jsx import Header from '../../components/Header'; // 按正常相对路径引入 就可以了 class View extends Component{ render(){ return( <div> <Header/> 第一个home组件 </div> ) } } export default View; 复制代码react/first-app/src/views/Test/index.jsx import React, { Component } from 'react'; const View = () =>{ return( <div> 这是一个Test组件 </div> ) } export default View; 复制代码react/first-app/src/components/Header/index.jsx // function Com(){ // return( // <div> // 这是一个header组件 // </div> // ) // } const Com = () =>{ return( <div> 这是一个header组件 </div> ) } // import React, { Component } from 'react'; // // class Com extends Component { // render(){ // return( // <div> // 这是一个header组件 // </div> // ) // } // } export default Com;
作者：金禹铭
链接：https://juejin.cn/post/7023663758341832712