React.js Basics

Learn the basics about React.js

by smax

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

<div id="app"></div>

<!-- 
  1) Create a <div> and render a base component with React
  2) Output an array of hobbies in this <div> (provide some default hobbies)
  3) Add a 'New Hobby' button + <input> field where you add the hobby the user entered to the list
  4) Make the hobbies clickable to remove them once clicked
  5) Add a <p>Hobby deleted!</p> which is only shown once at least one hobby was deleted (be creative on how to track this!)
  6) Add a hobby counter (<p>Hobbies: ...</p>) above the list of hobbies
  7) Dynamically style/ add classes to the hobby counter, depending on whether you have more or less than 3 hobbies
  8) Outsource your hobbies (the <li> elements) into a re-usable component
-->

CSS

.multiple-hobbies {
  border: 1px solid red;
}

Babel + JSX

class App extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	
    };
  }
	
	render() {
  	return (
    	<p>My Hobbies</p>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));