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! 😉
Top comments (0)