- A component can be made of one or many React elements.
- A React component is built up of some or many React elements that are the smallest units of React apps .
- Tags that start with uppercase (upper camel case) are rendered as React components .
- It’s recommended using React with Babel that allows you to use the ECMAScript6 syntax and JSX in your React code.
@christianmaioli: Getting Started with React.js
React is the View layer from the MVC software design pattern, and it mainly focuses on DOM manipulation. As these days everyone talks about React, in this post we are taking a look at how you can get started with it.
You can install React either with the npm package manager or by adding the necessary libraries manually to your HTML page. It’s recommended using React with Babel that allows you to use the ECMAScript6 syntax and JSX in your React code.
section of your HTML document:
Instead of downloading them, you can add the React scripts from CDN as well.
If you’d rather install React with npm, the best way is to use the Create React App Github repo created by Facebook Incubator — this is also the solution that the React docs recommend. Apart from React, it also contains Webpack, Babel, Autoprefixer, ESLint, and other developer tools. To get started, use the following CLI commands:
If you want to read more on how to install React, check out the installation guideline of the docs.
Here are the most important things to know about JSX:
If you want to know more about how to use JSX with React check out this page from the docs, and for the default JSX documentation you can take a look at the JSX wiki.
React has a component-based architecture in which developers create reusable components in order to solve different problems. A React component is built up of some or many React elements that are the smallest units of React apps.
attribute in order to make Babel perform the compiling.
). You can read more on how React elements work in the “Rendering Elements” section of the docs.
You can use either the classic function syntax or the new ES6 class syntax to define a React component. In this article, I’ll use the latter, as Babel allows us to use ECMAScript 6. If you are interested in how to create a component without ES6, take a look at the Components and Props page of the docs.
Below, you can see the simple React component we are going to create as an example. It’s a basic notification that the user sees after logging into a site. There are three pieces of data that will change from case to case: the name of the user, the number of messages, and the number of notifications, we will pass these as props.
method (we’ve already used the latter in the previous section).
The matching HTML page is the following:
In the React docs, there are many other cool examples on how to build & manage React components, and what else to know about props.
With React, Facebook introduced a new kind of framework into front-end development that challenges the MV* design pattern. If you want to understand better how it works and what you can and cannot achieve with it, here are some interesting articles that can help: