2

Quiero hacer algo como lo que se puede hacer en vue, en el index.html dentro de #app tener una estructura asi:

<div id="app">
 <mi-componente prop="algo" prop="otracosa"></mi-componente>
</div>

he visto varios tutoriales donde lo hacen de la siguente manera

import App from './js/Components/App.jsx';
ReactDom.render(<App />, document.getElementById('app'))

y dentro de app meten los componentes, pero eso no quiero... yo quiere meter los componentes a mi antojo en el html ya que usare codeigniter y solo ocupo uno que otro componente no elaborar todo un sitio con react...

1

1 respuesta 1

0

A tu pregunta la respuesta es SI, por supuesto, no de ésa manera exacta a cómo lo harías con Vue o Angular, pero no lo necesitas. De hecho solo tienes que añadir el script a tu html del cdn oficial: https://reactjs.org/docs/cdn-links.html.

A partir de ahí cómo uses las clases y accesos al DOM is up to you.

Te lo comento así porque lo he aplicado en varios proyectos, insertar scripts de react para partes pequeñas de la aplicacion, voy a tratar de ponerte un ejemplo.

Podrias tener una lista en alguna parte de la web y en vez de inserta

... 
   ...
      ...
         <div id="mi-lista-react"></div>

Y luego tener en la etiqueta script algo así:

<script type="text/babel">
const lista = [1,2,3,4]
class MiLista extends React.Component {
    render() {
        return (<ul>{lista.map(item => <li key={item}>{item}</li>)}</ul>);
    }
}
ReactDOM.render(
    <Lista />,
    document.getElementById('mi-lista-react')
);
</script>

Y así sucesivamente ;)

Documentación en inglés: https://reactjs.org/docs/add-react-to-a-website.html

Ejemplos: https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda

2
  • Hola Amigo gracias por tu respuesta pero como le pasas propiedades?? mira lo que quiero es desde code igniter traer de mysql una lista de cursos y desde un foreach pasarle parametros al componente ejemplo: <?php foreach($cursos as $curso): ?> <cursos id="<?=$curso['id']?>" nombre="<?=$curso['nombre']?>" imagen="<?=$curso['img']?>" > </cursos> <?php endforeach; ?> el 23 abr. 2020 a las 18:35
  • Si tienes la lista en la variable $cursos, tienes que pasarla al JS, yo traería los datos desde el JS o crearía una variable global que pueda leer en JS, por ejemplo a través de window, por ej. window.listaCursos, no estoy seguro de cómo setear esa var global en php para luego poder leerla o si hay un approach mejor. el 23 abr. 2020 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.