Why is Everyone Writing in React? 🖥️

Hello dear developer friends, if the coffees are ready, we are ready too. 🚀 Today’s topic is React. I wish you good readings 👩🏻‍💻

✨ Topics in this article:

1. What is React?
2. Why React?
3. What is Vanilla JS?
4. Developer Environment: VSCode
5. First React Application
6. What is Vite?
7. First React Application with Vite

✨ What is React?

React is a powerful JavaScript library used for web and native user interfaces. User interfaces are created by assembling components written in JavaScript.

It was initially developed by Facebook in 2011 to improve the performance of websites.

Top JavaScript Frameworks for 2023

It became the most used JavaScript library in 2023. Now, let’s take a closer look at why React is used more than other libraries.

✨ Why React?

Ease of Learning:

One of the key advantages of React is its ease of learning. It is more widely used than other frameworks because developers starting out in programming can learn it faster.

React naturally includes features like dependency injection, reducing the learning time for new developers.

Facebook:

React was developed by Jordan Walke, a software engineer at Facebook, and an early prototype called “FaxJS” was released. It was influenced by XHP, an HTML component library for PHP. It was first used in Facebook’s News Feed in 2011 and later in Instagram in 2012.

Facebook’s adoption of this library and its encouragement of the open-source community are significant factors in the popularity of React.

Community and Ecosystem:

React has strong community support, thanks to its open-source structure. If you encounter a problem or an error, the community will provide help.

Virtual DOM:

It’s a module that connects the virtual DOM created by React to the real DOM. This module allows React applications to run in a web browser or another DOM environment.

React works on the virtual DOM and tracks changes. React DOM applies these changes to the real DOM and updates the user interface. In summary, React DOM allows React applications to interact with the HTML DOM in a web browser, making page updates faster and more efficient.

DOM (Document Object Model) is a programming interface that represents the content on web pages and is used to change, update, or manipulate this content.

Programming languages like JavaScript can dynamically alter and interact with the content on web pages using the DOM. For example, operations such as selecting an element on the DOM, changing its content, or adding new elements can be performed.

SEO-Friendly:

The React library is SEO-friendly and focuses on rendering speed. JavaScript-based websites can face issues due to the time it takes to recreate the DOM. With Virtual DOM and server-side rendering, search engines don’t need to render content directly using JavaScript.

Render: When developing a web application or website, the page content is typically “rendered” in the browser using HTML, CSS, and JavaScript to be displayed to the user. This process determines how the page will visually appear.

Component-Based Structure:

React has a component-based structure. This allows breaking the application into small, independent, and reusable parts. Each component can manage its internal state and work independently, making the application more manageable in a modular structure.

Communication Between Components:

React facilitates communication between components. Data flow is usually top-down (from parent to child), but reversing the data flow is also possible when needed.

Testability:

Testing React applications is straightforward. It provides developers with tools to test and debug their code with local tools. Jest and Cypress are well-known tools for testing React applications.

JSX:

JSX provides a syntax that combines JavaScript and HTML. This makes your code more readable and understandable, making it easier to create components.

Developer Tools:

React provides several development tools and dependencies to assist developers. React Developer Tools and Redux Developer Tools are among these tools, available as browser extensions for both Google Chrome and Mozilla Firefox. These tools detect and fix errors in the code.

Clean Abstraction:

React doesn’t bother you with complex internal functions. Internal processes, such as Digest loops, are not mandatory for users to learn and understand.

“Digest loops” is a concept within the AngularJS (Angular 1) framework. In AngularJS applications, a “digest loop” is used to detect changes in the model and reflect these changes in the user interface. That’s the name of this process.

Cross-Platform Functionality:

One of the most striking features of React is the React Native platform created for developing mobile applications. React Native works cross-platform, allowing the development of applications for both iOS and Android.

High Compatibility:

React is designed to work seamlessly with other JS libraries and does not limit the use of additional tools for building websites. Combining React with third-party libraries makes website development easier.

✨ What is Vanilla JS?

Vanilla JS is a term used to describe the pure and basic form of JavaScript. This term signifies developing web applications using only the JavaScript language without using JavaScript libraries or frameworks. Vanilla JS is preferred by developers because it is easy to learn, but it can be restrictive in complex projects, leading to code repetitions and other disadvantages.

✨ Developer Environment: VSCode

Visual Studio Code (VSCode) is a highly popular text editor and integrated development environment among developers, offering many advantages. Here are some reasons for using VSCode:

1. Free and Open Source: VSCode is free software with open-source code, allowing everyone to download and use the software.
2. Lightweight and Fast: Despite its user-friendly interface, VSCode is a lightweight application that starts quickly and uses low system resources.
3. Extensibility: VSCode supports many programming languages and frameworks. It also has a wide range of extensions, allowing users to customize their workflow and experience.
4. Rich Feature Set: VSCode offers developers quick code completion, debugging, a built-in terminal, Git integration, and many other features.
5. Platform-Independent: VSCode can run on Windows, macOS, and Linux, providing a consistent experience for developers across different operating systems.
6. Community Support: VSCode has a large and active community. Various platforms (GitHub, Stack Overflow, etc.) provide places to ask questions, seek help, and share experiences.
7. Continuous Updates: Microsoft consistently updates and adds new features to VSCode. This allows developers to use the latest technologies and features at all times.

The advantages of VSCode make it widely preferred among developers. However, individual preferences may vary, so it’s worthwhile to consider other development environments when you have different needs and preferences.

✨ First React Application

To create your first React application, you can follow two paths.

You can use VSCode and work in the developer environment, or if you want to create your first project without installation, you can simply type “react.new” in your search engine and click. Codesandbox will create a new React project for you.

If you choose to use VSCode and want to work, you need to install VSCode and Node.js first. Let’s look at the installations quickly.

Visit the VSCode website for installation, select the appropriate option for you, and start the installation.

After visiting the Node.js website as we did for VSCode, select the appropriate option and start the installation.

Once the installations are complete, we are ready to create our first project.

npx create-react-app project-name

Run the command in the terminal.

After confirming the processes, your project will be created.

Our project is created. Now it’s time to run our first project.

cd first-project
npm start

After navigating to the project directory in the command line, you can run your first application by typing ‘npm start’.

The first application is running, and it looks like this.

✨What is Vite?

Vite is a newly embraced build tool in the JavaScript community. Designed with a focus on speed, it fundamentally offers a different approach to development. Leveraging modern browser features like ES modules, Vite provides an extremely fast development experience.

Why Vite?

1. Fast Development: Vite is known for its extremely fast development server that eliminates the need for bundling during the development process, leveraging native ES module imports.
2. Flexible Configuration: Vite has a flexible configuration system that allows you to customize every aspect of your project setup, suitable for a wide range of projects.
3. Efficient Compilations: Vite generates optimized production builds with features like tree-shaking and code-splitting, resulting in smaller package sizes and enhanced performance.
4. Framework Support: While originally built for Vue.js, Vite excellently supports other frameworks like React and Svelte, making it a versatile choice.
5. Plugin Ecosystem: Vite’s plugin system allows easy integration with various tools, providing flexibility and extensibility.

✨First React Application with Vite

npm create vite@latest

We start creating our project with this command.

After confirming the process, we name the project.

Once we select the framework and variant for the project, our project is created.

cd vite-project
npm install
npm run dev

After running these commands, our project starts running.

Let’s take a look at the output of our first Vite-React project.

If you enjoyed the article, don’t forget to check out my other content. Happy reading! 📚

You can buy me a coffee to support me 🌟

If you want to get in touch with me: Esra Nur Mülkpınar