code

Introduction to react

React is a JavaScript library for building user interfaces.

React is used to build single page applications.

React allows us to create reusable UI components.

Our “Show React” tool makes it easy to demonstrate React, it shows both the code and the result.

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

class Test extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

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

Create React App

In order to learn and test React, you should set up a React Environment on your computer.

This tutorial uses the create-react-app.

The create-react-app is an officially supported way to create React applications.

If you have NPM and Node.js installed, you can create a React application by first installing the create-react-app.

Install create-react-app by running this command in your terminal:

C:\Users\Your Name>npm install -g create-react-app

ou are now ready to create your first React application!

Run this command to create a React application named myfirstreactApp:

C:\Users\Your Name>npx create-react-app myfirstreactApp

The create-react-app will set up everything you need to run a React application.

Note: This tutorial uses create-react-app to demonstrate React examples. You will not be able to run the same examples on your computer if you do not install the create-react-app environment.

Run the React Application

If you followed the two commands above, you are ready to run your first real React application!

Run this command to move to the myfirstreactApp directory:

C:\Users\Your Name>cd myfirstreactApp

Run this command to execute the React application myfirstreactApp:

C:\Users\Your Name\myfirstreactApp>npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

The result:

What You Should Already Know

Before starting with React.JS, you should have intermediate experience in:

  • HTML
  • CSS
  • JavaScript

You should also have some experience with the new JavaScript features introduced in ECMAScript 6 (ES6).

Leave a Reply

Your email address will not be published. Required fields are marked *

error

Enjoy this blog? Please spread the word :)

RSS20
Follow by Email
Facebook20
Pinterest9