Uncovering the React Universe: The Starter Guide

Klecianny Melo - Nov 25 '23 - - Dev Community

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
Enter fullscreen mode Exit fullscreen mode
sudo apt upgrade
Enter fullscreen mode Exit fullscreen mode
sudo apt install nodejs
Enter fullscreen mode Exit fullscreen mode

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

npx create-react-app first-page
Enter fullscreen mode Exit fullscreen mode

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.

React file structure

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

cd first-page
Enter fullscreen mode Exit fullscreen mode
npm start
Enter fullscreen mode Exit fullscreen mode

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

First page in react

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! 😉

. . . . . . . . . . . . . . . . . . . . . . . .