React

Whats?

React is a JavaScript library for building user interfaces. It is declarative, efficient, and flexible. It lets you compose complex UIs from small and isolated pieces of code called components. React is not a framework, but a library that can be used with other libraries to render to different environments, such as the web or mobile devices. React lets you create reusable UI components that can display data and respond to user interactions. React uses a syntax called JSX, which is a JavaScript extension that allows you to write HTML-like markup inside your JavaScript code. React also uses a feature called hooks, which are functions that let you manage state and effects in your functional components. React is one of the most popular and widely used front-end libraries in the web development world.

Whys?

There are many reasons why React is a popular choice for building web applications.

• React is a JavaScript library that allows developers to create reusable UI components for their web or mobile applications. This makes development faster, easier, and more maintainable.
• React uses a virtual DOM that improves the performance and efficiency of rendering dynamic UI elements. The virtual DOM only updates the parts of the UI that have changed, instead of reloading the entire page.
• React is simple and easy to learn, especially for developers who are familiar with JavaScript and HTML. React also uses a syntax called JSX, which is a JavaScript extension that allows developers to write HTML-like markup inside their JavaScript code.
• React is SEO friendly, meaning that it can help improve the visibility and ranking of web applications in search engines. React can render UI components on the server-side, which makes them more accessible and crawlable by search engines.
• React has a large and active community of developers who contribute to its development and maintenance. React also has many dedicated tools and resources that help developers debug, test, and optimize their applications.
• Declarative: React uses a declarative programming style, which makes it easy to read and understand code.
• Efficient: React uses a virtual DOM to efficiently update the UI, which makes React applications very fast and responsive.
• Flexible: React is a very flexible library, and it can be used to build a wide variety of web applications.
• Reusable components: React components are reusable pieces of code, which makes it easy to build complex UIs from small and isolated pieces of code.
• Large community: React has a large and active community, which means that there is a lot of support available for React developers.

Hows?

To use React, you need to have some familiarity with the core HTML, CSS, and JavaScript languages, as well as some knowledge of the terminal/command line. React uses an HTML-in-JavaScript syntax called JSX, which allows you to write HTML-like markup inside your JavaScript code. React also uses a feature called hooks, which are functions that let you manage state and effects in your functional components.

One of the easiest ways to start using React is to use the create-react-app tool, which is an officially supported way to create React applications. This tool will set up everything you need to run a React application, such as installing some packages and creating some files for you. You will need to have Node.js installed on your computer to use create-react-app.

To use React, you need to create a React component. A React component is a JavaScript function that returns an HTML element.

How to use React with Vite?

Vite is a modern build tool that can be used to create React applications. It is known for its fast development speeds and small bundle sizes. To use React with Vite, you first need to install Vite and its React plugin:

npm create vite@latest

When you enter the command above in your Terminal, it will reveal the project name. Feel free to input any information, or if you prefer to leave it blank, keep the "." (dot) within the original project directory, and the packages will be automatically installed.

cd first-react
npm run dev

After naming it "first-react," a corresponding folder named "first-react" will be created. Navigate into this project folder using the "cd" command. Subsequently, running the "npm run dev" command will display a localhost address in your Terminal. You can access your React app by simply Ctrl+clicking on it.