In this exercise we will change the text displayed on the portal page for the services solution.
Goals of this activity:
- Become familiar with the file structure of the services package.
- Find the location of the displayed text on the services portal page.
- Modify the text.
The Services Package
The services package can be found in the packages directory. The services package has it's own node_modules, package.json and README.md files. The important directory in the services package is the src directory. The src directory holds most of the code used to build the views for the services package.
- assets > styles - scss style sheets
- components - react components
- redux - reducers and sagas
- App.js - the root of the Services project
- constants.js - variables used in multiple locations in the Services project
- models.js - data structures
- utils.js - common used functions
The Services project components
React is based on the component design. Components are reusable snippets of code. Everything in React is a component making them extremely easy to reuse. Inside the Services project there are a number of Components.
Open Code Editor (atom or VS code)
- Open the editor
- Add the project to the workspace.
- To add with atom open File > Add Project Folder ...
- To add with VS code File > Add Folder to Workspace ...
- Browse to find the services package.
- This should be at Desktop/React Project/keg-2018-training-bundle/packages/services
- Click Add.
- Use the navigation on the left hand side of the editor.
- From the src directory navigate to the home directory. src/components/home
- Open Catalog.js.
- Locate the h1 tag that wraps the text "Services from the team"
<h1 className="text-truncate">Services from the team</h1>
- Modify the text to "Welcome to the Service Catalog".
- Save the file.
View Changes in the Browser
- Go to space home view:
http://localhost:3000/<spaceSlug>#/in your preferred browser. (chrome is the best option)
- From the dropdown in the upper right choose Services.
- The Services home view should look like the image below.