These tutorials will give you a deeper understanding of React.js. Learn with examples from the Javascript UI library, covering the basics and the advanced.
Browse by tag:
Using props to dynamically pass data to a component
Props- Define a basic button and declare a className of
props.buttonStyles - Pass the
<Basicbutton />into theApp - Use defaultProps to declare the className of
props.buttonStylesas teal - Wrap
props.buttonStyleswithbackticksand add basic styling to the button with a second class in a string - Copy and paste more buttons into the
Appcomponent - Change the
buttonStylesprop to red and create a new class in between the style tags
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing button colours with Reusability</title>
<style>
// Inline styles go here
// Step 2b
.teal {
background: teal;
}
// Step 6b
.red {
background: red;
}
// Step 4b
.basicButtonStyles {
height: 40px;
width: 150px;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/babel">
// Step 1 Step 4a
const BasicButton = props => <button className={`basicButtonStyles ${props.buttonStyles}`}>Click me!</button>
// Step 2a
BasicButton.defaultProps = {
buttonStyles: 'teal',
}
const App = () => {
return
<div>
<h2>Click on a button</h2>
// Step 2
<BasicButton />
// Step 5
<BasicButton buttonStyles={red} />
<BasicButton />
// Step 6a
<BasicButton buttonStyles={red} />
<BasicButton />
</div>
}
ReactDom.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Challenge
Create dynamic text on some of the buttons with props.buttonText