ReactReact全家桶React脚手架
Posted 前端More
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ReactReact全家桶React脚手架相关的知识，希望对你有一定的参考价值。
文章目录
1 使用create-react-app创建react应用
1.1 React脚手架
-
React 脚手架其实是一个工具帮我们快速生成项目的工程化结构- 包含了所有需要的配置（语法检查、jsx编译、devServer…）
- 下载好了所有相关的依赖
- 可以直接运行一个简单效果
-
react提供了一个用于创建react项目的
脚手架库: create-react-app -
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
1.2.创建项目并启动
- 第一步，全局安装：
npm install -g create-react-app - 第二步，切换到想创项目的目录，使用命令：
create-react-app hello-react - 第三步，进入项目文件夹：
cd hello-react - 第四步，启动项目：
npm start
1.3 react脚手架项目结构
hello-react
├─ .gitignore // 自动创建本地仓库
├─ package.json // 相关配置文件
├─ public // 公共资源
│ ├─ favicon.ico // 浏览器顶部的icon图标
│ ├─ index.html // 应用的 index.html入口
│ ├─ logo192.png // 在 manifest 中使用的logo图
│ ├─ logo512.png // 同上
│ ├─ manifest.json // 应用加壳的配置文件
│ └─ robots.txt // 爬虫给协议文件
├─ src // 源码文件夹
│ ├─ App.css // App组件的样式
│ ├─ App.js // App组件
│ ├─ App.test.js // 用于给APP做测试
│ ├─ index.css // 样式
│ ├─ index.js // 入口文件
│ ├─ logo.svg // logo图
│ ├─ reportWebVitals.js // 页面性能分析文件
│ └─ setupTests.js // 组件单元测试文件
└─ yarn.lock
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="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>
<!-- 若浏览器不支持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 />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import logo from './logo.svg';
import './App.css';
function App()
return (
<div className="App">
<header className="App-header">
<img src=logo className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
export default App;
1.4 组件化编码流程
- 拆分组件: 拆分界面,抽取组件
- 实现静态组件: 使用组件实现静态页面效果
- 实现动态组件
- 动态显示初始化数据：数据类型、数据名称、保存在哪个组件
- 交互(从绑定事件监听开始)
2 脚手架版 Hello React
2.1 注意事项
- 为了区分组件和普通js文件，可以把定义组件的js文件后缀改成jsx
- 一个组件一个文件夹
- 引入js文件或者jsx文件时，可以不写后缀名
- 组件文件夹中的文件可以都命名为index，例如index.jsx/index.css，引入的时候可以直接引到目录名就行了
2.2 文件目录
2.3 代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
App.js
import React, Component from "react";
import Hello from "./components/Hello/Hello";
import Welcome from "./components/Welcome/Welcome";
export default class App extends Component
render()
return (
<div>
<Hello></Hello>
<Welcome></Welcome>
</div>
);
Hello.jsx
import React, Component from "react";
import "./Hello.css";
export default class Hello extends Component
render()
return (
<div>
<h1 className="title">Hello React</h1>
</div>
);
Hello.css
.title
background-color: pink;
Welcome.jsx
import React, Component from "react";
import "./Welcome.css";
export default class Welcome extends Component
render()
return <h2 className="demo">Welcome</h2>;
Welcome.css
.demo
background-color: skyblue;
2.4 VSCode生成代码模板
VSCode插件：ES7 React/Readux/GraphQL
- rcc+回车 （react class component）
- rfc（react function component）
以上是关于ReactReact全家桶React脚手架的主要内容，如果未能解决你的问题，请参考以下文章