Add conditional rendering content

content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md

@@ -1 +1,11 @@
-# Conditional rendering
+# Conditional Rendering
+
+In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+
+Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
+
+
+