Why Frontend Frameworks Matter

Frontend frameworks are essential tools in modern web development. They provide developers with pre-written code, libraries, and components, significantly accelerating the development process and ensuring consistency and quality across web applications. By leveraging these frameworks, developers can focus more on creating unique features and functionalities rather than reinventing the wheel.

1. Next.js: The Full-Stack React Framework

Overview:

Next.js, developed by Vercel, has emerged as a leading full-stack framework for building React applications. It offers server-side rendering (SSR), static site generation (SSG), and a range of other features that enhance the performance and scalability of web applications.

Key Features:

• Server-Side Rendering (SSR): Improves SEO and initial load times by rendering pages on the server.
• Static Site Generation (SSG): Generates static HTML at build time, providing lightning-fast load times.
• API Routes: Allows for the creation of API endpoints within the same project.
• Incremental Static Regeneration (ISR): Updates static content without rebuilding the entire site.

Why Watch Next.js in 2024:

Next.js is continually evolving with new features and improvements. Its robust support for server-side rendering and static site generation makes it a go-to choice for developers looking to build high-performance, SEO-friendly web applications.

2. React: The Ubiquitous UI Library

Overview:

React, developed by Facebook, remains one of the most popular libraries for building user interfaces. Its component-based architecture allows developers to build reusable UI components, leading to more maintainable and scalable applications.

Key Features:

• Virtual DOM: Enhances performance by minimizing direct DOM manipulation.
• Component-Based Architecture: Promotes reusability and modularity.
• Hooks: Simplifies state management and side effects in functional components.
• Rich Ecosystem: Extensive library and tool support, including Redux, React Router, and more.

Why Watch React in 2024:

React’s continuous updates and strong community support ensure it remains at the forefront of frontend development. With upcoming features like React Server Components and improvements to concurrent rendering, React is set to maintain its dominance.

3. Vue.js: The Progressive JavaScript Framework

Overview:

Vue.js, created by Evan You, is a progressive framework for building user interfaces. It is designed to be incrementally adoptable, meaning developers can integrate it into existing projects or use it to build entire applications from scratch.

Key Features:

• Reactivity System: Provides a declarative and intuitive approach to state management.
• Single-File Components: Encapsulates HTML, CSS, and JavaScript in a single file.
• Vue CLI: Simplifies project setup and configuration.
• Vuex: A state management library specifically for Vue applications.

Why Watch Vue.js in 2024:

Vue.js continues to gain popularity due to its simplicity and flexibility. With the release of Vue 3, which introduces significant performance improvements and a new Composition API, Vue is poised to attract even more developers.

4. Angular: The Comprehensive Framework

Overview:

Angular, developed and maintained by Google, is a comprehensive framework for building single-page applications (SPAs). It provides a robust set of tools and features out-of-the-box, including a powerful CLI, dependency injection, and RxJS for reactive programming.

Key Features:

• Two-Way Data Binding: Simplifies synchronization between the model and the view.
• Dependency Injection: Promotes modularity and reusability.
• RxJS Integration: Enables reactive programming with observables.
• Angular CLI: Facilitates project setup, testing, and deployment.

Why Watch Angular in 2024:

Angular’s strong typing with TypeScript and its comprehensive tooling make it a solid choice for large-scale enterprise applications. Continuous updates and a robust ecosystem ensure Angular remains relevant and powerful.

5. Svelte: The Radical New Approach

Overview:

Svelte, developed by Rich Harris, is a relatively new but rapidly growing framework that takes a different approach to frontend development. Unlike traditional frameworks that do most of their work in the browser, Svelte shifts that work to compile time, producing highly optimized vanilla JavaScript.

Key Features:

• No Virtual DOM: Directly manipulates the DOM, resulting in faster performance.
• Reactive Declarations: Simplifies state management with a more intuitive syntax.
• Small Bundle Size: Produces minimal JavaScript, leading to faster load times.
• SvelteKit: A full-fledged framework for building Svelte applications.

Why Watch Svelte in 2024:

Svelte’s innovative approach to frontend development is gaining traction. Its ability to produce highly efficient code with minimal overhead makes it an attractive choice for performance-critical applications.

6. Solid.js: The Performance-Oriented Framework

