Creating react app with bootstrap 4 and sass

When it comes to Web Development for Single Page Applications , JavaScript frameworks are one of the most favored platform for developers & businesses in today’s time.

In order to do that, knowing and understanding more of the top JavaScript Frameworks in today’s time is necessary like Angular JS2 to Angular 6, ReactJS, VueJS,MeteorJS, PolymerJS ,NodeJS and so on.

create a basic Web App using  ReactJS.

1) Create React App

You’ll need to have Node >= 6 and npm >= 5.2 on your machine.

If not installed, go through the following link:

a) NodeJs=> https://nodejs.org/en/

b) NPM=> https://docs.npmjs.com/getting-started

and after installation check node and npm version by following commands:

node -v
npm -v

2) To create react app it is possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application.

We will use npm to install the create-react-app command line interface (CLI) globally (-g).

Open up your terminal and run npm install -g create-react-app:

Now that you have the CLI available for use, navigate to the parent directory that you would like to place the application within. Then, run create-react-app with the name you would like to use for your project (just with no capital letters ).

create-react-app <name-of-app>

3) To create a project and run:

create-react-app my-app
cd my-app
npm start

After creating the app, your file structure would be following.

|-my-app/ 
|--README.md 
|--node_modules/ 
|--package.json 
|--.gitignore 
|--public/ 
|---favicon.ico 
|---index.html 
|--src/ 
|---App.css 
|---App.js 
|---App.test.js 
|---index.css 
|---index.js 
|---logo.svg

To create or edit components modify under src/ folder files.

4) Adding Bootstrap

a.Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:

npm install bootstrap --save
npm install  --save reactstrap react react-dom

b.Import Bootstrap CSS in the src/index.js file:

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

{/*Example.*/}
import { Button , Alert,  UncontrolledAlert,Input } from 'reactstrap';

class App extends Component {
 render () {
    return(
      <div className="container">  
        <Button>Click</Button>
         <Alert color="primary">
        This is a primary alert — check it out!
      </Alert>
      <UncontrolledAlert color="dark">
        This is a UncontrolledAlert dark alert — check it out!
      </UncontrolledAlert>     
      </div>
    )    
  }
}

5) Adding SASS/SCSS

Adding sass or scss to your create-react-app project will first require you to eject which can be done by executing the following command in your project’s base directory. npm run eject

You’ll be asked for approval because the action is permanent. Once this command has successfully run, you should see a config and scripts folder created. They contain all the build scripts necessary for building the started app. Among them is the webpack.config.dev.js and webpack.config.prod.js files, which is our focus.

Also note that npm run eject updates your dependencies with other packages which it has previously abstracted from you. You can view those new dependencies in your package.json.

And run the following commands

a) npm i sass-loader node-sass webpack --save-dev

You’ll also need style-loader and css-loader:

b)npm i style-loader css-loader --save-dev

Then rename your .css files to .scss and import to the component files.

Example :

This is a assuming you have a directory structure like this:

|--app.js
|--style.scss
|--components/
|--containers/

Per usual, in style.scss you can import your other sass files like so:

@import 'buttons';
@import 'modal';

And so on.

To learn more about ReactJS go through the below link

https://reactjs.org/tutorial/tutorial.html

Check other service Web development | AngularJS development.