React脚手架create-react-app
1.安装过程
$cnpm install -g -create-react-app
$create-react-app apps
$cd apps/
$npm start
2.图片路径
不能用相对路径<img src="./logo.svg"/>
可以用<img src={require("./logo.svg")}/>
或 import logo from "./logo.svg"
<img src={logo}/>
2.class问题
元素class用className="nav"
3.资源
我们在public中放了一张图片,我们会发现在地址上输
http://localhost:3000/02.jpg 能找到我们指定的图片。说明了react把public当成该项目的web容器。 以后做项目时资源放在public中。
每个组件类中引入图片当使用相对路径的时候,这个图片必须放在src中。
只要使用ajax和钩子 路径就要相对index.html,所以资源需要放在public下,为什么放?
因为public是静态资源。
React脚手架create-react-app的更多相关文章
- react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)
公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...
- react 脚手架 及路由和 redux
前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
随机推荐
- 小甲鱼Python第二十一讲课后习题
测试题: 0. 递归在编程上的形式是如何表现的呢? 在编程上,递归表现为函数调用本身这么一个行为. 1. 递归必须满足哪两个基本条件? 一. 函数调用自身二. 设置了正 ...
- angular.isArray()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 解密Redis的持久化和主从复制机制
Redis持久化 Redis 提供了多种不同级别的持久化方式: RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AOF 持久化记录服务器执 ...
- 解决C#中FileSystemWatcher类的Changed事件触发多次的问题
public static void WatchFile() { FileSystemWatcher watcher = new FileSystemWatcher(); watcher.Path = ...
- 如何使用iOS开发者授权以及如何申请证书
如何使用iOS开发者授权以及如何申请证书 在邮件里有一个Login按钮,点击后可以进入Apple Developer会员中心.点击图中的iOS Provisioning Portal,进入开发者授权设 ...
- 20165311 《网络对抗技术》 Kali安装
一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 从官网下载软件安装包 安装的比较顺利 具体截图就不放上来了 安装结果图: 网络配置和共享文件夹设置 网络配置: 由于我之前安装虚拟机,所以并 ...
- 深入理解iostat
前言 iostat算是比较重要的查看块设备运行状态的工具,相信大多数使用Linux的同学都用过这个工具,或者听说过这个工具.但是对于这个工具,引起的误解也是最多的,大多数人对这个工具处于朦朦胧胧的状态 ...
- Python——开发一个自动化微信投票器【附代码实例方法】
一个研究Python实践,最近研究一个投票的东东,主要是想测试利用Python实现刷微信投票. 本文纯粹为了记录一下 webdriver直接操作页面按钮的方法: #!/usr/bin/python # ...
- Luogu4113 [HEOI2012]采花
题目大意:给定一个长度为$n$的序列$a_i$,$m$次询问,每次询问$[l,r]$,求在区间内有多少个数出现了至少2次. 数据范围:$1\leq l\leq r\leq n\leq 2*10^6,1 ...
- pkg-config 详解
转载自:https://blog.csdn.net/newchenxf/article/details/51750239 1 什么是pkg-config pkg-config是一个linux下的命令, ...