10 Things you should know about react

npx create-react-app my-app
cd my-app
npm start
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
I Love JSX!
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
const myelement = <Car brand="Ford" />;
import React from 'react';
import ReactDOM from 'react-dom';

function shoot() {
alert("Great Shot!");
}

const myelement = (
<button onClick={shoot}>Take the shot!</button>
);


ReactDOM.render(myelement, document.getElementById('root'));
<h1 style={{color: "red"}}>Hello Style!</h1>
class MyHeader extends React.Component {
render() {
const mystyle = {
color: "white",
backgroundColor: "DodgerBlue",
padding: "10px",
fontFamily: "Arial"
};
return (
<div>
<h1 style={mystyle}>Hello Style!</h1>
<p>Add a little style!</p>
</div>
);
}
}
import “./style.css”;
C:\Users\Your Name>npm install node-sass
$myColor: red;

h1 {
color: $myColor;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store