The project is stared form **React Boilerplate**, so you can get more detail of project structure from (https://github.com/react-boilerplate/react-boilerplate/tree/master/docs). As it is design by Redux so you need to have basic understand how to implement it. If you haven't worked with Redux, it's highly recommended (possibly indispensable!) to read through the (amazing) official documentation and/or watch this free video tutorial series

Components (app/Components): list of basic useful component on the project.

  • Article: support the view layout for article:

  • Card: support card view layout:

  • CardList: support list view layout:

  • Footer: support view for footer.
  • Icons: store all SVG icon for all project, due to the performance tuning we suggest to use only the icons that require for the app by define it from this component. Using from component like react-icons will cause your project more heavy loading.

  • LoadingIndicator: config view for loading icon

  • Logo: define logo view image

  • RelatedCard: list of related card that show from the post detail.

  • VideoSource: the video component that support youtube iframe.

The container (app/container) where storing backbone of the project, all the pages are defined here:

  • App: is the default container which is used to handle the whole app layout template.
  • Homepage: use to load the default homepage

  • LanguageProvider: define and handle multi language settings

  • Navigator: define and load menu config which is used from left menu sidebar.

  • ThemProvider: define and handle the theme settings.

  • WpCategory: handle to load the post items base on selected category (top category menu)

  • WpPage: we could use to load any post/page content via API via this component, it also support to execute external JS and CSS from public folder (none react JS&CSS component).

  • WpPostDetail: get the post Id and show from post detail page, example: http://reactpage.com/detail/375

  • WpPostList: handle and lost multi post/items from the API.

The data modal (App/data) use to define the object modal and format the data after fetching from the API, by this approach we can change to any Rest API without modify the view component.

  • Category.js: mapping the data with category table.
  • Post.js: mapping and run business logic for post data before populating to view component.

results matching ""

    No results matching ""