JSX & React Component Basics

What’s JSX?

const div= <div>Hello world</div>;

JSX .map()

const stringsArray = ['Milk', 'Sugar', 'Nutella'];

const list = stringsArray.map(string => <li>{string}</li>);

<ul>{list}</ul>

JSX Event Listeners

//JSX attributes
const example = <h1 id="attributeName">JSX Attributes</h1>;
// basic without event parameter
const handleClick = () => alert("Hello world!");

const button = <button onClick={handleClick}>Click here</button>;

// Example with event parameter
const handleMouseOver = (event) => event.target.style.color = 'purple';

const button2 = <div onMouseOver={handleMouseOver}>Drag here to change color</div>;

What’s a component ?

import React from 'react';

function MyFunctionComponent() {
return <h1>Hello from a function component!</h1>;
}

class MyClassComponent extends React.Component {
render() {
return <h1>Hello from a class component!</h1>;
}
}

JSX Capitalization

// This is a JSX HTML tag 
<div>
// this is react component
<ThisComponent />

import React

import React from 'react';

import ReactDOM

import ReactDOM from 'react-dom';

render()

import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
render() {
return <h1>Hello World!!</h1>;
}
}

Currently Studying to be a Software Engineer At Flatiron.