Thomas  Granger

Thomas Granger

1587364620

Create a Carousel to display Images and Video in React with Bootstrap

Introduction

In this article, I will explain how to create a Bootstrap Carousel in ReactJS. Carousel is a slideshow for cycling a series of images or videos. A carousel rotates the images horizontally or vertically with some effect.

Prerequisites

  • Basic knowledge of React.js
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap

Create ReactJS project

Let’s first create a React application using the following command.

npx create-react-app firsttutorial  

Open the newly created project in Visual Studio code and Install bootstrap in this project using the following command.

npm install react-bootstrap bootstrap  

Now, open the index.js file and import Bootstrap.

    import 'bootstrap/dist/css/bootstrap.min.css';    

Now, right-click on the public folder. Add a new folder ‘assets’ and under it add a new folder and rename that to ‘img’ and add some demo images to this folder

Now go to src folder and create a new component ‘BootstrapCarousel .js’ and add the following reference in this component

    import Carousel from 'react-bootstrap/Carousel'  

Add the following code in this component:


    import React, { Component } from 'react'  
    import Carousel from 'react-bootstrap/Carousel'  
    export class BootstrapCarousel extends Component {  
            render() {  
      
                    return (  
                            <div>  
                             <div class='container-fluid' >  
                              <div className="row title" style={{ marginBottom: "20px" }} >  
                              <div class="col-sm-12 btn btn-warning">  
                              How To Use Bootstrap Carousel In ReactJS  
                             </div>  
                             </div>  
                             </div>  
                             <div className='container-fluid' >  
                             <Carousel>  
                             <Carousel.Item style={{'height':"300px"}} >  
                             <img style={{'height':"300px"}}  
                             className="d-block w-100"  
                            src={'assets/img/img2.jpg'}  />  
                               <Carousel.Caption>  
                                 <h3>First Demo </h3>  
                                     </Carousel.Caption>  
                                     </Carousel.Item  >  
                                     <Carousel.Item style={{'height':"300px"}}>  
                                     <img style={{'height':"300px"}}  
                                       className="d-block w-100"  
                                        src={'assets/img/img1.jpg'}    />  
                                           <Carousel.Caption>  
                                       <h3>Second Demo</h3>  
                                          </Carousel.Caption>  
                                             </Carousel.Item>  
                                           <Carousel.Item style={{'height':"300px"}}>  
                                           <img style={{'height':"300px"}}  
                                            className="d-block w-100"  
                                             src={'assets/img/img3.jpg'}   />  
                                            <Carousel.Caption>  
                                              <h3>Third Demo</h3>  
                                              </Carousel.Caption>  
                                             </Carousel.Item>  
                                            </Carousel>  
                                    </div>  
                            </div>  
                    )  
            }  
    }  
      
    export default BootstrapCarousel  

Now open app.js file and add the following code:


    import React from 'react';  
    import logo from './logo.svg';  
    import './App.css';  
    import BootstrapCarousel from './BootstrapCarousel'  
    function App() {  
      return (  
        <div className="App">  
          <BootstrapCarousel></BootstrapCarousel>  
        </div>  
      );  
    }  
      
    export default App;  

Now run the project by using ‘npm start’ and check the result:

We can also pause slider on mouse hover and set time intervals. Let’s create a component ‘BootstrapCarouselDemo.js’ and add the following reference in this component.

import React, { Component } from 'react'  
  
