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 ...
随机推荐
- 【JAVA基础】一:聊聊笔试常见到的 “==、equal” 比较是否相等的内在差别
开始本文之前,先让我们记住一个口诀(这个口诀只针对基础的类比如String.Integer等,如果是自定义的类,需要看equal的具体实现): equal比较其值,== 比较地址 这两天在走查代码的时 ...
- python ironicclient源码分析
ironicclient是一个cli工具,用来和用户交互的. 首先写一个简单的例子,获取ironic所有的node节点: from ironicclient import client if __na ...
- 爬虫——scrapy入门
scrapy 安装scrapy pip install scrapy windows可能安装失败,需要先安装c++库或twisted,pip install twisted 创建项目 scrapy s ...
- 20189210牟健 《Linux内核原理与分析》第二周作业
本周学习了汇编指令以及通过反汇编一个小程序来了解栈的变化 写了一个简单的C程序,如图所示: 通过gcc -s -o main.s main.c -m32指令将其编译成汇编程序 打开该汇编文件并删除不重 ...
- thinkphp框架,数据动态缓存后,或数据已读取出来,想分页怎么办
//读取缓存后赋值到数组,通过array_slice函数处理,如: $blog = S('blogname'); //赋值 $count = count($blog); //条数统计 $page = ...
- Web Service学习(一)
1.WebMethod特性包含哪些属性,都有什么用? 1.BufferResponse属性 该属性表明是否启用对Web Service方法响应的缓冲.当设置为true时,Web Service方法将响 ...
- 将整数m的各位数字保存到数组A中
import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/4 20:10 * @description ...
- python语法_嵌套
列表里面每个元素可以是不同的数据类型,每一个元素也可以是一个列表或者元组等, a = [[1,2,3],"a",13,(5,7,9,"dasd")] b = a ...
- Windows下搭建kafka运行环境
完整解决方案请参考: Setting Up and Running Apache Kafka on Windows OS 在环境搭建过程中遇到两个问题,在这里先列出来,以方便查询: 1. \Jav ...
- linux 编译静态库及动态库例子--from周立功文档
/* hello1.c */#include <stdio.h>int hello1 (void){printf("hello 1!\n");return 0;}/* ...