Quick start: ASP.Net Core 3.1, Entity Framework Core, CQRS, React JS Series — Part 8: Initializing React app with navigation and folder structure

Well organized pieces make it understandable and readable!

Outline

• Github feature branch
• Initializing React App with React Bootstrap and React Router Dom
• Component Types in ReactJS
• Creating Folder Structure
• Define Layout
• Initialize Basic Navigation
• See the result

The parent content of this series: Quick start: ASP.Net Core 3.1, Entity Framework Core, CQRS, React JS Series

Github feature branch

alisuleymantopuz/cwa

Initializing React App

By CLI, the commands below can be used:

npx create-react-app cwa-client-app => React app
npm install — save react-bootstrap bootstrap => React bootstrap
npm install — save react-router-dom => Declarative Routing for React.js

Component Types in ReactJS

• Stateful (class) components: Those are the components that has access to state. For example, App component itself.
• Stateless (functional) components: They don’t have any lifecycle. Those should be used when there’s no need for the state inside our component. Just render the view!

Folder Structure

• Stateless components will be defined under components folder.
• Stateful components will be defined under the containers foler. They are the components that has a responsibility to behave like state container.

Keep stateful components in container folder!

Define Layout

Layout component

Define Navigation component

Navigation component

Add Navigation call in Layout.js

Layout JS with Navigation

App.js with declerative routing

App.js

Conclusion

The basic structure of the folder is in placed and result is as follows: