React-20：初始化React脚手架

最新推荐文章于 2024-04-09 14:55:09 发布

臧小川

最新推荐文章于 2024-04-09 14:55:09 发布

阅读量184

点赞数

分类专栏： react 文章标签： react.js javascript webpack

臧小川

本文链接：https://blog.csdn.net/chuan0106/article/details/119838025

版权

react 专栏收录该内容

112 篇文章 6 订阅

订阅专栏

react 脚手架

使用React脚手架实现Hello组件
- 入口文件src下的index.js
- 外壳APP src下面的app.js
npx create-react-app 命令卡死/不成功，更改成淘宝镜像

脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目
包含了所有需要的配置(语法检查、jsx 编译、devServer…)
下载好了所有相关的依赖
可以直接运行一个简单效果
react 提供了一个用于创建 react 项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

全局安装：npm i -g create-react-app
切换到想创项目的目录，使用命令：create-react-app hello-react
进入项目文件夹：cd hello-react
启动项目：npm start

react 脚手架项目结构

public ---- 静态资源文件夹

favicon.icon ------ 网站页签图标

index.html -------- 主页面

logo192.png ------- logo 图

logo512.png ------- logo 图

manifest.json ----- 应用加壳的配置文件

robots.txt -------- 爬虫协议文件

src ---- 源码文件夹

App.css -------- App 组件的样式

App.js --------- App 组件

App.test.js ---- 用于给 App 做测试

index.css ------ 样式

index.js ------- 入口文件

logo.svg ------- logo 图

reportWebVitals.js — 页面性能分析文件(需要 web-vitals 库的支持)

setupTests.js ---- 组件单元测试的文件(需要 jest-dom 库的支持)

功能界面的组件化编码流程(通用)

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果

使用React脚手架实现Hello组件

public下的index.html

这个文件主要是一个id为root的容器，用来存放React渲染的组件。

  <div id="root"></div>

<!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="red" />
  <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>
  <!-- 若llq不支持js则展示标签中的内容 -->
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>

</html>

入口文件src下的index.js

这个文件是一个入口文件，这个文件主要负责，引入React核心库，React-dom库，以及引入App.js文件
App.js是所有组件的外壳。
在index.js文件下可以直接通过DOM操作public下的index.html文件，因为底层React已经帮我们实现。

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 />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

外壳APP src下面的app.js

//创建“外壳”组件App
// 模块化的方式 而不是结构赋值 react 用了多种导出的方式 default的方式导出了 react   export Component 类似于这种
import React,{Component} from 'react' 
import Hello from './components/Hello'
import Welcome from './components/Welcome'

//创建并暴露App组件
export default class App extends Component{
	render(){
		return (
			<div>
				<Hello/>
				<Welcome/>
			</div>
		)
	}
}

npx create-react-app 命令卡死/不成功，更改成淘宝镜像

npm config get registry
// 默认是：https://registry.npmjs.org/

2.修改成淘宝的镜像源
npm config set registry https://registry.npm.taobao.org

臧小川

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React-20：初始化React脚手架

react 脚手架创建项目并启动react 脚手架项目结构功能界面的组件化编码流程(通用)使用React脚手架实现Hello组件入口文件src下的index.js外壳APP src下面的app.js脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目包含了所有需要的配置(语法检查、jsx 编译、devServer…)下载好了所有相关的依赖可以直接运行一个简单效果react 提供了一个用于创建 react 项目的脚手架库: create-react-app项目的整体技术架构为: rea
复制链接

扫一扫