Introduction to React.js

What is React JS?

React.js is a JavaScript library used for building user interfaces. It was developed by Facebook and has gained significant popularity due to its simplicity and efficiency.

React follows a component-based architecture, where you can create reusable UI components that manage their own state.

It uses a virtual DOM (Document Object Model) to efficiently update and render components, resulting in high-performance web applications.

What are the advantages of using it?

• Component-Based Architecture: React allows you to break your user interface into small, reusable components. This promotes code reusability, maintainability, and scalability.

• Virtual DOM: React uses a virtual DOM, which is a lightweight copy of the actual DOM. When the state of a component changes, React efficiently updates and renders only the affected components, resulting in better performance.

• Unidirectional Data Flow: React follows a unidirectional data flow, which means data flows in a single direction from parent components to child components. This makes it easier to understand and debug the application's state changes.

• Large Ecosystem and Community: React has a vast ecosystem of libraries, tools, and community support. This makes it easier to find solutions, share knowledge, and leverage existing resources.

Okay, so now that we are aware of how it operates and its benefits, let's explore it more and discover what interests us.

How to Setup React Js?

To get started with React.js, you'll need to have a basic understanding of web development technologies and concepts. Here are some prerequisites you should consider:

• HTML, CSS, and JavaScript.

• ES6+: Concepts like arrow functions, classes, modules, destructuring, and spread syntax are commonly used in React code.

• Web Development Tools like Vs Code or any other IDE.

Once you have a good foundation in these prerequisites, you can follow the below steps to set up your First React app.

1. Install Node.js: -

   React.js requires Node.js, which includes the Node Package Manager (npm). You can download and install Node.js from the official website (nodejs.org).

2. 

   Install React developer tools extension (Not mandatory):-

   It simplifies the debugging process, improves productivity, and provides valuable insights into the inner workings of React components, helping developers build efficient and robust applications.

   Check it here: LINK

   

3. Create a New React App:-

   Open up your IDE like Vs Code or anything suitable editor which you have been using to develop your websites.

   Open up the terminal and run the following command to create a new React app using Create React App (a popular React boilerplate):

    npx create-react-app my-app
   

   This will create a new directory called my-app with a basic React project structure.

   🔵Start the Development Server: Navigate to the project directory (my-app) by typing cd my-app in your terminal and running the following command to start the development server:

    npm start
   

   This will start the development server and open the React app in your default browser. Your web page will look like this👇

   

   Regarding the folder structure, Create React App sets up a recommended project structure by default. Here's an example:-

    my-app/
      ├── src/
      │   ├── components/
      │   │   ├── MyComponent.js
      │   ├── App.js
      │   ├── index.js
      ├── public/
      │   ├── index.html
      ├── package.json
      ├── package-lock.json
   

   But in your case, it will look something like this👇

   

😃Exciting News🎊 : You have successfully created your own React App🎉

Let's Deep dive🏊 into some more concepts of React but first of all let's check what exactly these files do like .gitignore, package-lock.json, package.json & README.md:-

• .gitignore:- This file specifies patterns of files and directories that Git should ignore when tracking changes in your project.

• package-lock.json:- This file is generated by the npm package manager when installing packages for a Node.js project. It serves as a deterministic record of the exact versions of all the packages installed in your project's dependencies.

• package.json:- It is a metadata file that defines various properties of your project, such as its name, version, description, entry point, dependencies, and scripts.The package.json file is crucial for setting up, building, and running your project.

• README.md:- This file is a markdown file that serves as the main documentation for your project. It typically contains information about the project's purpose, installation instructions, usage examples, configuration details, and other relevant details.

😃Will provide more information in React Js through my blogs so please Subscribe and follow me on Linkedin.

Happy Hacking🧑‍💻

🙏

नैनं छिद्रन्ति शस्त्राणि नैनं दहति पावक: ।
न चैनं क्लेदयन्त्यापो न शोषयति मारुत ॥

(द्वितीय अध्याय, श्लोक 23)

Meaning :-

हिंदी अनुवाद: आत्मा को न शस्त्र काट सकते हैं, न आग उसे जला सकती है। न पानी उसे भिगो सकता है, न हवा उसे सुखा सकती है।**English Translation: Weapons cannot shred the soul, nor can fire burn it. Water cannot wet it, nor can the wind dry it.**