Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Essential things to know as React Developer

  • Last Updated : 10 Oct, 2021

ReactJS is an open-source JavaScript library used for building the Awesome User Interface for the website’s front end. React JS is also famous for Declarative,component-based, and Learn Once, Write Anywhere in code. In this article we know the essential thing as a recent developer are given below:

1. NPM: Npm is the default package manager by javaScript NPM can install all the dependencies of a project through the package.json file. It can also update and uninstall packages. It has a command-line client. In the file, each dependency can specify a range of valid versions using the semantic versioning scheme, allowing developers to auto-update their packages

2. Redux: Redux is an open-source library of JavaScript.The main feature of Redux is, it is used in both frameworks like Angular js and React js for building the awesome user interface Redux simply manages the state of your application, or in other words, it is used to manage the data of the application. Redux is also called the state container.

3. JSX: JSX stands for JavaScript XML, JSX is a simple extension for writing HTML code in React so JSX is called the Templating language The React Dom is rendered the element. JSX is used Curley braces { } for writing HTML elements . The rule followed by the JSX is the same as the XML rule.JSX allows us to put HTML elements in DOM without using appendChild() or createElement() method.

4.Context API: The Context API in React Js are used to pass the props from the child component by storing the props in a store(similar in Redux) and using these props from the store by child component(s) without actually passing them manually at each level of the component tree. Simply we can say that the context API is the type of React STructure that is used to exchange all the unique details.



5.Virtual DOM: Virtual Dom is a lightweight copy of the actual Dom. Virtual Dom is used in declarative web frameworks such as React js, Vue Js, etc, The main advantage of using the virtual dom is it is quite fast as compared to the actual dom. If every object is in the original DOM then there is an object in React Virtual Dom. It is somewhat similar.

6 . Props: Props stand for properties. Props are a special type of keyboard It is used to pass data from one component to another, prop is unchangeable they cant change the lifetime of a component. Basically, the prop is a global variable or a type of object which is used to pass the information of the component. In React sometimes we need to change the content inside the component for that case we especially use props.

7.State: State is changeable. you can update the state as per requirement Which means that the state can be updated in the future while props can’t. we can initialize the state in the constructor, and then call setState when we want to change it. The state is a variable that presents inside the component That can’t be accessed outside or modified outside the component.

8. Components in React JS:

  1. Functional Components: Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function.
  2. Class Components: The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class components. We can use JavaScript ES6 classes to create class-based components in React.

9. Debugger Tools: The debugger tool is used to remove the bug from React js code. The main top tool used in debugging are:

  1. Chrome Developer Tools.
  2. React Developer Tools
  3. Charles Web Proxy
  4. Breakpoints
  5. Nuclide

Below is the Steps to Step procedure in which we know how to create a basic application using React js :

Step 1: Create React Project

npx create-react-app MY-APP

Step 2: Change your directory and enter your main folder charting as



cd MY-APP

Step 3: Run the project by the below command :

npm start

Project Structure: The project Structure is as follows :

Now let’s see the working of react application using the example.

Example: In this example, we will see how we create a simple counter application in react in which we can set the value of counter using state and event handling.

App.js




import React, { useState } from "react";
  
// Importing app.css is css file to add styling
import "./App.css";
  
const App = () => {
  // Counter is a state initialized to 0
  const [counter, setCounter] = useState(0);
  
  // Function is called everytime increment button is clicked
  const handleClick1 = () => {
    // Counter state is incremented
    setCounter(counter + 1);
  };
  
  // Function is called everytime decrement button is clicked
  const handleClick2 = () => {
    // Counter state is decremented
    setCounter(counter - 1);
  };
  
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        fontSize: "300%",
        position: "absolute",
        width: "100%",
        height: "100%",
        top: "-15%",
      }}
    >
      Counter App
      <div
        style={{
          fontSize: "120%",
          position: "relative",
          top: "10vh",
        }}
      >
        {counter}
      </div>
      <div className="buttons">
        <button
          style={{
            fontSize: "60%",
            position: "relative",
            top: "20vh",
            marginRight: "5px",
            backgroundColor: "green",
            borderRadius: "8%",
            color: "white",
          }}
          onClick={handleClick1}
        >
          Increment
        </button>
        <button
          style={{
            fontSize: "60%",
            position: "relative",
            top: "20vh",
            marginLeft: "5px",
            backgroundColor: "red",
            borderRadius: "8%",
            color: "white",
          }}
          onClick={handleClick2}
        >
          Decrement
        </button>
      </div>
    </div>
  );
};
  
export default App;

Step to run the application: Run the application using the following command from the root directory of the project:

npm start

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!