React: How should I start?

I was skeptical about React when I first started learning to code. As I learned about organizing CSS and HTML from within JavaScript, the idea of React's approach - to put them together - seemed counterintuitive. So, I tried using alternative libraries for a while to avoid React.

But when I finally gave React a chance, I realized how powerful it can be. As I've worked with it over the past few years, I've learned much about how to get the most out of this famous library.

In this article, I'd like to share some of the insights I've gained from my experience working with React.

But what is this thing called React?

Even if you're new to web development, you've likely heard of React. Maybe you've seen a tutorial or read an article about one of the most popular JavaScript libraries, but you might still wonder: "What exactly is React?"

Simply put, React is an open-source library created by Facebook. It's designed to function as the View layer in an MVC (Model-View-Controller) application. What sets React apart is its ability to create reusable, custom HTML elements, which makes developing user interfaces much more efficient. This is why React has become such a popular choice for web developers.

Should I start learning React?

Quickly answer is yes. React is a powerful library with many opportunities; more companies use React daily in their applications.

But if you start with coding, you need some structure before jumping into React, or your experience will be disappointing and frustrating. I recommend you first build a good understanding of HTML and CSS, learning javascript will also be essential, and last, you should comprehend the basics of DOM.

How do I start with React?

If you're starting with React, the easiest way to begin using it is by including static links in your HTML file. While this approach differs from how you would use React in a real-world application, it's a great way to explore the library and start learning.

To use React with static links, you only need to copy and paste the scripts into your HTML file. That's it! From there, you can start coding and experimenting with React's capabilities.

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

but let's do it the right way

Creating a React Application

To begin, we must ensure that our machine has node ≥ 14 and npm ≥ 5.6 pre-installed, which are required to use create-react-app.

npx create-react-app app-name
cd app-name
npm start

Once these dependencies are installed, we can run the first command to create a folder with the name of our application. This folder will contain a basic structure and the necessary packages to start building our application. Afterward, we can use 'npm start' to launch our application and open a page, as shown in the image below.

For this tutorial, we will focus on our project's "src" folder, where we will find some files.

The following files are included:

• "App.css": styles related to the "App" component
• "App.js": contains a React component named "App"
• "index.css": default styles for the application
• "index.js": renders our component
• "logo.svg": React logo used in "App.js"
• "reportWebVitals.js": contains a function that allows measuring the application's performance
• "setupTests.js": configures the application's tests

For now, we will only modify the "App.js" file by replacing all the content inside the "return" with a simple "h1".

function App() {
  return (
    <h1>Hello Word!</h1>
  );
}

export default App;

So when we go back to our page in the browser, we will have:

In summary, any tags placed in the return statement of the App component will be displayed on the screen. However, it is important to note that the tags used in React are not HTML, but rather React components. While they may look similar, some attributes can be different, such as the commonly used CSS class attribute which is replaced with className in React.

With this understanding, you can explore React components and make the desired changes in your project.

Read this in Portuguese