The First Steps to Understanding React

In this post I will introduce you to – what I believe – the most important concepts for getting started with mastering React.

Over the years, we’ve seen back-end programming languages ​​evolve. It evolves to accommodate new features and tools in order to make software maintainable. From syntactic constructs such as classes and objects to namespaces, packages, and modules. With great tools like those that help you manage dependencies (maven, gradient, composer, pip, gem, etc) and those for test automation. In line with these, the software development community is writing books and articles on best practices, patterns, and refactoring techniques as well as various proposals on how to design your application: multi-tiered, modular, hex (clean), onion, modular monolith, SOA, event driven, services miniature, etc.

On the other hand, on the front end, we did our best. With almost no tools or bibliography related to helping us write maintainable software. Most of us had to deal with a server-side template engine (PHP, JSP, JSF, freemarker, etc.), mixing HTML, CSS and jquery. At one point, JavaScript was considered a serious language mainly thanks to GMail, which shows just how powerful a web application (single page) can be. With the community crying out for better tools, Node.js suggested server-side JavaScript, and a dependency management (npm) tool was created. In addition, Javascript has evolved in the ES6 version with many new features, especially the addition of modules.

Taking advantage of these improvements, React has been released with the front-end idea of ​​building applications by aggregation standalone components. Does it look like nothing new has really been added? You’re right, we’ve been reading for years about the silver lining for “self-contained components” in those old books on software engineering. However, I think the React developers did a great job of providing the tool to make this a reality. In React, you can design applications by compiling components, which are built with easy JavaScript functions.

The people behind React’s design decisions have challenged very well-established patterns like MVC, where you have separate display logic and tags in different abstractions. In React, you have the display logic (data fetching, event handling, etc) and coding in the same abstraction: component. Each component is part of Careers From your point of view. This is what makes React so great and why I love it.

Without the details (which you should learn if you want to start coding in React), using some pseudo-React code, let me show you the idea of ​​how to build an app by compiling components.

Suppose we want our app to have a very simple layout, with a list header and a body containing a list of tasks as shown in the figure below:

Task List Template Application Figure 1: To-do list template application

With this in mind, we will formulate two components: food menu And To do list. the food menu The component will be responsible for building the top header with the label “To-Do List”. and the To do list The component will be responsible for getting and displaying the task list.

In your Rect application entry point (usually an App.js component), you can write something like:

function App() {
 return (
  <div>
    <Menu />  
    <TaskList />
  </div>
 );
}

The above function represents the main component called Implementation. What the function component returns is called JSX (JavaScript XML). JavaScript extension suggested by React to fee user interface. What we do with Implementation The above component is to instantiate food menu And To do list Component (to use a well-known term from OOP). In other words, we require a response to submit – make These components, in this order (first food menu, and then To do list) as children of an element

. the food menu The component draws itself as an element

, see below:

function Menu() {
 let title = “Task List”;
 return (
   <header>
     <span>{title}</span>
   </header>
 );
}

Note from the top of the variable nickname In curly braces in JSX. You can wrap any JavasScript expression in between. Let’s continue to review how a file works To do list The component gets the task and displays it:

function TaskList() {	
  let tasks = initializeState([ ]);          

  function afterFirstRender() {
     fetch(“https://my.endpoint.com/tasks”)
       .then((response) => response.json())
       .then((json) => setState(json));
  }

  return (
   <section>
    <p>Tasks List</p>
    <table>
     <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Expiration Date</th>
     </tr>
     {tasks.map((aTask) => (
     <tr>
      <td>{aTask.id}</td> 			
      <td>{aTask.name}</td>
      <td>{aTask.expirationDate}</td> 
     </tr>		
    ))}
   </table>
  </section>
 );
}

Like objects in OOP, React components have an extension condition and a number of associated functions life cycle. For example, in OOP, the constructor is called upon creation. If you look at the TaskList component above, in the first line we initialize its state, with an empty array. Then we define a function called afterFirstRender and then return Component function statement. The first thing React does is submit – make Component (by calling the component’s function), that is, processing JSX (converting it to HTML) and entering the conversion into the DOM. At that point, the Tasks condition The variable is still an empty array. If we pause the execution now, we will notice by looking in the browser that the component is rendered. It looks like in the picture below:

Empty schedule task list

Figure 2: Blank Table

After the show ends, a file is created afterFirstRender The function is called by React (this is one of the life cycle mission). This function, using JavaScript Brought function, gets tasks from the API, converts them to JSON, and saves them to the tasks state variable, using your setState Job. This special function, after assigning the value to the variable, triggers Resubmit – make Component, coating cells

With mission data (since now Taskscondition variable has been updated). And now, if we look at the browser, we will see what is shown in Figure 1. Please, notice how cool this was. To do list It really is SelfIt includes component. It was able to get data from the API and into draw herself in the DOM.

These were what I consider the main concepts you should learn if you want to start coding in React: independent components, JSX, state, and lifecycle functions. There are many other examples you can find in Understanding React.

.

Leave a Comment