Overview:

Solid.js, created by Ryan Carniato, is a declarative JavaScript library for creating user interfaces. It emphasizes performance by using fine-grained reactivity and compiling templates to highly efficient JavaScript code.

Key Features:

• Fine-Grained Reactivity: Offers precise updates, improving performance.
• Compile-Time Optimization: Compiles templates to optimized JavaScript.
• Small Bundle Size: Produces minimal code, enhancing load times.
• Simple API: Provides an easy-to-understand API for building UIs.

Why Watch Solid.js in 2024:

Solid.js is gaining attention for its focus on performance and simplicity. Its unique approach to reactivity and compile-time optimization makes it a strong contender in the frontend framework landscape.

7. Alpine.js: The Minimalist Framework

Overview:

Alpine.js is a lightweight JavaScript framework designed for adding interactivity to web pages. It offers a declarative syntax similar to Vue.js, but with a smaller footprint, making it ideal for projects that require minimal JavaScript.

Key Features:

• Declarative Syntax: Provides an easy-to-understand approach to adding interactivity.
• Small Size: Minimal overhead, resulting in faster load times.
• Component-Based: Encourages modular and reusable code.
• Simple Integration: Easily integrates with existing projects.

Why Watch Alpine.js in 2024:

Alpine.js is perfect for developers looking to add interactivity without the complexity and size of larger frameworks. Its simplicity and ease of integration make it a valuable tool for many projects.

8. Qwik: The Next Generation Framework

Overview:

Qwik, created by Builder.io, is a next-generation frontend framework designed for instant loading web applications. It focuses on delivering the fastest possible loading experience by prioritizing lazy loading and fine-grained hydration.

Key Features:

• Instant Loading: Minimizes initial load times with fine-grained code splitting.
• Fine-Grained Hydration: Hydrates only the necessary parts of the application.
• Lazy Loading: Loads resources only when needed.
• Developer-Friendly: Provides an intuitive API and excellent developer experience.

Why Watch Qwik in 2024:

Qwik’s emphasis on performance and instant loading is aligned with the needs of modern web applications. As performance becomes increasingly critical, Qwik’s approach offers a promising solution.

9. Lit: The Lightweight Web Component Framework

Overview:

Lit, developed by Google, is a framework for building fast, lightweight web components. It provides a simple and efficient way to create reusable components that can be used across various projects and frameworks.

Key Features:

• Web Components: Builds reusable and encapsulated components.
• Lightweight: Minimal overhead, resulting in fast performance.
• Declarative Templates: Simplifies the creation of complex UIs.
• Cross-Framework Compatibility: Works seamlessly with other frameworks and libraries.

Why Watch Lit in 2024:

Lit’s focus on web components and lightweight performance makes it a versatile tool for modern web development. Its compatibility with other frameworks ensures it can be integrated into a wide range of projects.

10. Stencil: The Web Component Compiler

Overview:

Stencil, developed by Ionic, is a compiler for building web components that work across modern browsers. It combines the best features of frameworks like React and Angular with the simplicity and performance of web components.

Key Features:

• Web Components: Creates standards-based web components.
• TypeScript Support: Ensures strong typing and better developer experience.
• Reactive Data Binding: Simplifies state management.
• Cross-Framework Compatibility: Integrates easily with other libraries and frameworks.

Why Watch Stencil in 2024:

Stencil’s ability to create standard web components that can be used with any framework makes it a powerful tool for developers looking to build reusable and high-performance components.

Conclusion

As we look ahead to 2024, the landscape of frontend development is rich with options. Each framework and library brings unique strengths and features, catering to different needs and preferences. Whether you’re building a complex enterprise application, a high-performance web app, or a simple interactive website, there is a frontend framework that fits your requirements.

Next.js, React, Vue.js, Angular, Svelte, Solid.js, Alpine.js, Qwik, Lit, and Stencil represent the forefront of frontend development. Staying informed about the latest trends and advancements in these frameworks will empower developers to make informed decisions and build cutting-edge web applications that meet the demands of the modern web.

As you embark on your frontend development journey in 2024, consider the strengths and capabilities of these frameworks to ensure you choose the best tools for your projects.

