A Pen by Akhilesh Kumar on CodePen. This is based on Complete React course by Maxillian Schwartzmullur's Course
Last active
February 18, 2019 09:14
-
-
Save akhilesh-k/5c28f10f39b89c2c01f47b1fe7415413 to your computer and use it in GitHub Desktop.
firstReact
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="app"> | |
</div> |
The point React is called React is React websites just react to the queries and operations performed by user in the browser.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function Person(props) { | |
return ( | |
<div className="person"> | |
<h1>{props.name}</h1> | |
<p>Your Age: {props.age}</p> | |
</div> | |
); | |
} | |
var app = ( | |
<div> | |
<Person name="Max" age="28" /> | |
<Person name="Manu" age="29" /> | |
</div> | |
); | |
ReactDOM.render(app, document.querySelector('#app')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.2/umd/react.production.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.2/umd/react-dom.production.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.person{ | |
display:inline-block; | |
margin:10px; | |
border:1px solid #eee; | |
box-shadow: 0 2px 2px #ccc; | |
width:200px; | |
padding:20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment