筑基-函数组件与类组件

概念就不多介绍了，直接来正题吧。 接上创建项目

第一步 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;