Hola mi nombre es Sergio Torrez.
Trabajo en una empresa para el desarrollo con React Js para un CRM llamado Dynamic 365 de Microsoft.
Sabiendo esto lo dividire en 3 partes:
¿Porque hago este tutorial?
La razon de este tutorial fue porque hace cerca de 6 meses y algo, me han dicho de usar la tecnologia de React Js y tuve que aprender por mi cuenta sin usar Node js y usando fetch, es decir que no se podia usar npm install react --save, ni nada similar.
La empresa en la que actualmente trabajo, me dijo que buscara informacion al respecto.
De saber poco y nada en Javascript y sin poder acceder a cursos pagos como Platzi, me vi forzado a buscar la respuesta yo mismo, junto a un compañero.
¿Que use para hacer React Js sin Node Js?
Lo que use fueron las siguientes etiquetas:
<scripttype="application/javascript"src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script><scripttype="application/javascript"src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script><scripttype="application/javascript"src="https://unpkg.com/[email protected]/babel.js"></script>Por como se pueden apreciar, tiene el Babel Js, React Js y react-dom.
Meses mas tarde, descubri que la pagina de React tiene las mismas etiquetas para el mismo uso, pero sin babel.
dejo el enlace Aqui.
¿Como hacer React Js con el?
Aqui viene lo que tal vez sea mas largo del tutorial.
Una vez que nosotros colocamos los tag anteriormente mencionados en el head
necesitamos colocar abajo de dichos tags, nuestros archivos, los cuales, pueden ser con extension .jsx o .js, pero con el type=“text/babel”. Por ejemplo:
<scripttype="text/babel"src="/MiArchivo.js"></script>Tambien puedes hacer el React del siguiente modo:
<script type="text/babel">
classContainerextendsReact.Component{
render(){
return(
<div>
HelloWorld
</div>
);
}
}
ReactDOM.render(
<Container />, document.getElementById("root")
)
</script>
¿Puedes crear otros componentes y usarlos?
Si te has preguntado eso al ver este codigo, la respuesta es si.
Como en el ejemplo anterior hagamos de cuenta que tenermos a nuestros archivos como container.js, component1.js y componente2.js.
La manera de estructurar esto, es el ultimo componente que se va a usar como primer tag, y el primer componente que se va a usar como ultimo tag, es decir esto:
<scripttype="text/babel"src="/componente2.js"></script><scripttype="text/babel"src="/component1.js"></script><scripttype="text/babel"src="/container.js"></script>Por dentro, container.js tendra:
classContainerextendsReact.Component{
render(){
return(
<div>
<ComponentOne />
</div>
);
}
}
ReactDOM.render(
<Container />, document.getElementById("root")
)
y en component1.js tendria algo asi:
classComponentOneextendsReact.Component{
render(){
return(
<div>
<ComponentTwo/>
</div>
);
}
}
Y component2.js tendra:
classComponentTwoextendsReact.Component{
render(){
return(
<div>
Hi, it is a testing to ReactJs
</div>
);
}
}
Podemos pasarles functions y states del siguiente modo:
//In the file component1.jsclassComponentOneextendsReact.Component{
componentDidMount(){
//init with didmount because this function don't updatethis.props.myFunction ("this value is:")
}
render(){
return(
<div>
{this.props.myValue}
<ComponentTwo/>
</div>
);
}
}
//In the file container.jsclassContainerextendsReact.Component{
constructor(){
super();
this.myFunction = this.myFunction.bind(this);
this.state={
myValue:''
}
}
myFunction (value){
this.setState({myValue:value})
}
render(){
/*send the value and function for params,
but you must do bind to the function*/return(
<div>
<ComponentOne
myFunction = {this.myFunction}
myValue = {this.state.myValue}
/>
</div>
);
}
}
ReactDOM.render(
<Container />, document.getElementById("root")
)
Espero que les haya gustado este tutorial, a decir verdad es el primero que hago, asi que no se si les gustara o si hay algun tema igual a este. Me diverti haciendo esto.
Gracias por el aporte foxtry, tengo que hacer algo similar y esto es de gran ayuda.