zoukankan      html  css  js  c++  java
  • React 脚手架

      React 脚手架,来让我们快速的搭建起来一个 React 的项目

      1. 全局安装 React 的脚手架

        npm i -g create-react-app

      2. 创建项目

        create-react-app 项目名

      3. 进行项目指令:

        cd 项目名

      4. 运行项目:

        npm start 

      这样我们 React 脚手架的项目搭建就完成了

      接下来,让我们看看 React 脚手架,给我们下载的目录

      

       现在我们就来看看每个文件的功能:

      首先来看 README.md 文件,这里是对我们 React 脚手架的指令的一个介绍,尤其要关注一个指令,npm run eject 

      因为我们的 React 脚手架的配置文件时隐藏的,我们可以通过 npm run eject 来让隐藏的配置文件展现出来,然后我们可以加一些自己喜欢的配置

      src 下面的目录

        App.css:是所以组件的样式

        index.css:是整个网页的全局样式

        App.js:是最大的组件

        index.js:出口文件

        App.test.js:将 App 组件的内容渲染到页面上来

      在这里,我们的图片地址,如果是通过相对路径来获取的都不能直接的在 src 属性上面输入,而是应该通过 import 来引入此图片,之后通过 src={} 的方式,来引入,否则报错

      组件中需要引入的图片,不能放在 public 中,而是应该放在 src 中,且相对组件的引入方式  (图片引入的两种情况,1、相对组件,2、相对 index.html 中)

      添加自组件的方法:

      首先:我们在 src 下面创建一个专门放一个子组件的文件夹

        heads 文件夹里面就是我们的 Heads 的组件

        

         heads.js 的写法

        

        heads.css (则就是普通的 css 写法)

        

       然后我们的组件将创建好了,接下来我们就要在父组件中引入子组件了

        

       render 函数中,return 返回的是模板,所以可以带 ()

       

  • 相关阅读:
    [调参]batch_size的选择
    [调参]CV炼丹技巧/经验
    [Pytorch]Pytorch加载预训练模型(转)
    [PyTorch]论文pytorch复现中遇到的BUG
    [Opencv]图像的梯度与边缘检测(转)
    freemodbus移植、实例及其测试方法
    eclipse的C/C++开发搭建
    ROS安装
    U-boot移植
    QT开发实战一:图片显示
  • 原文地址:https://www.cnblogs.com/shangjun6/p/11430968.html
Copyright © 2011-2022 走看看