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的更多相关文章

  1. react脚手架改造(react/react-router/redux/eslint/karam/immutable/es6/webpack/Redux DevTools)

    公司突然组织需要重新搭建一个基于node的论坛系统,前端采用react,上网找了一些脚手架,或多或少不能满足自己的需求,最终在基于YeoMan的react脚手架generator-react-webp ...

  2. react 脚手架 及路由和 redux

    前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app ...

  3. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  4. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  5. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  6. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  7. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  8. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  9. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  10. [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  ...

随机推荐

  1. XVIII Open Cup named after E.V. Pankratiev. Eastern Grand Prix

    A. Artifacts 建立语法分析树,首先根据上下界判断是否有解,然后将所有数按下界填充,线段树判断是否存在和超过$K$的子区间. B. Brackets and Dots 最优解中一定包含一对中 ...

  2. 机器学习方法、距离度量、K_Means

    特征向量 1.特征向量:以人为例,每个元素可能就对应这人的某些方面,这就是特征,例如:身高.年龄.性别.国际....2.特征工程:目的就是将现有数据中可作为信号的特征与那些仅是噪声的特征区分开来:当数 ...

  3. vue全选反选demo

    <template> <div> <div class="xuanze"> <label><input type=" ...

  4. easyui dialog 中 panel-body 高度太小出现 滚动条 的原因

    easyui dialog 中 panel-body 高度太小出现 滚动条 的原因: dialog 高度比 iframe 高度大79 就可以了 $.editcompanypersoninfo = fu ...

  5. Dynamics 365 解决方案导出报错

    之前导出解决方案异常,按照CRM社区的方法解决成功,但是没有了解原因,今天看到有朋友解答了原因,也分享给大家 先来看看异常 我那时导出的是default解决方案,这是模拟 导出异常 “业务流程错误”- ...

  6. 【Python基础】lpthw - Exercise 45 制作游戏

    作者在本节中给出了 一些风格建议. 一.函数的风格 1. 类里面的函数经常被称作“方法”,但实质上它和函数没什么不同. 2. 使用类的时候,可以用动词而不是名词给函数命名,指明其具体功能,例如list ...

  7. 让Delphi的TRichEdit支持新标准

    先说明, 不是直接让TRichedit支持, 而是派生出一个类支持 原理就是, IDE自带的richedit使用的是2.0版本(RICHEDIT20A/RICHEDIT20W), 这个版本虽然支持图片 ...

  8. C++ opencv调用resize修改插值方式遇到的坑

    opencv提供的热死则函数原型如下:void resize(InputArray src, OutputArray dst, Size dsize, double fx=0, double fy=0 ...

  9. 转载:Android RecyclerView 使用完全解析 体验艺术般的控件

    转自:https://blog.csdn.net/lmj623565791/article/details/45059587

  10. SharePoint 2010 查看dll的PublicKeyToken值方法

    在做asp.net开发过程中,偶尔对有些dll,进行强制签名,那么在注册dll到gac的时候,就需要知道dll的PublicKeyToken值,如何通过简单的方法,来获得这个值呢,下面是一个很好又实用 ...