Getting Started with React.js

Getting Started with React.js

  • The big advantage of JSX is that it lets you include HTML in your JavaScript files it makes defining React elements easier.
  • 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.

React.js is a flexible and component-based JavaScript library for building interactive user interfaces. It was created and open-sourced by Facebook and is used

@christianmaioli: Getting Started with React.js

React.js is a flexible and component-based JavaScript library for building interactive user interfaces. It was created and open-sourced by Facebook and is used by many leading tech companies such as Dropbox, AirBnB, PayPal, and Netflix. React allows developers to create data-heavy apps that can be painlessly updated by re-rendering only the necessary components.

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.

You can also use the minified versions of the above JavaScript files:

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:

URL:

If you want to read more on how to install React, check out the installation guideline of the docs.

Although it’s not compulsory, you can use the JSX syntax in your React apps. JSX stands for JavaScript XML, and it transpiles into regular JavaScript. The big advantage of JSX is that it lets you include HTML in your JavaScript files, therefore it makes defining React elements easier.

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.

React components are reusable, independent UI units in which you can easily update the data. A component can be made of one or many React elements. Props are arbitrary inputs you can use to pass data to a component. A React component works similar to JavaScript functions—every time it’s invoked, it generates some kind of output.

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:

Getting Started with React.js