Overview
ReactJS is an open-source JavaScript library. It is designed and maintained by Facebook and the community of individual developers & companies for creating rich and engaging web apps fast and efficiently with minimal coding. In this blog, we can see how a designer can start HTML development in the React project.
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
npx create-react-app my-react-demo
Yarn
yarn create react-app my-react-demo
npm
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.
npm start
or
yarn start
What is Reactstrap?
Reactstrap is a react library that contains React Bootstrap 4 components that favor composition and control. This library does not depend on jQuery or Bootstrap javascript.
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
Or
yarn add bootstrap
To include Bootstrap CSS in our project write below code in src/index.js file.
import ‘bootstrap/dist/css/bootstrap.min.css’;
Now we will install reactstrap from NPM. For this use following command.
npm install --save reactstrap react react-dom
Or
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.
import ‘../src/assets/css/style.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
Or
yarn add node-sass
Conclusion
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.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
