ReactJs

Getting Started with React: The Basics

Posted on by thuan

React is an open-source JavaScript library used for building user interfaces. It was developed by Facebook and is now widely used by developers all over the world. React uses a component-based architecture, making it easier to manage and reuse code.

In this article, we will explore the basics of getting started with React.

Installation

The first step to getting started with React is to install it. React can be installed using Node Package Manager (npm) or Yarn. To install React using npm, open the terminal and type:

javascript
npm install react

This will install React and its dependencies.

Creating a React Component

To create a React component, we first need to import the React and ReactDOM libraries. React is the core library, and ReactDOM is used for rendering React components in the browser.

javascript
import React from 'react';
import ReactDOM from 'react-dom';

Once we have imported the libraries, we can create a React component using the React.createClass method. This method takes an object as an argument, which defines the component’s behavior.

javascript
const HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Hello World!</h1>
      </div>
    );
  }
});

In the above code, we have defined a simple React component called HelloWorld that renders a div containing an h1 element with the text “Hello World!”.

To render this component, we need to call the ReactDOM.render method and pass in the component we want to render and the element where we want to render it.

javascript
ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root')
);

In the above code, we are rendering the HelloWorld component inside an HTML element with an ID of root.

JSX

The above code uses a syntax called JSX, which is a syntax extension for JavaScript that allows us to write HTML-like syntax within JavaScript code. JSX makes it easier to write and read code by allowing us to write HTML and JavaScript together.

To use JSX, we need to include the babel library in our project. Babel is a JavaScript compiler that transforms JSX into regular JavaScript.

javascript
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

Conclusion

In this article, we have explored the basics of getting started with React. We learned how to install React, create a React component, and render it using the ReactDOM.render method. We also explored JSX, which is a syntax extension for JavaScript that allows us to write HTML-like syntax within JavaScript code. With the help of React, we can build complex user interfaces that are easy to manage and maintain.

0368826868