Como hacer React js sin Node js y sin usar la extension . JSX

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?.
• ¿Que use para hacer React Js sin Node Js?.
• ¿Como hacer React Js con el?.

¿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:

<script type="application/javascript" src="https://unpkg.com/react@16.3.0/umd/react.production.min.js"></script>

<script type="application/javascript" src="https://unpkg.com/react-dom@16.3.0/umd/react-dom.production.min.js"></script>

<script type="application/javascript" src="https://unpkg.com/babel-standalone@6.26.0/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:

<script type="text/babel" src="/MiArchivo.js"></script>

Tambien puedes hacer el React del siguiente modo:

<script type="text/babel">
	class Container extends React.Component{
		render(){
			return(
				<div>
					Hello World
				</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:

<script type="text/babel" src="/componente2.js"></script>
<script type="text/babel" src="/component1.js"></script>
<script type="text/babel" src="/container.js"></script>

Por dentro, container.js tendra:

	class Container extends React.Component{
		render(){
			return(
				<div>
					<ComponentOne />
				</div>
			);
		}
	}

	ReactDOM.render(
  		<Container />, document.getElementById("root")
	)	

y en component1.js tendria algo asi:

	class ComponentOne extends React.Component{
		render(){
			return(
				<div>
					<ComponentTwo/>
				</div>
			);
		}
	}

Y component2.js tendra:

	class ComponentTwo extends React.Component{
		render(){
			return(
				<div>
					Hi, it is a testing to React Js
				</div>
			);
		}
	}

Podemos pasarles functions y states del siguiente modo:

	//In the file component1.js
	class ComponentOne extends React.Component{
		componentDidMount(){
			//init with didmount because this function don't update
			this.props.myFunction ("this value is:")
		}
		render(){
			return(
				<div>
					{this.props.myValue}
					<ComponentTwo/>
				</div>
			);
		}
	}
	
	//In the file container.js
	class Container extends React.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.