Learning React JS

I'm looking for some blog to log my study process of React JS.
Just pick dev.to and try to explore it.
I can do it with GIT, but Markdown it take to much time for me edit changing style.
I hope Dev.to will be different. But it's not. While I started to write fist word of this post, Markdown guide was show on the right side of editor.
I wonder may I continue to do with it or stop here.
But this text editor help some buttons for quickly use MD.
I will try to write first blog here

What is React JS

I have base knowledge on ASP.NET, JSP and PHP
I heard about React, Vue, Angula, ... and I wonder why nowadays we have many languages for developer to learn.
What languages I need to choose to explorer now?
I choose React because it's the most popular on market now.

Answer form Bing chat

Hello, this is Bing. I can help you with your question. React is a popular front-end development library that allows developers to create user interfaces with reusable components1. According to a survey of developers worldwide in 2022, React was the second most used web framework after Node.js. Some of the reasons why React is so popular are:

• It’s easy to use and learn
• It has a large and active community of developers
• It offers high performance and fast rendering
• It supports server-side rendering and progressive web apps
• It’s compatible with other libraries and frameworks such as Redux, Next.js, Gatsby, etc.
• It’s easy to scale and maintain I hope this helps you understand why React is popular than others.

Oh, React is only the second most used web framework after Nodejs.

What difference between ReactJs and NodeJs

The main difference between Node.js and React.js is that Node.js is a back-end framework, and React.js is a front-end library. This means that Node.js is used for working with the server-side logic and data of your web application, while React.js is used for creating the user interface and interactivity of your web application.

Some other differences between Node.js and React.js are:

• Node.js uses JavaScript as its programming language, while React.js uses JSX, which is a syntax extension that allows you to write HTML-like code inside JavaScript
• Node.js has a large number of built-in modules and third-party packages that you can use for various purposes, such as networking, file system, database, etc., while React.js has fewer core features but relies on external libraries for state management, routing, testing, etc.
• Node.js is best suited for building fast and scalable web applications that handle a lot of concurrent requests and data-intensive operations, such as streaming, real-time chat, etc., while React.js is best suited for building dynamic and interactive web applications that have evolving states and components
• You can also use both frameworks for a single project. You can develop the back-end with Node.js framework and use React.js for developing the front-end. The best example of such integration of frameworks is Netflix

React JS for front-end, and NodeJS for back-end.

Now i understand what ReactJS will do. Next i will explorer what ReactJS can do.

First code

You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

node --version
v16.15.0

npm --version
9.5.1

npx create-react-app first-web-app

Once above command complete.
cd first-web-app
npm start

You can now view first-web-app in the browser.   

  Local:            http://localhost:3000        
  On Your Network:  http://192.168.1.105:3000    

Note that the development build is not optimized.
To create a production build, use npm run build. 

webpack compiled successfully

Wait a minute! Why we need nodejs here?

As above explain, react is front-end and node is back-end.
Why i need node and npm to create new react app?

**_NOTE:_**
`npx` on the first line is not a typo 
— it’s a package runner tool that comes with npm 5.2+.

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

You need to install Node for developing React because Node provides you with two main benefits:

• Node ships with a reliable package manager called NPM (Node Package Manager), which allows you to easily install and manage any package from the NPM registry. You can use NPM to install React and other libraries or tools that you need for your React project.
• Node also enables you to bundle your React application into a single file for fast compilation using webpack and other Node modules. This way, you can optimize your code and reduce the size of your application. You can also use Node to run a web server that can host your React application, but this is optional. You can host your React application on any other platform or framework that supports JavaScript, such as Ruby on Rails, PHP, etc.

You can use React without Node by following these steps:

• Create an HTML file, let’s call it index.html
• Copy the boilerplate of HTML5 to index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
    <script src="index.js"></script>
  </body>
</html>

• Add these three script tags under the title tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

These scripts will load React, React DOM and Babel libraries from a CDN (Content Delivery Network).

Now you can start to write your React code inside a script tag with a type attribute of text/babel. For example:

<script type="text/babel">
  function Hello() {
    return <h1>Hello, world!</h1>;
  }

  ReactDOM.render(<Hello />, document.getElementById("root"));
</script>

This code will define a React component called Hello and render it to an element with an id of root.

Make sure you have an element with an id of root in your HTML body, such as:
<div id="root"></div>
Save your index.html file and open it in your browser. You should see the Hello component rendered on the screen.
This is a simple way to try React without Node, but it is not recommended for production use because it is slow and inefficient. You should use Node and other tools like webpack or create-react-app for building and deploying your React applications

There are many tools that can be used with React for different purposes, such as IDEs (Integrated Development Environments), testing frameworks, UI libraries, etc. However, Node is not just a tool, but a platform that allows you to run JavaScript code outside the browser and provides many features and modules that can help you with React development1.

Some of the tools that can be used with React are:

• Rekit Studio: An IDE and a toolkit that can be used for developing scalable web apps using React, react-router, and redux. Rekit Studio runs on a Node server and is an npm package.
• Atom: A hackable text editor that can be customized using tons of Node-based plugins to extend its functionality. Atom is a desktop-based application and runs on top of Electron, which is used for building apps using web technologies like React.
• Nuclide: A free and open-source tool that is highly customizable and helps React Native developers to make improvements in the code. Its top features include – context view, working sets, remote development, a task runner, quick open, health statistics, a debugger, code diagnostics, etc.
• Create React App: A tool that creates a modern React setup with no configuration. It provides everything you need to start building a React app such as webpack, Babel, ESLint, Jest etc.
• Next.js: A framework for building server-side rendered or static web applications using React. It offers features such as routing, pre-rendering, code-splitting etc.
• Gatsby: A framework for building fast and optimized websites using React. It leverages GraphQL to fetch data from various sources and generates static HTML files at build time.
• Jest: A testing framework for JavaScript and React applications. It supports snapshot testing, mocking functions, code coverage etc.
• Enzyme: A testing utility for React that makes it easier to manipulate, traverse, and assert on your components’ output.
• React Testing Library: A testing library for React that encourages you to write tests that resemble how your app is used by real users.
• Reactide: A dedicated IDE for React development. This cross-platform tool allows rendering React components without build or server configuration, also running an integrated Node server and custom browser simulator. Moreover, developers can use it to create state flow visualizations as well.

These are some of the tools that can be used with React, but there are many more available depending on your needs and preferences.

Next.js is a React framework that allows you to build full-stack web applications by extending the latest React features, and integrating powerful Rust-based JavaScript tooling for the fastest builds1. Next.js is used by some of the world’s largest companies, such as Netflix, Hulu, Twitch, GitHub and more.

Some of the benefits of using Next.js are:

• It supports server-side rendering (SSR), static site generation (SSG), incremental static regeneration (ISR) and hybrid rendering modes for optimal performance and SEO.
• It provides built-in routing, code-splitting, image optimization, internationalization and analytics features13.
• It has a rich ecosystem of plugins, starters and examples that make it easy to add functionality and customize your application.
• It has a great developer experience with hot reloading, fast refresh, error overlay and TypeScript support. To get started with Next.js, you can follow the official documentation or check out some of the tutorials and courses available online. You can also join the Next.js community on GitHub Discussions or Discord to ask questions, voice ideas, and share your projects.