Prepare your favorite cup of coffee as we're about to enter the fantastic world of React. This JavaScript framework is a key piece in creating frontend applications. To get started, you need to install NodeJS on your computer. Open the terminal and enter the following commands:

sudo apt update

sudo apt upgrade

sudo apt install nodejs

Now, let's create a React application. In the terminal, run the command:

npx create-react-app first-page

When exploring a new technology, Hello, world is always the first step. Let's do this in React, going to the src folder and opening the App.js file.

The initial structure of this file is as follows:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Now, let's edit the structure of this page. Copy the following code and paste it into your file:

function App() {
  return (
    <div>
      <h1>Hello, world</h1>
    </div>
  );
};

export default App;

To see this message on the screen, navigate to the project folder and run the command:

cd first-page

npm start

This will open the url http://localhost:3000/ in your browser, displaying the phrase Hello, world:

This is the first step to entering the world of frontend development with React. What did you think of this technology? Share in the comments what topics you would like me to cover in future articles. Share the code, spread knowledge and build the future! 😉

Uncovering the React Universe: The Starter Guide