DEV Community: Moses619

ReactJS |Simple React Calculator

Moses619 — Thu, 22 Aug 2024 12:59:09 +0000

This article will guide you through the process of creating a functional, user-friendly calculator using ReactJS. We'll cover the essential concepts like state management, event handling, and component structure to make this project accessible to beginners and a great learning experience for those familiar with React.

Project Setup

Create a New React App:
Start by setting up a new React project using Create React App:

npx create-react-app react-calculator
cd react-calculator
content_copy
Use code with caution.
Bash

Start the Development Server:
Run the following command to launch your development server:

npm start
content_copy
Use code with caution.
Bash

Your React app will be accessible at http://localhost:3000/.

Component Structure

We'll structure our calculator using a single component: App.js. This component will handle the entire calculator's logic and rendering.

App.js (Main Component)

import React, { useState } from "react";
import "./App.css";

function App() {
const [displayValue, setDisplayValue] = useState("0");
const [operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Function to handle number button clicks
const handleNumberClick = (number) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} else {
setDisplayValue(displayValue + number.toString());
}
};

// Function to handle operator button clicks
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Function to handle equals button click
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
let result;

switch (operator) {
  case "+":
    result = firstOperand + secondOperand;
    break;
  case "-":
    result = firstOperand - secondOperand;
    break;
  case "*":
    result = firstOperand * secondOperand;
    break;
  case "/":
    if (secondOperand === 0) {
      result = "Error";
    } else {
      result = firstOperand / secondOperand;
    }
    break;
  default:
    result = "Invalid Operation";
}

setDisplayValue(result.toString());
setOperator(null);
setFirstOperand(null);

};

// Function to handle clear button click
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

return (

{/* Display the current value */}
{displayValue}

  {/* Button grid for calculator functions */}
  <div className="buttons">
    <button onClick={() => handleNumberClick("7")}>7</button>
    <button onClick={() => handleNumberClick("8")}>8</button>
    <button onClick={() => handleNumberClick("9")}>9</button>
    <button onClick={() => handleOperatorClick("/")}>/</button>
    <button onClick={() => handleNumberClick("4")}>4</button>
    <button onClick={() => handleNumberClick("5")}>5</button>
    <button onClick={() => handleNumberClick("6")}>6</button>
    <button onClick={() => handleOperatorClick("*")}>*</button>
    <button onClick={() => handleNumberClick("1")}>1</button>
    <button onClick={() => handleNumberClick("2")}>2</button>
    <button onClick={() => handleNumberClick("3")}>3</button>
    <button onClick={() => handleOperatorClick("-")}>-</button>
    <button onClick={() => handleNumberClick("0")}>0</button>
    <button onClick={() => handleNumberClick(".")}>.</button>
    <button onClick={() => handleEqualsClick()}>=</button>
    <button onClick={() => handleOperatorClick("+")}>+</button>
    <button onClick={() => handleClearClick()}>C</button>
  </div>
</div>

);
}

export default App;
content_copy
Use code with caution.
JavaScript

Explanation

State Management:
We use useState hooks to manage the calculator's state. displayValue holds the current value displayed, operator stores the selected operation, and firstOperand saves the first number entered.

Event Handling:
Functions like handleNumberClick, handleOperatorClick, handleEqualsClick, and handleClearClick handle user interactions with the buttons.

Component Composition:
The App component is responsible for both the logic and the rendering of the calculator, demonstrating how components can combine functionality and presentation.

Adding Styling (App.css)

.calculator {
display: flex;
flex-direction: column;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
}

.display {
height: 50px;
background-color: #eee;
font-size: 24px;
text-align: right;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}

button {
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f0f0f0;
font-size: 18px;
cursor: pointer;
}

button:hover {
background-color: #ddd;
}
content_copy
Use code with caution.
Css

Conclusion

By following these steps, you've created a fully functional calculator using React! This project serves as a great foundation for further exploration of React's capabilities. You can now add features like advanced operations, memory functions, or even a visual theme. Experiment and have fun!

Get Started with ReactJS: A Beginner's Guide

