React 学习12-6 -- React 入门到熟练必会内容（二） 必出精品！！！

前端付豪
276 阅读2分钟

PS:欢迎 访问 博客(完善中) huanhunmao.github.io/

前言

一、React 官方脚手架 create-react-app

1.

在这里插入图片描述

  • 注意 这个 地方需要 cd my-app 进入到这个 文件夹下面到 my-app 文件夹

  • 因为我的工程建立在 这个文件夹内

  • 然后 npm run start 跑起来

  • 在这里插入图片描述

  • nice !!!

  • 将webpack 暴露出来

  • npm run eject

  • 在这里插入图片描述

  • 删除多余文件 比如 .idea .git 这种 就可以啦

  • 重新 执行 npm run eject 就可

  • webpack 暴露成功

  • 在这里插入图片描述

  • 暴露之后 npm run sart 可能执行不了

  • 那么 删除node_modules包 之后 再 npm install 就可

  • 因为 package.json 里 有 dependencies 它里面有很多 依赖版本 在这里插入图片描述

2.上传服务器是打包后的部分

  • npm run build
  • 怎么 看有没有问题呢
  • 安装serve npm install -g serve
  • serve -s build
  • 这样就可启动 浏览器页面
  • 另外一个小的内容
  • 在这里插入图片描述
  • 在这里插入图片描述 在这里插入图片描述

3、带框架程序调试

在这里插入图片描述

  • 当前无法进行调试

  • 在这里插入图片描述

  • 在这里插入图片描述

  • 在这里插入图片描述

  • 生产模式下

  • 先 npm run build

  • 在这里插入图片描述

  • serve -s build

二、JSX 支持HTML标签 Ref使用

1.JSX

在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

  • config 文件夹下面的 paths.js 可以改url 后缀 默认是 "/"
  • 比如 我可改成 "/cource"
  • index.html head 里面 其他东西是什么意思
<head>
  <!-- 字符格式 -->
  <meta charset="utf-8" />
  <!-- 小图标 -->
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <!-- 兼容移动端 宽度和初始大小 -->
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <!-- 搜索标题下面的描述 -->
  <meta name="description" content="Web site created using create-react-app" />
  <!-- 手机端显示的图标 -->
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
  <!-- 放到桌面的图标 -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
</head>
  • 将 index.html 里面 head 内容补充完整
  <!-- 兼容移动端 宽度和初始大小 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <!-- 格式化 ios端忽略掉这几个自动识别 -->
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <!-- 代码IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则可以激活Chrome Frame . -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2.更改内容 变成我们可使用的

  • 新建文件夹 在这里插入图片描述

  • public.css 写一部分内容 初始化

html,
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  • App.js 更改
import React from "react";

// 更改成有状态函数
class App extends React.Component {
  render() {
    return <div className="App">app组件</div>;
  }
}

export default App;
  • 在这里插入图片描述
  • 启动服务 npm run dev
  • 在这里插入图片描述
  • 可正常显示在页面上

3、尝试JSX

  • 注意写法 var name = "张三"; 后面这个分号至关重要！！！
  • 使用逗号报错 在这里插入图片描述
import React from "react";

// 更改成有状态函数
class App extends React.Component {
  render() {
    var name = "张三";
    return <div className="App">{name}</div>;
  }
}

export default App;
  • 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述
  • 怎么解决这个事情？

三、使用步骤

1.引入库

2.读入数据

3、

四、使用步骤

1.引入库

2.读入数据

3、

五、使用步骤

1.引入库

2.读入数据

3、

十、本节问题总结

1.关于package.json里 依赖版本的问题

在这里插入图片描述

2.给别人代码 需要 删除 node_modules包 因为它很大

  • 当别人拿到之后 直接 npm install

3、

总结

avatar
文章
阅读
粉丝