React技术栈-react的脚手架创建应用案例-阿里云开发者社区

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

2024-09-02 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文介绍了如何使用React的官方脚手架工具create-react-app快速创建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内容

.logo{
    width: 200px;
    height: 200px;
}
.title{
    color: deeppink;
    font-size: 32px;
    font-family: "curlz mt","华文彩云","arial", "微软雅黑";
}

index.css文件

import React from "react";
import ReactDOM from "react-dom"
import App from "./components/app"
import "./index.css"
//渲染组件，APP组件是从"app.jsx"文件中导出的,"root"这个id是在"index".html文件默认就有的。
ReactDOM.render(<App />,document.getElementById("root"))