React 脚手架应用以及注意事项

  在使用React脚手架之前需要通过  create-react-app 快速构建 React 开发环境 ,

    注意 : create-react-app 自动创建的项目是基于 Webpack + ES6 。

  执行以下命令创建项目:

   $ npm install -g create-react-app

   $ create-react-app myapps

   $ cd myapps/

   $ npm start

  在安装成功后开始使用脚手架

      图为安装成功后的目录

  在使用React之前需要注意以下三点:

    一 .  关于 class 的问题

    在 React 中元素的 class 需要换成 className

    

    二 . 图片路径的问题

      1 . 如果要使用相对路径引入图片有两种方法:( 相对路径用于请求 src 下面的图片)

        每个组件类中引入图片当使用相对路径的时候,这个图片必须放在src中。

         a . 直接在组件类的模板中通过 require("文件的相对路径") 引入

 <img src={require("../images/01.jpg")} alt="图片"/>

         b . 通过定义图片,在模板中调用

// 引入并定义图片
import pic from ‘./images/01.jpg‘;  

// 在模板中使用
 <div className="App">
          <img src={pic} alt="图片"/>
</div>

      2 . 如果在 public 中放了一张图片,我们会发现在地址栏上输 http://localhost:3000/01.jpg 能找到图片,说明 React 把 public 当做该项目的 web 容器。 所以,以后做项目时静态资源放在 public 中。

      因此,我们的 ajax 请求和 钩子函数 的路径就相对于 index.html , 下面是 ajax请求本地文件 aa.txt 实例

import React, { Component } from ‘react‘;
//  npm install axios  下载并引入 axios
import axios from "axios";
//   创建类组件 组件类的创建方法//    第一 React.createClass()  最开始的//    第二 class Heads extend Component{}//    第三 构造函数
class Slide extends Component {
    constructor(props){ // 在该组件类的标签中设置 props 值,这里设置的是 title
        super(props);
        this.state={  // 设置state
            url:"http://localhost:3000/images/01.jpg"
        }
    }
    render() {
        return (
            <div className="slide">
                <div>
                    <img src={this.state.url} alt="图片"/>
                </div>
            </div>
        );
    }
    componentDidMount(){
        axios.get(this.props.title)
        .then(function (res) {
            console.log(res.data);
            this.setState({
                "url":res.data
            })
        }.bind(this))
        .catch(function (err) {
            console.log(err);
        })
    }
}
export default Slide;

     上面组件中设置 props 值

// title 与上面组件中的值对应
<Slide title="http://localhost:3000/txt/aa.txt"/>

     三 . 事件

        事件通常和 this  有关,下面是关于事件的例子

import React, { Component } from ‘react‘;

class Heads extends Component {    //创建组建类
    constructor(){
        super()
        this.state={
            title:"welcom to China"
        }
        this.fn=this.fn.bind(this)
    }
  fn(){
//    事件往往和this有关
    this.setState({
        title:"Hello world!"
    })
  }
  render() {
    return (
      <div className="Heads">
           <h3 onClick={this.fn}>
               {this.state.title}
           </h3>
      </div>
    );
  }
}

export default Heads;

    在学习 React 时,一定要注意:

    ajax请求和钩子函数 路径就要相对index.html,所以资源需要放在public下,因为public是静态资源。

  

          

    

原文地址:https://www.cnblogs.com/461770539-qq/p/9393415.html

时间: 2024-10-02 22:31:56

React 脚手架应用以及注意事项的相关文章

React -- 脚手架书写react

一.脚手架工具 react也有很多脚手架工具,通过脚手架工具可以快速搭建一个项目应用. 官方推荐脚手架 如果你是在学习 React 或创建一个新的单页应用 Create React App 如果你是在用 Node.js 构建服务端渲染的网站 Next.js 如果你是在构建面向内容的静态网站 Gatsby 二.create-react-app 安装 npx create-react-app react-project 注意是npx,不是npm 安装创建好项目之后,切换到项目就可以运行项目了 运行

react脚手架搭建1

23:01:17 react脚手架搭建 (个人用的是webstorm,所以分享下webstorm中的创建react脚手架项目的方法) 1.创建新项目(前提是下载nodejs环境) 2.下载好在webstorm中右键自己创建的项目目录,菜单中会出现一个命令行工具,点进去   然后    npm start 开启服务 3.在浏览器中打开 http://localhost:3000/ 可以看见react的默认页面 初步的搭建完成,开始自己写东西 原文地址:https://www.cnblogs.com

react脚手架搭建

react脚手架搭建 [转]https://blog.csdn.net/weixin_41421227/article/details/80875544 由于我们在安装的过程中要使用到npm  因此需要先前安装好node.js 直接到官方下载即可  一般建议大家下载稳定版的(左边那个!) 知道你们懒,咯官网戳→_→  node.js官网:https://nodejs.org/en/ 判断安装成功与否的标志↓ 打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完

【webpack系列】从零搭建 webpack4+react 脚手架(四)

经过三个章节的学习,你已经学会搭建了一个基于webpack4的react脚手架.如果要更改配置,比如,你希望把编译后的js文件和css文件等单独放dist下的static目录下,你想想,是不是有点麻烦.你要去浏览webpack的配置文件,找到哪些配置项,然后去更改它,我们希望有个参数配置文件,只要更改参数配置,而无需更改webpack的配置文件. 1 添加参数配置文件 (1)在根目录创建config文件夹,在config文件夹内新建一个index.js文件,文件内容如下: 'use strict

React脚手架中使用less

最近在用react.js 结合蚂蚁金服的 Ant Design Mobile 做一个单页面的应用程序,遇到了一个很棘手的问题——那就是 react脚手架不支持less,看了不少优秀博主如何在react脚手架中使用less,,觉得繁琐且又不能解决实际问题,于是自己弄明白后感觉如此简单,做了这么个教程,避免新手走弯路. 首先声明一下我用的是微软的代码编辑软件VS code,下面的是详细的图文教程. 前期准备: 通过命令 create-react-app react-demo 创建了自己的React应

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 脚手架的

react 脚手架 及路由和 redux

前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app -g 使用 react 脚手架创建一个 app 的项目:create-react-app app 根据指令进入 app 项目: cd app 下载 react 的路由插件:npm i react-router-dom -S 组件通信的优化: npm i redux -S 以上便是把我们的 react

react脚手架的建立——小白入门

一.介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站. 做出来以后,发现这套东西很好用,就在2013年5月开源了. 二.React脚手架:create-react-app React 的环境搭建,是比较繁琐的,有很多的依赖:react.react-dom.babel.webpack ... 需要很多的前置知识,很容易让人从入门到放弃. 于是就诞生了 脚手架 这种东西,

React: React脚手架

一.简言 React开发目前已经非常流行,对于如何实现对React项目的管理和维护,React生态圈出现了大量可用的开发工具,例如Browserify.Gulp.Grunt.webpack等.其中,webpack称为CommonJS模块的主流工具之一,它是一个模块绑定器,拥有模块化和网络性能的两大优点,可以将不同类型的文件转换为单个文件,也可以将所有的依赖项打包成单个文件.当然,使用webpack管理React,开发者需要通过命令行去安装webpack和Babel,然后对webpack进行配置.