The post Top Frontend Frameworks to Watch in 2024: Next.js, React, Vue, and Others appeared first on Welcome to Ahex Technologies.

Table of Contents

1. Introduction
2. What is Frontend Development?
3. Why Does Frontend Development Matter?
4. How Can Custom Frontend Development Benefit Your Website?
5. What is React JS?
6. How Does React JS Work?
7. Benefits of Using React JS for Frontend Development
8. When to Consider Hiring a Skilled React JS Developer
9. How to Choose the Right React JS Developer for Your Project
10. Conclusion
11. FAQs

Introduction

In today’s digital age, having a website is essential for any business or organization. However, simply having a website is no longer enough. In order to stand out from the crowd and provide a top-notch user experience, you need to invest in custom frontend development and hire a skilled React JS developer.

What is Frontend Development?

Frontend development, also known as client-side development, is the process of creating the user interface of a website or application. This includes everything that the user sees and interacts with, such as buttons, forms, menus, and more. Frontend developers use a variety of languages and tools, such as HTML, CSS, and JavaScript, to create visually appealing and user-friendly interfaces.

Why Does Frontend Development Matter?

The frontend of a website or application is the first thing that users see and interact with. If the frontend is poorly designed or difficult to use, users are likely to become frustrated and leave. On the other hand, a well-designed and user-friendly frontend can enhance the overall user experience and keep users coming back for more.

How Can Custom Frontend Development Benefit Your Website?

Custom frontend development allows you to create a unique and personalized user experience that reflects your brand and meets the specific needs of your users. By working with a skilled frontend developer, you can create a website or application that is tailored to your exact specifications and provides a seamless user experience from start to finish.

What is React JS?

React JS is a popular JavaScript library that is used for building user interfaces. Developed by Facebook, React JS allows developers to create reusable components and build complex user interfaces with ease. React JS is highly flexible and can be used for a wide range of applications, from simple websites to complex web applications.

How Does React JS Work?

React JS works by creating a virtual DOM (Document Object Model) that is a lightweight representation of the  actual DOM. When a user interacts with a React JS component, the virtual DOM is updated instead of the actual DOM, which makes the application more efficient and faster. React JS also allows developers to create reusable components that can be easily shared and used throughout the application.

Benefits of Using React JS for Frontend Development

There are many benefits to using React JS for frontend development, including:

1. Improved performance and speed
2. Reusable components for easier development and maintenance
3. Easy integration with other libraries and frameworks
4. Large and active community for support and resources
5. Support for server-side rendering for improved SEO and performance

How to Choose the Right React JS Developer for Your Project

Choosing the right React JS developer is essential for the success of your project. Here are some factors to consider when selecting a React JS developer:

1. Experience: Look for developers who have experience working with React JS and have completed similar projects in the past.
2. Portfolio: Review the developer’s portfolio to see examples of their work and ensure that their style matches your vision.
3. Communication: Communication is crucial for any successful project. Look for developers who are responsive and communicate clearly and frequently throughout the development process.
4. Technical skills: Ensure that the developer has the necessary technical skills to complete your project, such as proficiency in JavaScript, HTML, and CSS.
5. Team fit: Make sure that the developer is a good fit for your team and can work collaboratively with your existing team members.

Conclusion

In today’s digital age, having a website or application with a strong user experience is crucial for the success of any business or organization. Custom frontend development and hiring a skilled React JS developer can help you achieve this goal by creating a unique and personalized user experience that meets the specific needs of your users. By understanding the benefits of frontend development and React JS, you can make an informed decision about whether to invest in these services and take your website or application to the next level.

 FAQs

The post Elevate Your User Experience with Custom Frontend Development and a Skilled React JS Developer appeared first on Welcome to Ahex Technologies.

Why is React so well-liked? What is React?

Developers may construct rapid, interactive, & reusable user interface (UI) components for online and mobile applications using the open-source JavaScript framework known as React, which was developed and therefore is maintained by Facebook. It is renowned for its simplicity, quickness, and adaptability, in addition to its capacity to build applications containing dynamic data which changes without refreshing the page.

Key Considerations For Hiring React Programmers

The key considerations for hiring React programmers for your project will now be discussed.

• Proficiency with ECMA Script & JavaScript

