Create a New React App
You can use one of the following methods to create a new app. (You will need to have Node 8.16.0 or Node 10.16.0 or later version on your local system)
To create a project called my-react-demo, run this command:
npx create-react-app my-react-demo
yarn create react-app my-react-demo
npm init react-app my-react-demo
Run a New React App
Once the installation is done, you can open your project folder and you can use the following command to runs the app in development mode. It will open http://localhost:3000 to view in your browser.
What is Reactstrap?
Using this library we can use a carousel, collapse, dropdown, modals, popovers, tab, etc. without using jQuery. These elements are basic elements of website design.
Reactstrap also provides advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.
So now we will see how to add Reactstrap in our React project.
Add Reactstrap and Bootstrap
We will install a reactstrap and Bootstrap from NPM. First, we will include Bootstrap CSS because Reactstrap also uses it. So we have to install Bootstrap CSS for that use following command:
npm install --save bootstrap
yarn add bootstrap
To include Bootstrap CSS in our project write below code in src/index.js file.
Now we will install reactstrap from NPM. For this use following command.
npm install --save reactstrap react react-dom
yarn add reactstrap react react-dom
Now we can use any component from https://6-4-0–reactstrap.netlify.app/components/alerts/
Add Custom style in a project
Create custom CSS file in your project src/assets/css/style.css
Now include this custom CSS “style.css” in src/index.js file after bootstrap CSS.
We can also add fonts and images folder wise as per our requirements same as we add “style.css”
Add SCSS in React project
We can also use “style.scss” file. Create and include SCSS file the same as we added simple “style.css”.
But it will throw an error at compile-time, So to import Sass files, you first need to install node-sass. Run the following command inside your workspace.
npm install node-sass
yarn add node-sass
I hope that this blog might be useful to newcomers to react in setup and start the design phase in your project and If you have good hands-on SCSS than you can also use it. We will learn how to design a website component base with SCSS in our next blog.