Code Playground.

Presentation 

Respond is a mainstream JavaScript system for making front-end applications. Initially made by Facebook, it has picked up notoriety by permitting designers to make quick applications utilizing an instinctive programming worldview that ties JavaScript with a HTML-like sentence structure known as JSX. 

Beginning another React venture used to be a confused multi-step process that included setting up a form framework, a code transpiler to change over present day language structure to code that is coherent by all programs, and a base index structure. In any case, presently, Create React App incorporates all the JavaScript bundles you have to run a React venture, including code transpiling, fundamental linting, testing, and manufacture frameworks. It likewise incorporates a server with hot reloading that will revive your page as you make code changes. At long last, it will make a structure for your registries and parts so you can hop in and begin coding in only a couple of moments. 

At the end of the day, you don't need to stress over designing a form framework like Webpack. You don't have to set up Babel to transpile you code to be cross-program usable. You don't need to stress over the vast majority of the confused frameworks of present day front-end advancement. You can begin composing React code with insignificant arrangement. 

Before the finish of this instructional exercise, you'll have a running React application that you can use as an establishment for any future applications. You'll make your first changes to React code, update styles, and run a form to make a completely minified variant of your application. You'll likewise utilize a server with hot reloading to give you moment input and will investigate the pieces of a React venture inside and out. At long last, you will start composing custom parts and making a structure that can develop and adjust with your undertaking. 

Essentials 

To follow this instructional exercise, you'll need the accompanying: 

Node.js adaptation 10.16.0 introduced on your PC. To introduce this on macOS or Ubuntu 18.04, follow the means in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA segment of How To Install Node.js on Ubuntu 18.04. 

It will likewise assist with having an essential comprehension of JavaScript, which you can discover in the How To Code in JavaScript arrangement, alongside a fundamental information on HTML and CSS. 

Creating a New Project with Create React App 

In this progression, you'll make another application utilizing the npm bundle supervisor to run a remote content. The content will duplicate the vital records into another index and introduce all conditions. 

At the point when you introduced Node, you additionally introduced a bundle overseeing application called npm. npm will introduce JavaScript bundles in your venture and furthermore monitor insights regarding the undertaking. In the event that you'd prefer to get familiar with npm, investigate our How To Use Node.js Modules with npm and package.json instructional exercise. 

npm likewise incorporates an instrument called npx, which will run executable bundles. This means you will run the Create React App code without first downloading the undertaking. 

The executable bundle will run the establishment of make respond application into the catalog that you determine. It will begin by making another task in an index, which in this instructional exercise will be called advanced sea instructional exercise. Once more, this index doesn't have to exist already; the executable bundle will make it for you. The content will likewise run npm introduce inside the venture registry, which will download any extra conditions. 

To introduce the base venture, run the accompanying order:

npx create-react-app react-tutorial

This command will kick off a build process that will download the base code along with a number of dependencies.

When the script finishes you will see a success message that says:

Output
...
Success! Created react-tutorial at your_file_path/react-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-tutorial
  npm start

Happy hacking!

your_file_path will be your current path. If you are a macOS user, it will be something like /Users/your_username; if you are on an Ubuntu server, it will say something like /home/your_username.

You will also see a list of npm commands that will allow you to run, build, start, and test your application. You’ll explore these more in the next section.

Note: There is another package manager for JavaScript called yarn. It’s supported by Facebook and does many of the same things as npm. Originally, yarn provided new functionality such as lock files, but now these are implemented in npm as well. yarn also includes a few other features such as offline caching. Further differences can be found on the yarn documentation.

If you have previously installed yarn on your system, you will see a list of yarn commands such as yarn start that work the same as npm commands. You can run npm commands even if you have yarn installed. If you prefer yarn, just replace npm with yarn in any future commands. The results will be the same.

Now your project is set up in a new directory. Change into the new directory:

cd react-tutorial

You are now inside the root of your project. At this point, you’ve created a new project and added all of the dependencies. But you haven’t take any actions to run the project. In the next section, you’ll run custom scripts to build and test the project.

Starting the Server

In this step, you will initialize a local server and run the project in your browser.

You start your project with another npm script. Like npm test, this script does not need the run command. When you run the script you will start a local server, execute the project code, start a watcher that listens for code changes, and open the project in a web browser.

Start the project by typing the following command in the root of your project. For this tutorial, the root of your project is the react-tutorial directory. Be sure to open this in a separate terminal or tab, because this script will continue running as long as you allow it:

npm start

You’ll see some placeholder text for a brief moment before the server starts up, giving this output:

Output
Compiled successfully!

You can now view react-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

If you are running the script locally, it will open the project in your browser window and shift the focus from the terminal to the browser.

If that doesn’t happen, you can visit http://localhost:3000/ to see the site in action. If you already happen to have another server running on port 3000, that’s fine. Create React App will detect the next available port and run the server with that. In other words, if you already have one project running on port 3000, this new project will start on port 3001.

If you are running this from a remote server you can still see your site without any additional configuration. The address will be http://your_server_ip:3000. If you have a firewall configured, you’ll need to open up the port on your remote server.

In the browser, you will see the following React template project.

As long as the script is running, you will have an active local server. To stop the script, either close the terminal window or tab or type CTRL+C or ?-+c in the terminal window or tab that is running your script.

At this point, you have started the server and are running your first React code. But before you make any changes to the React JavaScript code, you will see how React renders to the page in the first place.

You can check full code here: Lokesh Gupta React