React basics

React is a JavaScript library. Its' primary use is to make components which are used to build web apps, mobile apps, desktop apps, VR apps and much more.

Since React is a library and not a framework, it is not very opinionated on how you should build or structure your app. This can also lead to people using React in a lot of different ways. People often bring their own style of writing React apps into their projects.

At the ground level, React lets you create Components that can be displayed in your web browser. A very simple React Component can look something like this:

// A Component that renders a button in HTML.
const Button = () => (
	<button>Click me!</button>
);

Let us break down what is happening here, from the very bottom.

• We are declaring a constant (const) named Button. Much in the same way as if you declare const foo = 1.
• The Button is a of type function. You can read more about functions in JavaScript here //TODO: Provide link
• The function returns JSX, which is a way of representing HTML/XML in JavaScript.

The Component (or FunctionComponent) we declared above can now be used to create larger sets of Components, which can be used to construct entire apps! To use this Component, we can use it just like we would any other element in HTML. As an example, we'll create an App Component to represent the start of our application.

// The starting point of our app!
const App = () => {
	return (
		<div>
			<h1>The button app!</h1>
			<p>This app has a button you can click</p>
			<Button /> // This is the Button Component we wrote above.
		</div>
	);
};

This component uses another way to write functions in JavaScript, which you can read more about here //TODO: Provide link

As you can see, this Component uses both regular HTML, and React Component in the same place. To the browser the App component will look like this:

<div>
	<h1>The button app!</h1>
	<p>This app has a button you can click</p>
	<button>Click me!</button> // This is the result of the `Button` Component
</div>