Xampp React Js

Posted on  by admin

Npx create-react-app reactadduser cd reactadduser npm start // run the project 2. Now we need to run below commands to get bootstrap(for good layout), react router and axios(to post data request to php) modules into our react js app: npm install -save react-router-dom npm install bootstrap -save npm install axios -save npm start 3. The first step is to install the Local PHP server software in your computer, We are using the XAMPP in our tutorial, So if you have n’t install the XAMPP then download from its official website, It’s free. After installing the XAMPP just start the Apache and MySQL server.

  1. Xampp Reactjs
  2. Xampp React Js Online
  3. Xampp React Js Free
  4. Xampp React Js Tutorial
  5. Xampp React Js Download

This tutorial shows how to create a Server-Side Filtering for jqxGrid with React. It will request data from the server for a new filter or when clearing the filtering. The Server-Side script will provide the related data as a JSON object.

Overview

We will create our simple server with the powerful Node.js platform, we will handle our queries and get the data from the familiar Northwind database. For this purpose, we need to include a few plugins to achieve that we want - like express and mysql for our server script. About the Client-Side, we will use the jqxGrid on the React library. We assume that this tutorial is known and we will continue from this position with the next steps.

Getting Started

The next step is to install the desired plugins. For this purpose, we open the terminal and navigate to the root of the current project.

I. Let's install the express package. In the terminal use the command below:

II. Install the mysql package. Enter the following command:

Xampp Reactjs

Xampp React Js

Review of the current state

The package.json file should have dependencies for the newly added plugins. How to create it you can look at this.

Start our XAMPP server

We need to connect with our database. In our tutorial, we will use the Northwind database. For this purpose we will use the XAMPP with the same success we could use WAMP or another alternative. Here we will skip the steps of the installation of these platforms because we assume that this is known already.

Xampp React Js

We need to start the first two options - Apache and MySQL as in the image above. This is enough to proceed with the next steps. To create one fully working example.

Xampp React Js Online

Server-Side - Handling requests with Node.js

The prepared example with jqxGrid will make requests to the server with a bunch of extra arguments. The jqxGrid automatically passes the Sort, Page and Filter parameters (Read more about that here). Important for us now are filterscount, filtervalue, filtercondition, filterdatafield and filteroperator because we make a Server-Side Filtering scenario. We will create a server.js file that will do the mentioned above. The file will be in one level up of the Reactmy-app folder.

In this file, we connect to the Northwind database. The default port React project running is 3000 and for this purpose we will set the port of the Node.js server to the 4545.

Client-Side - Visualizing the data in jqxGrid

We have a lot of examples in our React demos section, especially for the jqxGrid. Which can be used to create the desired structure and to use the most suitable approach for us. Also, we suppose that we already are familiar with the Create jQWidgets React App TSX tutorial. Based on these points we will start directly with the editing. Navigate to the root/my-app/src folder. Let's make the following changes:

App.tsx:

Summary

We use a lot of different technologies to achieve Server-Side Filtering.

  • XAMPP - to connect to the MySQL with the Northwind database
  • Node.js - to create a simplified server application
    • express plugin - handling different routes
    • mysql plugin - for SQL queries to the database
  • React - our Client-Side technology
  • jqxGrid - visualize the data from the database

Required Final Steps

We should run everything and we should have one fully working jqxGrid React example with Server-Side Filtering. The XAMPP should be launched as we described before.

The next step is to run our Node.js server. Open the terminal with the root directory (/root/server.js) of our application and type:

This will execute our server.js file and our server will run.

Now we should open another terminal with the root (/root/my-app/) of our React project. Type the familiar command:

This should run our React project at the following port:

Final Result

Contents

  • 2 Installing React in plain HTML
  • 3 Installing React using Node JS (CLI)

React JS Development Environment Setup using NODE JS

React JS Installation Process: We cannot start working on a JavaScript framework without knowing about the installation of the framework. In this chapter we will learn the following things:

  • Installing React in plain HTML.
  • Installing React using Node JS.
  • Hello World Example in Node JS.
  • ReactJS.

NOTE: Remember I will use Node JS CLI in future chapters because CLI is very important rather than React in plain HTML. Every ReactJS project developers use. Node JS to start to React to JS projects. So we will focus on learning Node JS based React”.

Before getting started with a programming language. It is important to set up its environment, with ReactJS we need to set up the ReactJS environment. ReactJS can be installed in two ways:

Installing React in plain HTML

To install react in plain HTML, we need the following libraries to include in our web app and Babel as JavaScript preprocessor to process ES6 standard:

React Itself

React DOM

Babel

While including these libraries, Our Initial React Application should look like this:

React with HTML Example

If this code works successfully, our screen will be greeted with printed Hello World.

Installing React using Node JS (CLI)

To install React using CLI, we need Node JS to install, after Node JS install, go to CMD in windows or terminal in Mac/Ubuntu.

To create React App

Xampp React Js Free

To create React App within Node JS(CLI) then use the following command.

This will install create-react-app globally that will help us to create apps easily and anywhere on our computer. Remember if you are a PHP developer, you don’t need to put REACT JS applications in server like www folder of Xampp and htdocs of Xampp.

To Create Directory

Xampp React Js Tutorial

When this installation gets complete, we can install react using:

This will create a my-app directory and will install a complete react app setup. ReactJS app will be available on http://localhost:3000, on a new app, a message will be print like this

Directory Explanation

After installation of ReactJS CLI application, The ReactJS application folder structure should look like this:

So there are three folders, node_modules, public,node_modules: Node modules contains all important libraries like React, react DOM, react-router, etc.

Public: Public folder contains public assets such as images, icons, files and other important files that can be imported to the app.

src: “src” stands for source, this folder contains JavaScript source files or react app, Which is built on JavaScript, It means this folder contains JavaScript files.
Let’s create a hello world example in the react CLI app. Now delete all files in the src folder, make it empty. Now create two files in the src folder,

  • index.js
  • Hello World.js

React JS CLI app Example

src/index.js

src/HelloWorld.js

React JS CLI app Example Output

This will print hello world on screen.

Hello World

So far we have learned about

  • React
  • Principles of React
  • Creating an App in React
React

In this chapter, we have learned how to install ReactJS and created a hello world example. Here is the exercise in the last:

Xampp React Js Download

Hello World Example in Node JS

src/HelloWorld.js

src/index.js

React JS Summary

We have ended our chapter and we have learned how to create an application. So here are some questions.

  • What is create-react-app?
  • What is the node_modules folder and why it is used for?

Answers for the questions:

What is create-react-app?

create-react-app is CLI command, this command is provided by ReactJS to install Node JS based ReactJS Application.

We can install this command by using:

This will install this CLI command globally so we can install by:

What is a node_modules folder and why it is used for?

node_modules folder contains build tools. node_modules folder contains all libraries which are installed using npm install or yarn install. You will another file package.json, which defines libraries that will install.