firstReactJSCompontent

firstreactjscompontent.markdown

firstReactJSCompontent

A Pen by Jack on CodePen.

License.

index.html

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


<div class="person">
  <h1>Tom</h1>
  <h1>Your age: 28</h1>
</div>

script.babel

function Person(props) {
  return (
    <div className="person">
      <h1>{props.name}</h1>
      <h1>Your age: {props.age}</h1>
    </div>
  );
}

const app = (
  <div>
    <Person name="Bilbo" age="24"/>
    <Person name="Baggins" age="28"/>
  </div>
)

ReactDOM.render(app, document.querySelector('#app'));

// ReactDOM.render(<Person name="Bilbo" age="24"/>, document.querySelector('#p1'));
// ReactDOM.render(<Person name="Baggins" age="24"/>, document.querySelector('#p2'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>

style.css

/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

.person {
  display: inline-block;
  border: 1px solid #eee;
  /* x | y | blur radius | color   */
  box-shadow: 0 2px 2px #ccc;
  width: 200px;
  padding: 20px;
}