React -- 脚手架简述

最新推荐文章于 2023-08-08 13:54:37 发布

Sco_Jing1031

最新推荐文章于 2023-08-08 13:54:37 发布

阅读量578

点赞数 2

分类专栏： React与Vue 文章标签： react.js javascript bootstrap react脚手架前端 1024程序员节

本文链接：https://blog.csdn.net/m0_47109503/article/details/120874129

版权

React与Vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

欢迎学习交流！！！
持续更新中…

文章目录

React应用（基于React脚手架）

React应用（基于React脚手架）

react脚手架

1、xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

包含了所有需要的配置（语法检查、jsx编译、devServer…）
下载好了所有相关的依赖
可以直接运行一个简单效果

2、 react提供了一个用于创建react项目的脚手架库: create-react-app
3、项目的整体技术架构为: react + webpack + es6 + eslint
4、使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

全局安装与创建项目：

第一步，全局安装：npm install -g create-react-app（此处install可以省略成i）
第二步，切换到想创项目的目录，使用命令：create-react-app hello-react（项目名）
第三步，进入项目文件夹：cd hello-react
第四步，启动项目：npm start

构建React项目的其他方式：
npm: npm init react-app hello-react
yarn: yarn create react-app hello-react

启动开发：
npm start 或者 yarn start

启动测试：
npm test 或者 yarn test

构建生产版本：
npm run build 或者 yarn build

安装依赖

React-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库，是一个是可重用的前端组件库。
react-bootstrap的样式组件依赖于bootstrap。

安装bootstrap
npm install bootstrap@3.3.7 --save
安装react-bootstrap
npm install react-bootstrap@0.33.0 --save （版本不宜太高，否则有些样式不识别）
安装css-loader style-loader url-loader
npm install css-loader style-loader
npm install url-loader
在App.css文件中引入bootstrap.css
@import "~bootstrap/dist/css/bootstrap.css";

react脚手架项目结构

在这里插入图片描述
React脚手架程序执行顺序：

首先打开了index.js，引入React、ReactDOM、index.css、App，然后触发ReactDOM.render渲染页面
通过public目录找到index.html文件中的root“容器”节点
通过执行以上步骤，将App组件渲染到页面中，App组件的样式被导入到App.js文件中

index.html页面具体详解：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--  %PUBLIC_URL%代表public文件夹的路径  -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--  开启理想视口，用于做移动端网页的适配  -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--  用于配置浏览器页签+地址栏的颜色（仅支持安卓手机浏览器）  -->
    <meta name="theme-color" content="#000000" />
    <!--  对此网页主要功能的介绍  -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!--  如果你的网站被添加到手机主屏幕上，会自动识别该图片为链接图标，即用于指定网页添加到手机主屏幕后的图标（只支持苹果手机） -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--  做应用加壳时需要配置响应权限的文件  -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
  <!--  如果浏览器不支持js脚本的运行，就会出现下面这句话  -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!--  放置组件的“容器”  -->
    <div id="root"></div>
  </body>
</html>

index.js页面具体详解：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';    //记录文件渲染后在页面上的性能

ReactDOM.render(
  <React.StrictMode>    {/*能够检查App以及App的子组件中的内容是否合理*/}
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Sco_Jing1031

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
React -- 脚手架简述

欢迎学习交流！！！持续更新中…文章目录创建项目并启动安装依赖react脚手架项目结构# React应用（基于React脚手架）## react脚手架1、xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果2、 react提供了一个用于创建react项目的脚手架库: create-react-app3、项目的整体技术架构为: react + webp.
复制链接

扫一扫