React技术栈-react的脚手架创建应用案例

　　　　　　　　　React技术栈-react的脚手架创建应用案例

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.脚手架概述

　　xxx脚手架: 
　　　　用来帮助程序员快速创建一个基于xxx库的模板项目
　　　　脚手架包含了所有需要的配置
　　　　脚手架指定好了所有的依赖
　　　　脚手架可以直接安装/编译/运行一个简单效果

　　react提供了一个用于创建react项目的脚手架库的工具(create-react-app): 
　　　　create-react-app的github地址:https://github.com/facebook/create-react-app

　　项目的整体技术架构为:  
　　　　react + webpack(打包) + es6(模型化语法) + eslint(检查代码语法规范)

　　使用脚手架开发的项目的特点: 
　　　　模块化
　　　　组件化
　　　　工程化

 

二.创建项目并启动

1>.查看全局的下载根路径(npm命令是安装nodejs时自带的命令行工具)

C:\Users\yinzhengjie>npm root -g
C:\Users\yinzhengjie\AppData\Roaming\npm\node_modules

C:\Users\yinzhengjie>

2>.下载"create-react-app"工具

C:\Users\yinzhengjie>npm install -g create-react-app

3>.创建项目

C:\Users\yinzhengjie\Documents\HBuilderProjects\React>create-react-app my-react

4>.启动项目

C:\Users\yinzhengjie\Documents\HBuilderProjects\React>cd my-react

C:\Users\yinzhengjie\Documents\HBuilderProjects\React\my-react>
C:\Users\yinzhengjie\Documents\HBuilderProjects\React\my-react>npm start

5>.react脚手架项目结构

 

三.基于脚手架项目编写应用

1>.创建脚手架，创建如下图所示的目录结构

2>.目录中的代码

　　其中components目录是自己创建的，创建好脚手架后直接编译测试代码，本案例只编辑了三个代码文件。
　　　　index.jsx:
　　　　　　编辑组件代码。
　　　　index.css:
　　　　　　编辑样式代码。
　　　　index.js:
　　　　　　导入并渲染组件。

import React,{Component} from 'react';
import logo from "../logo.svg"

export default class App extends Component{
    
    render(){
        return (
            <div>
                <img className="logo" src={logo} alt="logo"/>
                <p className="title">React 2020 App 组件</p>
            </div>
        )
    }
}

app.jsx内容