Requisito > Node.js y npm
1. Basic scaffold
Primero que todo vamos a crear una carpeta llamado project-react
mkdir project-react
cd project-reactLuego crearemos nuestro archivo package.json
npm init -y2. Dependencias
Instalaremos 6 dependencias necesarias para poder funcionar la aplicacion React que funcione correctamente. Todas las librerias lo usamos en una linea de instalar npm :
sudo npm install path @babel/core @babel/preset-react react babel-loader react-dom --save3. Webpack
Webpack es un paquete de módulos javascript que nos permite agrupar la librería e interactuar en la pagina web.
npm install webpack webpack-cli --globalCrearemos el archivo webpack.config.js en la raíz y configurarlo
var path = require('path');
module.exports = {
entry: './components/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
watch: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react']
}
}
}
]
}
}4. React.js
Crearemos un componente basico de react en la carpeta llamado components
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Root extends Component {
render() {
return (
<h1>Hello World from React</h1>
)
}
}
let container = document.getElementById('app');
let component = <Root />;
ReactDOM.render(component, container);
5. Html
Crearemos un archivo index.html dentro de la raíz del proyecto
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Basic React</title>
</head>
<body>
<div id="app">
</div>
<script src="dist/main.js" charset="utf-8"></script>
</body>
</html>Ejecutar webpack
webpack --config webpack.config.jsComando para compilar webpack por cada modificaciones
sudo webpack --watch 