ReactJS developers need to be familiar with the features and methods of Java Script. ES6 syntax, DOM manipulation, JavaScript scope, procedures, event bubbling, & hoisting knowledge are all required. An in-depth knowledge of Ecma Script is required to build impromptu React apps.

• Expertise with JSX

Consider hiring a React JS developer who mostly uses the ReactJS frameworks as well as the JSX extended coding syntax. It is a crucial part of the ReactJS environment. JSX, which has an appearance similar to HTML, allows developers with just a working knowledge of HTML and CSS to create effective and sophisticated apps. The react library includes JSX as a crucial component. The simplicity with which this web-based project syntax may be learned is its finest feature.

• Knowledge of Various Technologies

You should employ developers who are knowledgeable in a range of ReactJS-compatible technologies, including the MERN stack. They should be acquainted with both the MERN Stack & indeed, the Xpress React Combos, which are necessary to manage numerous requests, handle server traffic, and create full-stack JS applications.

• Thorough Familiarity With React JS Routines

Effective ReactJS developers must have tasks for app speed optimization in the portfolio and also be able to manage projects & prioritize state management. They are also conversant with cutting-edge innovations like React hooks as well as other state frameworks & structures like Context API, Axios, React Router, React Native, Redux, MobX, and many others.

What is the Role of a React developer?

In all phases of interface development, react js development plays a significant role. A few key duties for React developers are outlined in the list that follows.

• Create features for the front end. UI components like icons, pictures, and gesture-driven functionality may be the responsibility of React developers. Swiping, holding down a button for a long time, and drag-and-drop are a few examples of gesture-driven functionalities.

• Code writing. A React developer converts wireframes, sometimes referred to as screen designs, into code. Additionally, they create and deal with HTML tags & CSS selectors.

• Improve the efficiency of the application. React developers are in charge of cross-platform functioning in addition to planning and making new features. They make sure that the program can be used effectively on a variety of gadgets and browsers.

• Testing of software. Testing the apps they work on is a must for React developers who work on all phases of interface development.

How to Learn React Development

Between 2020 – 2030, the US Department of Labour Statistics expects that employment of software developers will expand at a pace of 22%, which is higher than average. A job as a React developer may be the perfect match for you if you’re passionate about front-end programming & web design. The following tutorial will teach you more about choosing this career option.

1. Pick a point of concentration.

A front-end development toolset is the React library. It is used by programmers to manage an application’s view layer, which only addresses the parts of a webpage that users can see. But JavaScript, a full-stack technology, is the foundation of the React library. Both the front end as well as the back end of such an application may be created using full-stack technologies. React only interacts with the front layer of the application, but it may be combined with back-end frameworks to provide server-side programming. As a result, those interested in becoming React developers have the option to concentrate on front-end programming or to learn full-stack development.

2. Develop the necessary abilities.

A superior skill set is essential for React.js applicants, even though the number of positions in the field of software development is expanding faster than average. To choose which fundamental abilities to concentrate on, see the list below.

• Languages for markup, stylesheets, and programming. The JavaScript library React is used. It is essential to understand the computer language as well as the programs that use it. An understanding of HTML and CSS should also be a priority for React developers. Consider taking coursework like Basics of Website Designing & Coding Specialization if you’re new to the subject of web development.

• Coding repository sites. To keep track of and control their source code history, software engineers utilize code repositories. 

• Tools for React developers. You can control the development of the application if you know how to use the React developer tools.

3. Start experimenting

Stretch your fingers and experiment with some programming now. In this level, you should make an effort to understand the essential ideas through practical code understanding.

If you don’t know anything about npm, Node, ES6 (containing ECMAScript modules and then either systemJs, webpack, or Browserify), & Babel, everything will fall behind at this point.

Conclusion

ReactJS has several advantages, some of which include simple scripting, upkeep across the SDLC, improved productivity, and quicker rendering of lasting products. You’ll need to work with a react js application development company that has talented ReactJS developers if you want to benefit from all of these benefits. If you’re looking for such an organization, you’ve found it. 

The post Tips to Hire React Developers appeared first on Welcome to Ahex Technologies.

Introduction

• Overview of ReactJS and its popularity in frontend development
• Importance of hiring a skilled ReactJS developer
• Overview of the skills required for frontend development using ReactJS

