Javascript

accepts a single “props” (which stands for properties) object argument with data and returns a React element

Always start component names with a capital letter

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id = "root"></div>
	<script src="https://fb.me/react-0.14.3.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
	<script src="script.js" type = "text/babel"></script>
</body>
</html>

Typically, new React apps have a single App component at the very top

a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component

Props are Read-Only, it must never modify its own props

//script.js
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" /> //Welcome component with {name: 'Sara'} as the props
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);