DEV Community

Klecianny Melo
Klecianny Melo

Posted on

2 1 1 1 1

Uncovering the React Universe: The Starter Guide

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Retry later
Retry later