Technical Skills

Proficiency in JavaScript

• Importance of JavaScript for ReactJS development.
• Core concepts of JavaScript, including data types, loops, functions, and objects.
• Advanced JavaScript concepts, including closures, prototypes, and asynchronous programming.

Experience with ReactJS

• Familiarity with ReactJS concepts, including components, state, and props.
• Experience with ReactJS libraries, including Redux, React Router, and React Native.
• Ability to write clean, efficient, and reusable code using ReactJS.

Knowledge of Frontend Technologies

• Understanding of frontend web technologies, including HTML5, CSS3, and responsive design.
• Knowledge of frontend development tools, including webpack, Babel, and npm.
• Understanding of frontend testing tools, including Jest and Enzyme.

Experience with Backend Technologies

• Familiarity with backend technologies, including Node.js development and Express.js.
• Ability to integrate frontend and backend technologies using RESTful APIs.

Soft Skills

Communication Skills

• Ability to communicate effectively with team members, stakeholders, and clients.
• Ability to explain technical concepts to non-technical stakeholders.
• Active listening skills and ability to take feedback positively.

Problem Solving Skills

• Ability to identify and solve technical issues.
• Ability to approach problems creatively and logically.
• Willingness to learn new technologies and adapt to changing requirements.

Time Management Skills

• Ability to prioritize tasks and meet project deadlines.
• Ability to work efficiently and effectively under pressure.
• Ability to work independently as well as in a team environment.

Attention to Detail

• Ability to write clean, maintainable, and scalable code.
• Ability to write code that is optimized for performance.
• Ability to debug and troubleshoot issues effectively.

Conclusion

Hiring a skilled ReactJS developer is crucial for frontend development. In addition to technical skills, it is essential to look for soft skills, such as communication, problem-solving, time management, and attention to detail. A skilled ReactJS developer will not only build efficient and scalable web applications but also contribute to the success of the project.

FAQs

The post The Top Skills to Look for When Hiring a ReactJS Developer for Frontend Development appeared first on Welcome to Ahex Technologies.

Determine Your Requirements

Before looking for a ReactJS development company, you should determine your project requirements. You should know what you want to achieve with your project, what features you need, and your budget. This will help you narrow your search for the right company to meet your requirements. Some important questions to ask yourself include:

• What is the purpose of your project?
• What are the functionalities you want in your web application?
• What is your target audience?
• What is your project timeline and budget?

Once you have answered these questions, you can start looking for ReactJS development companies that match your project requirements.

Research Potential Companies

The next step is to research potential ReactJS development companies. This can be done by searching online or asking for referrals from colleagues and friends. When researching potential companies, you should consider the following factors:

• Experience: Look for companies that have experience in developing ReactJS-based web applications. This will ensure that they have the necessary skills to develop your project.
• Portfolio: Review the company’s portfolio to see if they have worked on projects similar to yours. This will give you an idea of their capabilities and the quality of their work.
• Client Testimonials: Look for client testimonials and reviews to see what their previous clients say about their experience working with the company.
• Communication: Ensure the company has good communication skills and understands your project requirements. A good ReactJS development company should be able to communicate effectively throughout the project.

Evaluate Their Technical Expertise

Choosing a ReactJS development company with strong technical expertise is important. Look for companies with a team of experienced developers who are well-versed in the latest ReactJS technologies and tools. This will give you an idea of their technical expertise and ability to deliver high-quality solutions. You can do this by asking them the following questions:

• What is your experience with ReactJS?
• Do you follow best practices when developing ReactJS applications?
• How do you handle testing and debugging?
• What are your development methodologies?
• What tools and frameworks do you use?

A good ReactJS development company should be able to answer these questions confidently and demonstrate its technical expertise.

Discuss Project Management and Communication

Project management and communication are critical factors that can make or break a project. When choosing a ReactJS development company, ensure they have a project management process and can communicate effectively with your team. Some important questions to ask include:

• How do you manage projects?
• How do you handle project timelines and budgets?
• How often do you provide project updates?
• What is your communication process?

It’s important to find a company that has a transparent and efficient project management process and can communicate effectively throughout the project.

