Here's an article on what react is, and why you should learn React: What is React.js and Why React?
JSX
JSX (JavaScript Syntax Extension and occasionally referred to as JavaScript XML) is a React extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.
React components are typically written using JSX, although they do not have to be as components—they may also be written in pure JavaScript. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
JSX Markup
An example of JSX code:
const App = () => {
return (
<div>
<p>Header</p>
<p>Main</p>
<p>Footer</p>
</div>
);
}
Nested Elements
Multiple elements on the same level need to be wrapped in a single react element such as the <div> element shown above, or a fragment denoted by <Fragment> or in it’s shorthand form <>, or returned as an array.
Attributes
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component. All attributes will be received by the component as Props.
JavaScript Expressions
JavaScript Expressions ( but not statements ) can be used inside JSX with curly brackets { }:
<p>{10 + 3}</p>
The example above will render:
<p>13</p>
Conditional Statements
if-else statements cannot be used inside JSX, but conditional expression can be used instead. The example below will render { i === 1 ? ‘true’ : ‘false’ } as the string ’true’ because i is equal to 1.
const App = () => {
const i = 1
return (
<div>
<h1>{i === 1 ? ‘true’ : ‘false’}
</h1>
</div>
);
}
The above will render
<div>
<h1>true</h1>
</div>
Functions and JSX can be used as conditionals:
const App = () => {
const Sections = [1, 2, 3];
return (
<div>
{Sections.map((n, i) => (
//‘key’ is used by react to keep track of list items and their changes. Each ‘key’ must be unique. //
<div key = {“Section-“ + n } >
Section{n} { i === 0 && <span>(first)</span>}
</div>
))}
</div>
);
}
The above will render:
<div>
<div>Section 1<span>(first)</span>
<div>Section 2</div>
<div>Section 3</div>
</div>
Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. This processing is generally performed during a software build process before the application is deployed.
Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. A component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component which will be the final UI of your application.
Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the traditional DOM structure, and making changes in them was a very challenging task. If any mistake was found, it manually searches the entire application and updated accordingly. The component based approach was intended to overcome this issue. In this approach, the entire application is divided into a small logical group of code, which is known as components.
Types of Components
Components come in two types; Class components and Function components. In older React codebases, you may find class components primarily used. It is now suggested to use function components along with Hooks, which were added in React 16.8.
Creating your first Component
When creating a React component, the component’s name MUST start with an upper case letter.
Class Component
A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.
The component also requires a render() method, this method returns HTML.
Example:
Create a class component called Book
class Book extends React.Component {
render () {
return <p>I have a Book!</p>;
}
}
Function Component
A function component also returns HTML, and behaves much the same way as a class component, but function components can be written using much less code and are easier to understand. Here is the same example as above, but created using a function component instead.
Example:
Create a function component called Book
function Book () {
return <p>I have a Book!</p>
}
Rendering a Component
Now your React application has a component called Book, which returns a <p> element.
To use this component in your application, use similar syntax as normal HTML:
Example:
Display the Book component in the “root” element:
ReactDOM.render (<Book />, document.getElementById(“root”));
Your application will display:
I have a book!
Before React 16.8, class components were the only way to track state and lifecycle on a React component. Function components were considered “state-less”. With the addition of Hooks, function components are now almost equivalent to class components. The difference are so minor that you will probably never need to use a class component in React.
Even though function components are preferred, there are no current plans on removing class components from React.
Next: Props