export class BootstrapCarouselDemo extends Component {  
        render() {  
                return (  
                        <div>  
                         <div class='container-fluid' >  
                          <div className="row title" style={{ marginBottom: "20px" }} >  
                          <div class="col-sm-12 btn btn-warning">  
                          How To Use Bootstrap Carousel In ReactJS  
                         </div>  
                         </div>  
                         </div>  
                         <div className='container-fluid' >  
                         <Carousel interval={600} keyboard={false} pauseOnHover={true}>  
                         <Carousel.Item style={{'height':"300px"}}  >  
                         <img style={{'height':"300px"}}  
                         className="d-block w-100"  
                        src={'assets/img/img2.jpg'}  />  
                           <Carousel.Caption>  
                             <h3>First Demo </h3>  
                                 </Carousel.Caption>  
                                 </Carousel.Item  >  
                                 <Carousel.Item style={{'height':"300px"}}>  
                                 <img style={{'height':"300px"}}  
                                   className="d-block w-100"  
                                    src={'assets/img/img1.jpg'}    />  
                                       <Carousel.Caption>  
                                   <h3>Second Demo</h3>  
                                      </Carousel.Caption>  
                                         </Carousel.Item>  
                                       <Carousel.Item style={{'height':"300px"}}>  
                                       <img style={{'height':"300px"}}  
                                        className="d-block w-100"  
                                         src={'assets/img/img3.jpg'}   />  
                                        <Carousel.Caption>  
                                          <h3>Third Demo</h3>  
                                          </Carousel.Caption>  
                                         </Carousel.Item>  
                                        </Carousel>  
                                </div>  
                        </div>  
                )  
        }  
}  
  
export default BootstrapCarouselDemo 

Now open app.js file and add the following code:

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import BootstrapCarouselDemo from './BootstrapCarouselDemo'  
function App() {  
  return (  
    <div className="App">  
      <BootstrapCarouselDemo></BootstrapCarouselDemo>  
    </div>  
  );  
}  
  
export default App;

Now run the project using ‘npm start’ and check your results.

Summary

In this article, we learned how to implement Bootstrap Carousel in a ReactJS application.

#reactjs #bootstrap #web-development #javascript

What is GEEK

Buddha Community

Create a Carousel to display Images and Video in React with Bootstrap
Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

Houston  Sipes

Houston Sipes

1597161600

Display Images in Bootstrap Carousel using Razor Pages and Entity Framework

This short article shows how to display images stored in a database in a Razor Pages application using the Bootstrap Carousel and Entity Framework Core.

Images can be stored in a database in two ways: you can either save the file to the server’s file system and store the name and/or path of the image file, or you can store the file itself in binary format. Each approach has its pros and cons. Rather than get into the debate about which storage method is better, I’ll show how to work with the Carousel using both approaches.

The carousel transitions through a series of content which can include images and text. A huge number of carousel components are available, ranging widely in terms of their features and complexity. The Bootstrap carousel benefits from not requiring any additional components and from its simplicity. It caters for the majority of use cases, supporting cycling content from right to left, fade transitions and simple replacement of content. It also supports controls, indicators and captions.

The key elements of a Bootstrap carousel are an element with the carousel class applied to it, and a number of elements with the carousel-item class applied to them within an element with carousel-inner applied to it.

<div class="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active>...</div>
        <div class="carousel-item>...</div>
        <div class="carousel-item>...</div>
    </div>
</div>

The content to be displayed is placed within the carousel-item elements, one of which needs to have the active class added to make the carousel visible.

The carousel supports a number of options which can be applied declaratively via CSS classes or data-* attributes, or they can be specified in client-side code. At the moment, the carousel simply replaces one set of content with the next without any transition between them. The slide class causes content to slide in from right to left. The default interval between transitions is 5 seconds. You can use the data-interval attribute to specify a different interval in milliseconds. The data-ride option is used to specify whether the carousel should auto play. A value of carousel results in the carousel auto-playing on load. Using these options, the following set up will result in a carousel that slides content from right to left every 2 seconds and auto plays:

<div class="carousel slide" data-ride="carousel" data-interval="2000">
    <div class="carousel-inner">
        <div class="carousel-item active>...</div>
        <div class="carousel-item>...</div>
        <div class="carousel-item>...</div>
    </div>
</div>

First, I’ll look at images stored in the file system. I’m using the Northwind sample database for the demo and will display employees’ photos in the carousel. The Employee entity has a property named PhotoPath, which is a string. In my version, the value stored in the corresponding database column is just the file name of the employee’s photo. The image files are located in wwwroot/images:

images

I have an EmployeeService class responsible for obtaining data using Entity Framework Core. It has one method that gets all employee data:

public class EmployeeService : IEmployeeService
{
    private readonly NorthwindContext context;
    public EmployeeService(NorthwindContext context) => this.context = context;
    public async Task<List<Employee>> GetEmployees() => await context.Employees.ToListAsync();
}

