fix(guide): restructure curriculum guide articles (#36501)

* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions

guide/english/certifications/front-end-libraries/react/create-a-react-component/index.md

@@ -1,15 +1,24 @@
 ---
 title: Create a React Component
 ---
-## Create a React Component
+# Create a React Component
 
-## Hint 1:
+
+---
+## Hints
+
+### Hint 1
 - You're going to be seeing these React Class Components all the time, so now would be a great time to get comfortable with them. Remember in this exercise you don't have to define the component, you just need to make a function return a little html in between the marked lines.
 - Remember the previous section and return a "div" element which contains an "h1" with the text Hello React!.
 - "div" element has a child so remember to close all tags.
 
-## Solution 
-```javascript
+
+---
+## Solutions 
+
+<details><summary>Solution 1 (Click to Show/Hide)</summary>
+
+```jsx
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -27,3 +36,4 @@ class MyComponent extends React.Component {
 ```
 
 Note that you don't need to put quotes around the text, because when you are working with JSX it is treated as HTML. Also check to make sure your spelling, case, and punctuation are correct! If all this code looks strange, go check out some of the great material on JavaScript ES6 here on freeCodeCamp.
+</details>