Moses619 — Fri, 28 Oct 2022 00:45:34 +0000

What is React?

React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

React allows developers to create large web applications that can change data, without reloading the page. The goal of React is to provide a way to create fast web applications that are scalable.

React is a JavaScript library for building user interfaces.

The Benefits of React

React is known for its speed, scalability, and simplicity. The main benefit of React is its performance.

React is able to handle large amounts of data quickly and efficiently.This makes React a good choice for developing large scale applications.

It's declarative syntax makes code easy to read and maintain, while its virtual DOM ensures fast performance. React is also well-suited for large applications with complex data structures.

Here are some other advantages of React that make it a great choice for web development:

JSX makes templating easier and more concise
It lets you create reusable components so that your code is easy to read and maintain.
React js is advantageous because of its simplicity, flexibility, and scalability.
Additionally, working with the Reactjs framework helps to improve team collaboration and communication.
React can be used for creating single-page applications.
It's declarative: React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

React JSX

React is unique because it uses a declarative paradigm and JavaScript syntax extension called JSX. This makes code more readable and helps make development easier.

JSX is a syntax extension for React that allows you to write markup directly in your JavaScript code.

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Without JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It's NOT intended to be implemented by engines or browsers.

It's NOT a specification. It's intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.

JSX is a syntax extension of JavaScript that lets you write HTML-like syntax within your JavaScript code. With React, you can use either regular JavaScript or JSX.

React Components

React Class Component

React class components are one of the ways that you can create React components. They are created by extending the React.Component class.

In a React class component, you will need to create a render() method. The render() method will return a React element.

When creating a class component, you need to extend the React.Component class.This gives your component the ability to have state and lifecycle methods.

Class components are also easy to test, because they are just JavaScript classes.They allow you to use JavaScript classes to create React components.

Class components are more powerful than functional components and they can have state. They make it easy to create reusable code, and they are great for working with larger applications.

React introduced official support for class components in version 15.5. Class components are a more traditional way of writing React components using a class. They can be used with React’s new context API and static getDerivedStateFromProps lifecycle methods.

Class components should be used when you need to use one of these features or the other capabilities unique to classes, such as local state or access to lifecycle methods.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React Function Component

Function components are a simpler way to write React components. They are equivalent to stateless functional components in React.

Simply put, function components are functions that return React elements. When you need a component that doesn’t have state, you can use a function component.

A function component is a simple functional unit used to create React components. It accepts props and returns a React element.

When you create a React component, you have the option of either creating a function component or a class component.

A function component is a React component that is written as a JavaScript function.

Function components are simpler than class components, and they are often used for presentational components.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

React Props

React Props provide a way for a parent component to pass data to a child component. The child component can then access that data via the this.props object.

React Props are also used to specify the behavior of a component, such as whether it should be rendered or not.

React props are pieces of data that are passed into React components. They're used to customize the behavior of a component, and they can be used in conjunction with state to manage the data within a component.

React props are immutable, meaning they can't be changed once they're set.

This makes them perfect for passing data down the component tree, and it helps to keep your components modular and easy to reason about.

function Person(props) {
  return <h2>I'm { props.name }!</h2>;
}

function Greeting() {
  const name = "Jesse"
  return (
    <>
      <h1>Hello!</h1>
      <Person name=
{
 name 
}
 />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greeting />);

React State

React state is one of the most important concepts in React.
It refers to the data that a React component needs in order to render itself.

Creating the state Object

The state object is initialized in the constructor:

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {brand: "Ford"};
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

React state can be used to store data that a component needs in order to render itself.

When a component's state changes, the component will re-render itself. There are two ways to change a component's state: setState and forceUpdate.

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      brand: "Ford",
      model: "Mustang",
      color: "red",
      year: 1964
    };
  }
  changeColor = () => {
    this.setState({color: "blue"});
  }
  render() {
    return (
      <div>
        <h1>My {this.state.brand}</h1>
        <p>
          It is a {this.state.color}
          {this.state.model}
          from {this.state.year}.
        </p>
        <button
          type="button"
          onClick={this.changeColor}
        >Change color</button>
      </div>
    );
  }
}

