Cómo estructurar un nuevo proyecto React

La mejor manera de comenzar, especialmente para alguien que tiene mucha experiencia en otras tecnologías, es simplemente elegir una placa repetitiva (o generador de Yeoman) y comenzar desde allí. Esto le dará un esqueleto completamente viable de un proyecto, incluida la estructura relevante.

Aquí hay algunos buenos para comenzar:

kriasoft / react-static-boilerplate – Boilerplate para crear proyectos de reacción que ‘compilan’ en un solo archivo JS distribuido.

kriasoft / react-starter-kit: repetitivo para crear proyectos de reacción que son isomorfos (es decir, también contiene representación del lado del servidor).

react-webpack-generators / generator-react-webpack – Este es mi favorito. No es tan popular como los dos anteriores, pero creo que es mucho más fácil de entender. Bonificación: viene con un generador Yeoman para crear nuevos componentes.

En React todo se basa en componentes que son archivos .js, .jsx. No estoy seguro de qué marco está utilizando, como redux / flux, etc. Pero como su pregunta hace hincapié en React, que trata solo con la capa de vista, describo solo la estructura de la capa de vista. Se puede dividir en directorios de Vistas y Componentes como se muestra.

  • Las vistas tienen archivos HTML y componentes de nivel primario. Además, si tiene archivos externos como imágenes, los archivos CSS van aquí.
  • El directorio de componentes contiene todos los componentes secundarios de la aplicación. También puede subcategorizar subcomponentes en diferentes tipos como se muestra en la imagen.

¡Hola! Tal vez esta publicación puede ser una buena lectura para ti,
9 cosas que todo principiante React.js debería saber