react雕刻网站——react基础（4）

===========================一本正经的分割线🙃==========================

一起去知识的海洋游泳吧~

关于官方文档给出的react傻瓜搭建方法，自动集成运行环境

yarn add create-react-app

【但是文件中没有配置文件】

可以通过命令

yarn eject

但是。。。。。。。。。。。。。。。

忘了那个不灵活的方法吧

我们依旧选用自己搭建的方式：依旧看我们搭建好的项目

我叫“上图”

在jsx中引入我们所需要的React和ReactDOM利用es6写一段代码，用ReactDOM中render属性将数据绑定到我们在index.html中设置的id为app的元素上，如上图；效果如下

成功

|——关于React的样式引用

可以用用行内样式，但是请注意我上面有一处错误提醒，那就是font-size;React 中应该写成fontSize

还有和我们平时写不同的是应该运用字符串

这是运行结果

但是我们通常开发的时候还是用class的方式来写入样式。我们可以引入一个scss和css文件来处理

搬来以为没问题，，，

如果出现：Cannot find module 'node-sass'

安装一下node-sass

yarn add node-sass --seve-dev

然后继续打包

打包成功

写入的样式

运行结果

|——拓展小知识：网页中使用轮播可以使用是swiper插件，

yarn add reactjs-swiper

安装完成后可以进行调用；

引入

完整jsx
import React from "react";

import ReactDOM from "react-dom";

import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

let ReactSwiperExample = () => {

    const items = [{

      image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

      title: '图片1',

      link: 'http://jd.com'

    }, {

      image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

      title: '图片2',

    }, {

      image: 'http://i0.cy.com/xtl/pic/2020/01/14/main.jpg',

      title: '图片3',

      link: 'http://jd.com'

    }, {

      image: 'http://i0.cy.com/xtl/pic/2020/02/02/main_a1.jpg',

      title: '图片4',

    }];

    const swiperOptions = {

      preloadImages: true,

      autoplay: 4000,

      autoplayDisableOnInteraction: false

    };

    return (

      <ReactSwiper swiperOptions={swiperOptions} showPagination items={items}

                   className="swiper-example" />

    );

  };

  ReactDOM.render(

    <ReactSwiperExample />, document.getElementById('app')

  );

// let jsx = <div className="jsx" >jsx......</div>

// ReactDOM.render(

//     jsx,

//     document.getElementById("app")

// );

对应的index.scss
body{

    margin: 0;

    #app{

       width: 710px;

       height:280px;

       margin: 0 auto;

       border:1px solid black;

       img{

           background-size: cover;

           background-repeat: no-repeat;

       }

    }

}