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 ...
随机推荐
- [jzoj]3456.【NOIP2013模拟联考3】恭介的法则(rule)
Link https://jzoj.net/senior/#main/show/3456 Description 终于,在众亲们的奋斗下,最终boss 恭介被关进了库特设计的密室.正当她们松了一口气时 ...
- jmeter基本组成原件介绍
jmeter基本组成原件介绍 参考地址:https://wenku.baidu.com/view/d4986ca2aaea998fcc220ec1.html 从性能工具的原理划分: Jmeter工具和 ...
- centos6.8 安装jdk
一.卸载CentOS自带的Java 1. 查看CentOS的Java的信息 [root@bogon /]# java -version java version "1.7.0_9 ...
- 安装Percona版本的MySQL主从复制
准备两台虚拟机,按顺序执行1.1节的公共部分 1.1 首先安装 cmake # yum –y install cmake //也需要安装gcc-c++,openssl openssl-deve ...
- 8、vue路由跳转 params与query 路由传参
params与query router文件下index.js里面,是这么定义路由的: { path: '/about', name: 'About', component: About } 用quer ...
- 变量类型-Tuple
教程:一:元组的创建 元组(tuple)与列表类似,不同之处在于元组的元素不能修改 (1)tuple写在圆括号之间,元素用逗号隔开 (2)元组元素的类型可以不同 (3) ...
- export和export default
在 vue中 export 变量名不能识别,只能export default 变量,import 随便取名,不需要{}
- css学习_css布局案例
1.中间栏先加载 !!!(若不是这个条件的话 ,那可以用 calc 或者flex布局来实现 中间栏自适应,左右栏定宽) 2.中间栏自适应 width:100% 3.左右栏固定宽 左中右 ...
- 理解 Memory barrier(内存屏障)无锁环形队列
原文:https://www.cnblogs.com/my_life/articles/5220172.html Memory barrier 简介 程序在运行时内存实际的访问顺序和程序代码编写的访问 ...
- flask微服务框架的初步接触
测试2个关联的系统接口时,经常会遇到被测试系统或被测app的处理内部处理流程会依赖另一个系统的接口返回结果,这时,常用的做法就是写一个模拟测试桩,用作返回请求时的结果.java可以用servicele ...