React -- 脚手架简述
Posted 我真的爱敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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();
以上是关于React -- 脚手架简述的主要内容，如果未能解决你的问题，请参考以下文章
webpack系列从零搭建 webpack4+react 脚手架