Building a Fullstack knowledge from zero experience in React?

Okay, this is a new kind of article for my Medium blog post. I have decided to start studying ReactJS to build a new portfolio and consider myself a fullstack developer using Go and ReactJS. You may have heard about this concept of building both the backend and frontend. I have known about it for many years, but I never considered myself a fullstack developer. However, that is about to change now, and I have decided to publish my journey here on Medium and also on my personal blog at https://www.antoniothomacelli.com.br.

— -

Alright, I’m not starting from scratch. I have knowledge of logic programming, architecture, software design, some patterns, and methodologies like Scrum and DevOps. This helps me understand the timing, the moments, and where each piece of code connects. If you are starting from scratch, you might find this step confusing. In that case, I advise you to start with the basics, using Python and some web frameworks. You may find more community support because Python teams are larger than others.

Blueprint and Gols

I love learning something new, like writing this blog post and sharing my experiences with you. However, I understand that having goals can make this process easier. So, here we are. Creating a blueprint will be my first goal in this study. I want to create something basic that I can reuse many times, like a strong foundation for my projects. This will help me improve my projects from the very beginning, and I believe it will make maintenance easier in the future.

Start with a specific target in mind, whether it is creating something or learning a particular skill. This will help you stay focused when you find yourself reading about something different from what you intended. Personally, this happens to me every 10 minutes or less. When I realize I’m lost, I stop and start again. It’s normal, and you’re not alone.

First Goal — Understand Root Component

In any project, you need a space to install, test, and create blocks of code. This is not my primary goal, but I need to establish some basics that are concrete. I know that JavaScript has functions like other languages, and it is no different when using the React library. So, we need to create a component and pass some values to it to understand how it works. Here’s an example in JavaScript:

function myFunction(value) {
  console.log(value)
}

In React, we have a starting point called App.js. This file contains the first component, or the root component. In my opinion, it is similar to main.c or the main function that needs to call all other files and processes. Does that make sense?

This root component looks something like this:

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;

Inside the return statement, we can put all the HTML objects that we want JavaScript to manipulate. We can insert new elements inside the HTML.

Now we have a better understanding of how React works. React manipulates elements inside an HTML, typically referred to as the <div id="root">. Inside this div, React inserts all the elements we include within functions.

Next steps I'm working?

• Understand props

Have you read this article? I would appreciate your opinion or any suggestions on what I should study about React in these initial stages. Thank you so much, and please follow this account to encourage me to create more content like this!