Una guía rápida para ayudarlo a comprender y crear aplicaciones ReactJS

Esta publicación está dividida en 2 partes

  1. La primera parte demuestra cómo crear una aplicación React simple usando la CLI 'create-react-app' y explica la estructura del proyecto.
  2. La segunda parte explica un código existente que publiqué en Github. Este código demuestra el uso de componentes, la comunicación entre componentes, la realización de llamadas HTTP y React Bootstrap (bootstrap que está escrito para React).

Parte 1

Instale NodeJS si aún no está presente

NodeJS es necesario ya que las bibliotecas requeridas para React se descargan usando el administrador de paquetes de nodos (npm). Consulte //nodejs.org/en/ para instalar NodeJS.

Instalar el paquete de nodo create-react-app

El paquete de nodo create-react-app ayuda a configurar un proyecto React. Instale el paquete de nodo create-react-app de forma global con el siguiente comando.

npm install -g create-react-app

Crea el proyecto

El proyecto se puede crear usando create-react-app. Utilice el siguiente comando para crear el proyecto.

npx create-react-app first-react-app

first-react-app es el nombre de la aplicación. El comando anterior crea una carpeta llamada first-react-app que es la carpeta del proyecto. Para probar si todo se ha configurado correctamente, vaya a la carpeta del proyecto e inicie la aplicación con el siguiente comando.

cd first-react-app npm start

Vaya a su navegador y vaya a la siguiente URL localhost: 3000

Debería poder ver que su aplicación se está ejecutando. La aplicación se verá así en su navegador:

Explicación de la estructura básica de carpetas

Cuando creó el proyecto, se habrá dado cuenta de que creó un montón de archivos. Aquí enumeraré algunos de los archivos y carpetas importantes que debe conocer.

  1. package.json: este archivo tiene la lista de dependencias de nodos que se necesitan.
  2. public / index.html: Cuando se inicia la aplicación, esta es la primera página que se carga. Este será el único archivo html en toda la aplicación, ya que React generalmente se escribe usando JSX, que cubriré más adelante. Además, este archivo tiene una línea de código. Esta línea es muy significativo ya que todos los componentes de la aplicación son Loade d i nto este div.
  3. src / index.js : este es el archivo javascript correspondiente a index.html. Este archivo tiene la siguiente línea de código que es muy significativa. ReactDOM.render (, document.getElementById ('raíz'));
  4. La línea de código anterior dice que App Component (cubrirá App Component pronto) debe cargarse en un elemento html con id root . Esto no es más que el elemento div presente en index.html.
  5. src / index.css : el archivo CSS correspondiente a index.js.
  6. src / App.js : este es el archivo del componente de la aplicación . App Component es el componente principal en React que actúa como un contenedor para todos los demás componentes.
  7. src / App.css : este es el archivo CSS correspondiente al componente de la aplicación
  8. build: esta es la carpeta donde se almacenan los archivos construidos. Las aplicaciones de React se pueden desarrollar usando JSX o JavaScript normal, pero usar JSX definitivamente hace que las cosas sean más fáciles de codificar para el desarrollador :). Pero los navegadores no entienden JSX. Por lo tanto, JSX debe convertirse en javascript antes de implementarlo. Estos archivos convertidos se almacenan en la carpeta de compilación después de empaquetarlos y minificarlos. Para ver la carpeta de compilación, ejecute el siguiente comando
npm run build 

Crear componentes

Un componente en React tiene una funcionalidad específica. Una aplicación no es más que una colección de componentes. Cada componente puede tener varios componentes secundarios y los componentes pueden comunicarse entre sí.

Creemos un componente React ahora.

Dentro de la carpeta src, cree un archivo llamado FirstComponent.js y copie el siguiente código en FirstComponent.js.

import React, {Component} from 'react'; export default class FirstComponent extends Component { constructor(props) { super(props) } render() { const element = ( Text from Element ) return ( 

First Component

{this.props.displaytext} {element} ) } }
  1. El nombre del componente es FirstComponent, que se indica tanto en el nombre del archivo como en la declaraciónexport default class FirstComponent extends Component
  2. El atributo props en el constructor contendrá todos los parámetros que se pasan como entrada a este componente.
  3. render (): el valor de retorno de esta función se representa (se muestra) en la pantalla. Siempre que se llama a la función render (), la pantalla se vuelve a generar. Por lo general, la aplicación lo hace automáticamente. El código que se parece mucho a html en esta función no es más que JSX.

JSX

JSX se parece mucho a HTML pero tiene todo el poder de javascript. Aquí explicaré el código JSX y lo que intenta hacer.

render() { const element = ( Text from Element ) return ( 

First Component

{this.props.displaytext} {element} ) }

La primera línea const element = ( Text from Element )crea un elemento div y lo asigna a una constante llamada elemento. Esta peculiar sintaxis que se ve es Noth ing pero JSX.

Dentro de la instrucción Return, verá la siguiente sintaxis de código.

First Component

{this.props.displaytext} {element}

Aquí className se usa para apuntar a una clase CSS.

First Component

es solo una sintaxis html normal. {this.props.displaytext}se utiliza para acceder a un atributo llamado como displaytext desde props (por lo que displaytext se pasa como entrada cada vez que se llama a este componente). Aquí displaytext es solo un nombre personalizado que le he dado. {element}es la constante que se creó, que a su vez contiene el elemento div.

