How a designer can start React JS

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

Yarn

npm

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.

or

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:

Or

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.

Or

Now we can use any component from https://reactstrap.github.io/components/alerts/

Add Custom style in a project

Create custom CSS file in your project src/assets/css/style.css

react_image1

Now include this custom CSS “style.css” in src/index.js file after bootstrap CSS.
import ‘../src/assets/css/style.css’

react_image2

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.

Or

react_image3

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.

mm

Rajnee Makwana Web Designer

I am a Web Designer at Yudiz Solutions Pvt. Ltd - a leading Web and Mobile Apps development company. One of the greatest & simplest tools for learning more and growing is doing more so I am never afraid of trying new things. Like to solve complex design problems. Drawing & painting lover.

Leave a Reply

Top