Step into React

In the previous articles, we learned about Functions in JavaScript , Functional Programming and More on Functional Programming with different problem statements.

We've already played with DOM and event listeners now is the time to know that JavaScript is the main programming platform for designing websites while React is a JavaScript package that simplifies the construction of graphic user interfaces.

React is an open-source JavaScript library developed by Facebook that is used for building user interfaces, specially for web applications with dynamic content. It was first released in 2013 by Jordan Walke a Software Engineer at Facebook.

Now since we were already using JavaScript then why React is needed?

Following are several reasons why developers choose React for building web applications:

Component-Based Architecture: React encourages a modular approach*(Divide work into different modules to reuse it somewhere)* to building user interfaces by breaking them down into reusable components. This makes the codebase more maintainable, scalable, and easier to understand.
Efficiency with Virtual DOM: React's virtual DOM implementation allows for efficient updates to the UI by minimizing the number of DOM manipulations. This results in improved performance and a smoother user experience, especially for complex and dynamic applications.
JSX: JSX is a syntax extension for JavaScript used in React. It's nothing but a code of HTML elements in JavaScript. This helps streamline the development process and makes it easier to visualize the UI structure within the code.
Cross-Platform : React can be used to build not only web applications but also mobile applications using frameworks like React Native.
Backed by Facebook: React is developed and maintained by Facebook, which ensures regular updates, improvements, and ongoing support.

Overall, React provides developers with a powerful and efficient framework for building modern web applications, offering a combination of performance, flexibility, and developer experience that makes it a popular choice in the developer community.

Here comes the another question that How to use React?

To use React, you need to set up a development environment and follow some basic steps to create and run React applications. Here's how to get started with React:

Set Up Development Environment:

a). Make sure Node.js installed on the computer/Laptop. If not then download and install it from Node.

b). Set up all the path and other terms and condition manually.
Create a New React Application:

a). Create a new React application using the Create React App tool, which sets up a new React project with all the necessary configurations and dependencies.

b). Open your terminal or command prompt and run the command to create a new React app: npx create-react-app firstproject .

c). Replace firstproject with the desired name for your project.

Note: npm doesn't allow Uppercase so keep track of that.
Navigate to Project Directory:

a). Once the project is created, navigate to the project directory using the terminal: cd firstproject .
Start the Development Server:

To run React application locally, use the command: npm start .

This command will start the development server and open default web browser to display the React application.
Explore and Modify:

a). Once the development server is running, start exploring the project structure and making changes to the code.

b). The main file to start with is src/App.js, which contains the initial React component.

c). You can create additional components in the src directory and import them into App.js.

Let's try Hello World with React
- Follow all the above steps to create firstproject .
- Delete all the existing files of src folder and create a index.js and Hello.js file.
  
  Output:

There's also an alternate old method to use React. For that follow the below mentioned steps:

Create a index.html file and all boiler plate.
Make a div with class/id.

Use the React and babel(Converts JSX into Web Browser) CDN:

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Hello World</title>
  </head>
  <body>
      <div class="root"></div>

      <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel">
          let root=document.querySelector(".root");
          let Hello=<h1>Hello World</h1>
         ReactDOM.render(Hello, root)
      </script>
  </body>
  </html>

Output: Hello World

This is all about stepping into React in this article. Just explore the different source and folder of react and practice as much as possible. It's highly recommended to use npx method to create project.

In next article we'll read how to add CSS and use Bootstrap using React, till then keep learning.

Feedback is welcome :)

Step into React

Now since we were already using JavaScript then why React is needed?

Here comes the another question that How to use React?

Let's try Hello World with React