The GetEmployees method is called in the PageModel class and the data assigned to a public property:

public class CarouselModel : PageModel
{
    private readonly IEmployeeService employeeService;
    public CarouselModel(IEmployeeService employeeService) =>  this.employeeService = employeeService;
    public List<Employee> Employees { get; set; }
    public async Task OnGetAsync()
    {
        Employees = await employeeService.GetEmployees();
    }
}

In the content page, the PhotoPath property is used to build a relative URL to each image as each employee is iterated and a corresponding carousel-item element is rendered:

<div class="carousel slide" data-ride="carousel" data-interval="2000" style="width:192px;">
    <div class="carousel-inner">
        @foreach (var employee in Model.Employees)
        {
        <div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
            <img src="~/images/@employee.PhotoPath" alt="@employee.FirstName @employee.LastName">
        </div>
        }
    </div>
</div>

Note that the width of the carousel has been constrained to the width of the images. Also see that the active class is applied to the carousel-item element generated for the first employee entity in the sequence to ensure the carousel appears. The first and last name of the employee is used to generate a suitable alt attribute value.

So how do you get binary images into a carousel? Probably the easiest way is to use data URIs. Using this approach, you embed the binary data encoded as a Base 64 string and assign it to the src attribute of an img element.

The .NET data taype that maps to the database varbinary or BLOB types is a byte array. The Employee entity has a property named Photo that maps to the appropriate database column:

public byte[] Photo { get; set; }

This is how the code that generates the carousel-item elements is modified to make use of data URIs:

@foreach (var employee in Model.Employees)
{
<div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
    <img src="data:image/jpg;base64,@Convert.ToBase64String(employee.Photo)" alt="@employee.FirstName @employee.LastName">
</div>
}

The format of the data URI is the scheme data folowed by a colon, then the mime type, in this case image/jpg, although just image will do. This is followed by a semi-colon, and then the encoding. A number of encodings are supported, but Base64 encoding is used for binary data. This is followed by a required comma, and then the actual data, encoded using the suitable .NET method.

What about including a caption? This is achieved by adding the carousel-caption class to an element within each carousel-item:

@foreach (var employee in Model.Employees)
{
<div class="carousel-item @(employee == Model.Employees.First() ? "active" : "")">
    <img src="data:image/jpg;base64,@Convert.ToBase64String(employee.Photo)" alt="@employee.FirstName @employee.LastName">
    <div class="carousel-caption">
        <p class="mb-0">@employee.FirstName @employee.LastName</p>
    </div>
</div>
}

Summary

Whether you store images in the file system or as binary data, it is pretty easy to display them using the Bootstrap carousel in Razor Pages.

#bootstrap #bootstrap carousel #display images

I am Developer

1597647163

Laravel 7/6 Create Thumbnail from Image | Intervention Image Thumbnail

Laravel create thumbnail from image. Here, i will show you how to upload image and create thumbnail of uploaded image in laravel using intervention package.

Also using laravel intervention image thumbnai, you can resize the image size in laravel.

Laravel intervention image upload with Thumbnail and save to storage

  1. Install Laravel App
  2. Setup Database
  3. Install laravel intervention image thumbnail
  4. Generate migration file and model
  5. Make Route For Save and Display Image And Thumbnail
  6. Create Controller For Store Image & Thumbnail
  7. Create Blade View
  8. Make Folder
  9. Start Development Server

https://www.tutsmake.com/laravel-intervention-image-upload-using-ajax/

#laravel intervention image thumbnail #laravel create thumbnail from image #create thumbnail of image laravel 7/6 #laravel 7. x and 6. x - image upload with create thumbnail image

mehul bagada

mehul bagada

1590992910

React Bootstrap Select Dropdown Example

Hello Guys,

This simple article demonstrates of react select dropdown example. This article goes in detailed on react select dropdown onchange. In this article, we will implement a react bootstrap select dropdown example. this example will help you react select custom dropdown.

If you are new in react js then we are provide react select box example. in this example we are save dropdown value in state. select box onchange event save data in state.

Link :- https://www.nicesnippets.com/blog/react-bootstrap-select-dropdown-example

#react #bootstrap #react-bootstrap #dropdown #react-native #reacttutorial