How To Template Html Use Reactjs

Reactstrap is a popular front-end library that is easy to use React Bootstrap iv components. This library contains the stateless React components for Bootstrap 4. The Layout component is used for organizing the layout of our application content using Row, Column, and Container Component.

The Row component provides a way to represent a row in the grid organisation. The Col component provides a manner to represent a column in the grid system. The container component provides a style to middle and horizontally pad the contents of our awarding. We tin can use the following approach in ReactJS to use the ReactJS Reactstrap Layout Component.

Container Props:

fluid: If bool then information technology applies. Container-fluid class and if string, and then it applies .container-{breakpoint} class.
component: This component is used for the root node. This prop is a way to use Html with strings. This takes the default value as 'div' and blazon is the chemical element type.
fixed: The stock-still props are used to set up the maximum width and minimum width of the screen. The chief use of these props is to fix the viewport. The default value is false and the blazon is bool.
maxWidth:maxWidth props are used to set the maximum width in the viewport. The type of the maxWidth is xs, ls, md , false and the default value is lg .

Row Props:

noGutters: Information technology is used to remove the gutter spacing between added negative margins and columns.
form: Information technology is used to form a filigree with a grade row.
xs: It is used to denote the number of columns which will fit adjacent to each other on actress-small devices having a resolution of < 576 pixels.
sm: Information technology is used to denote the number of columns that will fit side by side to each other on modest devices having a resolution of 576 pixels.
md: It is used to denote the number of columns that volition fit next to each other on medium devices having a resolution of 768 pixels.
lg: It is used to denote the number of columns that volition fit next to each other on large devices having a resolution ≥ of 992 pixels.
xl: It is used to denote the number of columns that will fit side by side to each other on extra-large devices having a resolution ≥ of 1200 pixels.

Col Props:

xs: It is used to announce the number of columns to span on actress-pocket-size devices having resolution < 576 pixels.
sm: It is used to announce the number of columns to span on pocket-size devices having a resolution of 576 pixels.
md: It is used to announce the number of columns to span on medium devices having a resolution of ≥ 768 pixels.
lg: Information technology is used to denote the number of columns to span on large devices having a resolution ≥ of 992 pixels.
forty: It is used to announce the number of columns to span on actress-large devices having a resolution ≥ of 1200 pixels.
width: It is used to denote the width of the component in pixels.

Creating React Application And Installing Module:

Stride 1: Create a React awarding using the following control:

npx create-react-app foldername

Step two: Afterwards creating your projection folder i.e. folder proper noun, motion to it using the post-obit command:

cd foldername

Footstep 3: Later creating the ReactJS application, install the required module using the following command:

npm install reactstrap bootstrap

Project Structure: It volition look like the post-obit.

Project Structure

Case ane: To show a single column in each row component.

Javascript

              import React from                            "react"              ;            
              import                            "bootstrap/dist/css/bootstrap.min.css"              ;            
              import { Container, Row, Col } from                            "reactstrap"              ;            
              function              App() {            
                            return              (            
                            <div            
                            style={{            
                            display:                            "cake"              ,            
                            width: 900,            
                            padding: xxx            
                            }}            
                            >            
                            <h4>ReactJS Reactstrap Layout Component</h4>            
                            <Container>            
                            <Row>            
                            <Col>Java</Col>            
                            <Col>Python</Col>            
                            <Col>Html</Col>            
                            <Col>CSS</Col>            
                            </Row>            
                            </Container>            
                            </div>            
                            );            
              }            
              export                            default              App;            

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open up your browser and go to http://localhost:3000/ , you lot will see the post-obit output:

Output

Example 2: To show multiple columns in each row component.

Javascript

              import React from                            'react'            
              import                            'bootstrap/dist/css/bootstrap.min.css'              ;            
              import {            
                            Container, Row, Col            
              } from                            "reactstrap"            
              function              App() {            
                            render              (            
                            <div mode={{            
                            brandish:                            'block'              , width: 900, padding: 30            
                            }}>            
                            <h4>ReactJS Reactstrap Layout Component</h4>            
                            <Container>            
                            <Row className=              "bg-success"              >            
                            <Col xs=              "three"              >Cavalcade                            with              .col-3 Size</Col>            
                            <Col xs=              "automobile"              >.Column                            with              col-auto Size</Col>            
                            <Col xs=              "three"              >Column                            with              .col-3 Size</Col>            
                            </Row>            
                            <Row className=              "bg-secondary"              >            
                            <Col xs=              "6"              >Column                            with              .col-6 Size</Col>            
                            <Col xs=              "6"              >Column                            with              .col-6 Size</Col>            
                            </Row>            
                            <Row className=              "bg-success"              >            
                            <Col xs=              "half-dozen"              sm=              "four"              >Cavalcade                            with              .col-6 .col-sm-4 Size</Col>            
                            <Col xs=              "6"              sm=              "iv"              >Cavalcade                            with              .col-vi .col-sm-iv Size</Col>            
                            <Col sm=              "4"              > Column                            with              .col-sm-4 Size</Col>            
                            </Row>            
                            </Container>            
                            </div >            
                            );            
              }            
              export                            default              App;            

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/ , you lot will meet the following output:

Example 3:

App.js

              import React from                            "react"              ;            
              import                            "bootstrap/dist/css/bootstrap.min.css"              ;            
              import { Container, Row, Col } from                            "reactstrap"              ;            
              role              App() {            
                            return              (            
                            <div            
                            style={{            
                            width: 9000,            
                            padding: 10            
                            }}            
                            >            
                            <h4> Reactstrap Layout Component</h4>            
                            <Container>            
                            <Row className=              "bg-danger"              >            
                            <Col xs=              "3"              >Column                            with              .col-three Size</Col>            
                            <Col xs=              "machine"              >.Cavalcade                            with              col-auto Size</Col>            
                            <Col xs=              "three"              >Column                            with              .col-3 Size</Col>            
                            </Row>            
                            <Row className=              "bg-primary"              >            
                            <Col xs=              "half-dozen"              >Column                            with              .col-6 Size</Col>            
                            <Col xs=              "6"              >Column                            with              .col-6 Size</Col>            
                            </Row>            
                            <Row className=              "bg-secondary"              >            
                            <Col xs=              "6"              sm=              "4"              >            
                            Column                            with              .col-six .col-sm-4 Size            
                            </Col>            
                            <Col xs=              "6"              sm=              "4"              >            
                            Column                            with              .col-half-dozen .col-sm-4 Size            
                            </Col>            
                            <Col sm=              "4"              > Column                            with              .col-sm-4 Size</Col>            
                            </Row>            
                            </Container>            
                            </div>            
                            );            
              }            
              consign                            default              App;            