React JS es una libreria o framework Open Source para crear aplicaciones e interfaces de usuario, es sencillo, declarativo, reactivo y facil de combinar.

En estos tiempos ya cualquiera sabe lo que es React Js , una de las mayores librerias en el entorno web, mantenida por Facebook y por miles de desarrolladores y es usada por otros miles de desarrollades mas.

Hoy vamos a crear un ejemplo de react y mas adelante vamos a crear mas ejemplo y proyectos.

Lo que nos interesa es tener un entorno de desarrollo para crear aplicaciones React y conocer los comandos y conceptos basicos.

Caracteristicas de React Js

React Js esta centrado en el Front-End es decir la parte visual, en React Js se pueden crear componentes reutilizables e interactivos.

En react Js existe un virtual Dom (Document Object Model) utilizado por react para fortalecer y mejorar el propio DOM del navegador.

En react se usa un formato llamado JSX que es practicamente Javascript mezclado con HTML.

Tambien existen los Hook de Estado, que se lanzan cuando un elemento cambia de estado, tambien existen los Hooks de Efectos que agrega la capacidad de realizar efectos secundarios.

Node js

Lo primero que debemos tener instalado es Node Js por que vamos a usar el comando npm: Node Package Manager y npx

Una vez instalado Node js ya podemos continuar.

Crear una app React

Para crear una aplicacion en react vamos a usar la terminal o cmd.exe y para muchas tareas va a ser necesario por lo que no hay que saltarse el uso de la CMD o terminal.

Vamos a buscar una ubicacion comoda en nuestra pc para crear nuestros proyectos y vamos a abrir la terminal y nos vamos a ir a esa ubicacion usando el comando “cd ubicacion”.

En mi caso es esta ubicacion. C:\xampp\htdocs\react>

En nuestra carpeta de proyectos ya en la cmd vamos a usar el comando.

npx create-react-app app1

El comando npx recibe 2 parametros, el primero es “create-react-app” es decir la instruccion de que vamos a crear una aplicacion react y el segundo parametro es el nombre del proyecto o de la carpta donde se va a grabar el nuevo proyecto, en este caso app1.

En la terminal va a correr el proceso de instalacion y vamos a esperar a que nos devuelva el prompt y nos notifique que el proceso ha terminado.

Cuando la creacion de la app termine, en la carpeta que seleccionamos se van a crear varios archivos y carpetas

Carpetas: build, node_modules, public, src….

Por el momento nos vamos a centrar en la carpeta src, es donde se guardan los archivos de los componentes y el archivo de la aplicacion principal es App.js

Ejecutar App React

Para ejecutar o visualizar nuestra aplicacion en React vamos usar el comando.

npm start

Desde la cmd y tenemos que estar ubicados en la carpeta de nuestro proyecto o cualquier proyecto en react.

Al ejecutarlo se va a abrir un servidor temporal y en el navegador veremos algo asi. Indicando que todo ha salido bien.

Modificar App.js React

Ahora vamos a modificar el archivo App.js para crear un simple Hola mundo, para ello vamos a remover parte del codigo que hay inicialmente y vamos a dejar el archivo App.js de la siguiente manera.

function App() {

  return (
    <div className="App">
      <h1>Hola Mundo!</h1>
      <p>Este es un ejemplo de App en React.js</p>
    </div>
  );
}


export default App;

Con este codigo vamos a hacer un simple hola mundo con un parrafo, pero este es el inicio para crear nuestras aplicaciones en React.

El resultado.

En proximos articulos vamos a hablar o escribir mas sobre React Js y vamos a crear mas ejemplos y proyectos utiles.