Using the Component

FirstComponent has been created but is not being used anywhere yet. Let's add FirstComponent to App Component. Here is the modified code for App.js

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import FirstComponent from './FirstComponent' class App extends Component { render() { return ( 

Welcome to React

To get started, edit src/App.js and save to reload.

); } } export default App;

FirstComponent needs to be imported into App Component First which is done in the line import FirstComponent from ‘./FirstComponent’

Then FirstComponent is added to App Component using the line

Here displaytext is passed as an attribute to the FirstComponent.

Now you can run the Application using the command npm start

You should see the following result in the browser.

Congrats?

Now you know how to create a React Application and how to create and use React Components. You also know a bit about JSX :)

The next part will explain an existing React Code from Github. Part 2 code is different from the code that we wrote in Part 1.

Part 2

Code

The Following Code is being explained here so clone the repo into your computer. The Repo has instructions on how to clone and set up the code in your computer.

//github.com/aditya-sridhar/simple-reactjs-app

Application URL

To see how the final Application looks like you can click on the following URL. This will give a good idea as to what the Application is trying to do

//aditya-sridhar.github.io/simple-reactjs-app

The Application would look like this in a mobile screen

What does this Application do

This application displays a list of customers. When a customer is selected, it displays the details of the selected customer. This is a Single Page Application (SPA). React is best suited for Single Page Applications. Single Page Applications display everything within a single page.

Application Structure Explained

Customers Component

This Component displays the list of Customers. This corresponds to the file src/Customers.js . This component has the following constructor.

constructor(props) { super(props) this.state = { selectedCustomer: 1 } }

props were already explained. But here you also see this.state. Whenever state changes, the component is rerendered. Here state has one parameter called selectedCustomer which is to keep track of which customer is selected. If selectedCustomer changes then the component and its child components are rerendered. The Constructor is used only to set props and state. Also, props should never be edited inside a component.

The next thing you notice is the following code.

componentDidMount() { this.getCustomerData(); }

componentDidMount() is a function which is called as soon the component is rendered. So this can be used to set some initial values as well as load data. Here it is calling a function called as getCustomerData()

The next piece of code that you see is

getCustomerData() { axios.get('assets/samplejson/customerlist.json').then(response => { this.setState({customerList: response}) }) };

This function getCustomerData() makes an HTTP call to read the sample json containing the list of customers from assets/samplejson/customerlist.json. On successfully getting a response, the state of the system is changed, by assigning the response to customerList. You may wonder why we never added customerList in the constructor. The reason is you can add parameters dynamically into State at any point in the code. The only requirement is that in the constructor at least an empty state has to be defined.

Here axios library is used to make the HTTP call. I have provided the Documentation for axios in the References section.

The next function is the render() function which returns what elements have to be rendered on screen. The main points of focus in the render function are

 this.setState({selectedCustomer: customer.id})}> Click to View Details 

Every customer in the list has a button called as Click to View Details. The above code snippet tells that whenever the button is clicked, then change the state of selectedCustomer to the selected customers' id. Since the state changes here, the component and its child component will be rerendered.

The other code snippet which is important is

This snippet tells that CustomerDetails is a child component of Customers component and also passes the selectedCustomer id as an input to CustomerDetails component

CustomerDetails Component

This component displays the details of the selected Customer. Some important code snippets from this component will be explained here:

componentDidUpdate(prevProps) { //get Customer Details only if props has changed //(props is the input) if (this.props.val !== prevProps.val) { this.getCustomerDetails(this.props.val) } }

componentDidUpdate() function is called whenever the component is rerendered. Here we are calling getCustomerDetails() Function if the input to this component has changed when the component rerendered. The input passed to getCustomerDetails() function is this.props.val. this.props.val in turn, gets its value from Customers Component( selectedCustomer was passed as an input to this ). To know if the input has changed, the code snippet used is this.props.val !== prevProps.val

getCustomerDetails(id) { axios.get('assets/samplejson/customer' + id + '.json').then(response => { this.setState({customerDetails: response}) }) };

getCustomerDetails() function makes an HTTP call to get the sample json which contains the customer details. The id parameter is used to know which customers details are required. id is nothing but this.props.val. When the response is successfully received the state of this component is changed by assigning response to customerDetails.

The render() function for this component is pretty straightforward and simple so will not be covering that here

References

create-react-app: Refer to //github.com/facebook/create-react-app to learn what all can be done using create-react-app

ReactJS: Refer to //reactjs.org/ to understand the concepts of ReactJS. The documentation is very good.

React Bootstrap: Refer to //react-bootstrap.github.io/getting-started/introduction/ to understand how to use React Bootstrap

axios: Refer to //www.npmjs.com/package/axios to know more about how to use axios library to make HTTP requests

Congrats Again ?

Now you know how to use components, how to communicate from a parent to a child component and also a little about rendering

The basic concepts have been covered in this post and hope this is helpful

About the author

I love technology and follow the advancements in technology. I also like helping others with any knowledge I have in the technology space.

Feel free to connect with me on my LinkdIn account //www.linkedin.com/in/aditya1811/

You can also follow me on twitter //twitter.com/adityasridhar18

My Website: //adityasridhar.com/

Other Relevant Posts by Me

A Quick Guide to Help you Understand and Create Angular 6 Apps

A quick introduction to Vue.js