React setState is a function used to update the state of a React component. The function takes two arguments, the first being an object containing the new state values and the second being a callback function.
The callback function is executed after the new state values have been applied. The new state values are merged with the previous state values.

React forceUpdate is a function that causes a component to re-render.
This can be useful if you need to make a change to a prop or state that will cause the component to look different.
forceUpdate will not call shouldComponentUpdate, so it is not suitable for all situations. Use it sparingly!

class App extends React.Component {  
constructor() {  
super();        
this.state = {  
message: "Hello World"  
};      
this.updateSetState = this.updateSetState.bind(this);  
}  
updateSetState() {  
this.setState({  
message:"It is a beautiful day."  
});  
}  
render() {  
return (  
<div>  
<h1>{this.state.message}</h1>  
<button onClick = {this.updateSetState}>SET</button>  
</div>  
);  
}  
}

In the example above, the data displayed is updated from "Hello World" to "It is a beautiful day." on button click

When a developer wants to update the view in React, they call the forceUpdate function. This function tells React that the component needs to be re-rendered.

When the forceUpdate function is called, React will re-render the component, even if the component's props or state haven't changed.
The forceUpdate function is used when a change happens outside of the component, such as an event listener firing or a request from an API returning data.

React state is a powerful concept that allows developers to easily manage data within their React applications.

By using state, developers can create complex applications that are responsive to user input and can change over time.

React state is easy to use and can be a great way to improve the performance of your application.

Rendering a React Component

In order to display a React component, you must first "render" the component. This simply means that you need to output the correct HTML code from your React component so that it can be displayed in the browser.

The process of rendering a React component is actually quite simple. First, you create a new React element. This element can be either a DOM element or a custom React component.

<div id="root"></div>

Once you have created your element, you use the ReactDOM. This library will allow you to render your React component into an HTML element on the page.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Once you have rendered your component, you can then interact with it using the ReactDOM API.

Updating a Rendered React Component

In the past, when a React component was rendered, it was static. Once rendered, the component couldn't be changed.

This made it difficult to update components that needed to change based on user interaction or new data.

However, now there is a way to update a rendered React component. By using the setState method, a developer can change the component after it has been rendered.

This makes it possible to create dynamic and interactive user interfaces with React.

When building applications with React, it is important to be able to update a rendered component.

There are two ways to do this: with the component’s state or props. Updating the state of a component will cause the component to re-render, and updating the props of a component will cause the component to update.


class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {greeting :
        'Click the button to receive greetings'}

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}

updateState(){
    // Changing state
    this.setState({greeting :
                'GeeksForGeeks welcomes you !!'})
}