Evaluate the Company’s Culture and Work Ethics

The culture and work ethics of a ReactJS development company are crucial factors that can affect the success of your project. When evaluating potential companies, consider the following factors:

• Company Values: Look for companies that align with your values and have a strong collaboration, creativity, and innovation culture.
• Work Ethics: Ensure the company has a strong work ethic and is committed to delivering high-quality work.
• Team: Evaluate the team’s skills and experience working on your project. A good ReactJS development company should have a team of skilled and experienced developers who can deliver quality work.

Check Their Pricing and Payment Terms

Pricing is an important factor to consider when choosing a ReactJS development company. Hire a company that offers transparent pricing and a flexible payment structure. You should also consider their pricing in comparison to the quality of their work and their technical expertise.

Evaluate Their Project Management Process

The project management process is crucial to the success of your project. Consider hiring companies with a well-defined project management process and use project management tools to manage your project. You should also consider their project planning, risk management, and quality assurance approach.

Conclusion

Choosing the right ReactJS development company is crucial to the success of your project. Following the tips above, you can find a company that can meet your requirements, has strong technical expertise, and offers excellent customer support. At Ahex Technologies, we have a team of experienced ReactJS developers who can help you build high-performance and dynamic web applications. Contact us today to learn more about our ReactJS development services.

The post How to Choose the Right ReactJS Development Company: A Comprehensive Guide appeared first on Welcome to Ahex Technologies.

Why do developers use react native for startups?

From Facebook to tesla all these apps are built on the it platform. It has the right tools to develop and the resources to build a perfect app. These companies use a mix-up of other technologies and resources to get through various ecosystems and platforms.

How would you know if your business requires react native app:

React Native utilizes JavaScript to build a seamless and multi-platform user face that bridges the gap between the native codes and is converted to android and Ios use. It’s extremely important to know the things that help in making a cross-platform react native application. You should be aware of the pros and cons of react native and invest in it. And ahex technologies will completely help you out to build your desired and customized cross-platform react native application.

What you should consider while making a cross-platform react native app:

• Cost of development
• Time to market
• Post-launch upgrades
• Availability of skilled developers.

Positives of React Native app:

It uses already written codes that are reusable on cross-platform app development. It is capable to build a bridge between native codes and functionalities of the mobile like GPS, camera, and contacts. It costs low to install and set up in any environment.

Key advantages of React native platform:

It platforms provide the best user experience as the component directly makes the call to the widgets unlike HTML which uses Cordova and Javascript uses WebVIew.

Itis a popular JS library in which codes render faster without making the browser respond. It can use components with components-based architecture via native API. the components-based structure allows the developers to build an app with agility. It is getting updated every day and it is difficult for companies like google to catchup with it.

Ahex technologies are here to help you out: 

Hire Ahex technologies to avoid all the hassle of developing an app yourself. We handle all the software development steps so that you can come up with outside-the-box ideas to implement. Whatever features you want to have in your app Ahex technologies can help you make it happen.

The post What Are The Key Advantages Of Using React Native as a startup In 2022? appeared first on Welcome to Ahex Technologies.

Material UI is one of the world’s most popular UI framework backed by Google.

Material Design (codenamed Quantum Paper) is a design language that Google developed in 2014. Material Design uses more grid-based layouts which are responsive, animations and transitions, padding, and depth effects such as lighting and shadows.

Before installing you must have npm and node installed, if not please go through the below link

https://nodejs.org/en/

https://docs.npmjs.com/getting-started

Now Setup the new react project, if you’r new to reactjs , click here to install the react project

1. create-react-app materialreact
2. cd materialreact/
3. npm start
4. After set up, install material UI
5. npm install @material-ui/core (Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.)
6. Now the material UI is installed , and you can use it in your react components.

// Example Quick Start
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return (
    <Button variant="contained" color="primary">
      Hello World
    </Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

For more reference about Material UI components , please click below link

https://material-ui.com/demos/app-bar/

The post How to Add Material UI in ReactJS appeared first on Welcome to Ahex Technologies.

node -v
npm -v

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

|-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

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

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>
    )    
  }
}

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

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

The post Creating react app with bootstrap 4 and sass appeared first on Welcome to Ahex Technologies.