【React】入门第六天 - create-react-app

开始学习react脚手架去做项目了，Github地址

脚手架

---

create-react-app 是facebook推出一款react的脚手架

安装

npm i -g create-react-app
# 或者使用镜像
npm i -g create-react-app --registry=https://registry.npm.taobao.org
#查看版本
create-react-app --version

创建项目

create-react-app myapp-demo
# 等待初始化

运行项目

npm start 

项目结构

├── node_modules
├── package-lock.json
├── package.json
├── public    ## 静态资源文件夹
└── src				## 源码目录
    ├── App.css
    ├── App.js  	## 根组件
    ├── App.test.js
    ├── index.css
    ├── index.js		## 全局的主配置文件
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js				

组件的创建

我们在src下创建文件夹components，以后所有的组件全部放入该文件中

cd src 
mkdir components 

新建一个组件Home.js，这就是我们的基础模板

import React, { Component } from "react";

export default class Home extends Component {
    render(){
        return ( <div>
            Home 组件
        </div> )
    }
}

使用组件，我们在需要的地方使用组件

import React from 'react';
import logo from './logo.svg';
import './App.css';
// 导入我们定义好的组件
import Home from "./componets/home"

function App() {
  return (
    <div className="App">
      你好
      <Home></Home>
    </div>
  );
}

export default App;

图片的引用

在之前说明了，public是存放静态资源文件的地方，其实我们还可以将文件存储在src/assets文件夹中，然后在组件里引入文件，把变量赋予图片的src属性

import React, { Component } from "react";
// 引用图片
import myLogo from "../assets/mylogo.png"

export default class Home extends Component {
    render(){
        
        return ( <div>
            Home 组件
            <img src = {myLogo}></img>
        </div> )
    }
}