render(){
    return (
    <div>
    <h2>Greetings Portal</h2>
    <p>{this.state.greeting}</p>

        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}

In order to update a rendered React component, you will need to use the setState method. This method will take in an object that contains the new data that you want to update the component with.

Once you have updated the component's state, the component will re-render with the new data. If you need to make a API call in order to fetch new data, you can do so inside of the setState method.

Conclusion

In conclusion, ReactJS is a great tool for building user interfaces. It is fast, efficient, and easy to learn. If you are looking for a way to get started with ReactJS, this guide is a great place to start.

How to become a Technical Writer

Moses619 — Wed, 21 Sep 2022 16:17:20 +0000

So You Want to be a Technical Writer? Here's What You Need to Know

Why technical writing?

In our constantly developing world, it's more important than ever to have clear and concise communication- especially in the realms of science and technology. This is where technical writing comes in! Technical writing is a unique and necessary form of writing that communicates complex information in a way that is easily understandable to its audience.

Why is technical writing so important?

It is an important skill for engineers, technicians, and other professionals who work with complex systems. Technical writers use specialized knowledge to create user manuals, how-to guides, and other documentation that helps users understand and use complex products and technologies.Technical writing is important because it helps users understand complex products and technologies.

What is technical writing?

Technical writing is a type of writing that is used to communicate technical information. Technical writers are responsible for conveying complex information to a variety of audiences in a clear and concise manner.

Technical writing can be found in a variety of formats, including user manuals, white papers, and online documentation. In order to be successful in technical writing, one must be able to understand the needs of the audience and be able to effectively communicate technical information.

It is a process-oriented form of writing, which means that it is concerned with the efficient and effective communication of information. Technical writing is often used in the fields of science, engineering, and medicine.

Who can be a technical writer?

In order to be a technical writer, one does not need to have a specific degree or experience in a certain field. However, it is important for technical writers to have excellent writing skills and the ability to communicate complex information in a clear and concise manner.

They must also be able to work independently and be able to understand the needs of their audience. Technical writers typically need to have strong research skills in order to be able to gather the necessary information for their articles.

What skills are needed to be a successful technical writer?

In order to be a successful technical writer, certain skills are needed. Firstly, it is important to have excellent writing skills. This means being able to write clearly and concisely, without ambiguity.

Secondly, strong research skills are essential in order to be able to gather the necessary information for writing technical documentation.

Thirdly, it is important to have good problem-solving skills in order to be able to troubleshoot any issues that may arise.

Technical writers create user guides, how-to manuals, and other documentation to communicate complex information more easily. As technology advances, the role of the technical writer becomes increasingly important in making products and services user-friendly.

Technical writers must be able to understand the target audience and explain difficult concepts clearly. They also need strong writing and editing skills. With the right skills, a technical writer can help make any project more successful.

Where do technical writers work?

Technical writers are in demand in a variety of industries that require clear and concise instructions for their products. As technology evolves, so does the need for technical writers who can keep up with the latest trends and changes.

Technical writers usually have a background in English, communications, software engineering like myself, or journalism. While some technical writers work for companies full-time, many freelancers work from home. The demand for technical writers is expected to grow by 10% in the next decade.

Technical Writing is a branch of writing that deals with complex subjects in a clear and concise manner. Technical Writers are the people who produce these types of written materials. They work in many different industries, including healthcare, manufacturing, and software development.

In recent years, the demand for Technical Writers has grown substantially. This is due in part to the increasing complexity of the products and services that companies offer. Technical Writers play an important role in helping companies communicate effectively with their customers and employees.

What are the challenges of being a technical writer?

One of the challenges of being a technical writer is having to constantly update your skills. As technology changes, so do the expectations of employers and clients.

Technical writers must be able to understand and explain complex information in a way that is easy for non-technical people to understand. They also have to juggle multiple projects at once and meet deadlines.

Technical writing is a challenging field that requires a mastery of both written and visual communication. Technical writers must be able to distill complex information into clear, concise prose that can be easily understood by non-experts. They must also be proficient in creating visuals such as diagrams and info-graphics that support and enhance their written explanations.

In addition, technical writers must be able to work collaboratively with subject matter experts and other stakeholders to ensure that all information is accurate and up-to-date.

The job market for technical writers in the United States is expected to grow by about 7% between 2016 and 2026, according to the Bureau of Labor Statistics. This is faster than the average growth rate for all occupations.

The demand for technical writers will be driven by the need to create instructions and documentation for new products and technologies. As companies increasingly outsource work to other countries, there will also be a need for technical writers who can communicate complex information clearly and concisely.

Technical writing certifications

Technical writing is a field that is growing in popularity. More and more businesses are in need of technical writers to create manuals, How-To guides, and other documentation.

While a degree in English or journalism is helpful, there are now technical writing certifications available that can give you the skills you need to be a successful technical writer.The most popular certification is the Certified Professional Technical Communicator (CPTC) certification offered by the Society for Technical Communication (STC).

Conclusion

In conclusion, if you are interested in becoming a technical writer, all you need to do is gain some experience in the field, whether through internships or work experience and then build up a portfolio of your writing.

Once you have done that, you can start applying for jobs. And, if you want to freelance, you can start by pitching articles to magazines or websites.

If you want to become a technical writer, all you need to do is hone your writing skills, learn how to use different documentation tools, and understand your audience. With the right skill set and mindset, you can be a successful technical writer.