Hello World Application in React
In the past tutorials, we learnt the various ways of using the ReactJS library in our project, that is: by adding React directly from the CDN to our HTML website or by using create-react-app command via the terminal.
In this tutorial, we will create a simple hello world application in react. We will be creating our application via the command prompt using the create-react-app command.
To follow along with this tutorial, you need to have NodeJS installed and running on your system. This you can download from its official website here.
Once you have this properly installed, you can head over to your command prompt and start running NPM commands.
Creating the Application
To create our hello world application, open the command prompt of your local machine and type the following command:
```npm install -g create-react-app ```
This command will install the react `create-react-app` package globally in our system, enabling us to run commands using the key word `create-react-app`
After this installation, simply create your react application with the desired name of choice. In this tutorial, our application name will be "hello-react". Hence to create this application use the following command
This will take some time to bundle and download all the required files depending on your internet speed.
Running the Application
When the application creation is complete, use the following command to open the application on an editor (visual studio code in this case) and the run the application to see it live on your browser
cd hello-react code . npm start
The command above will open the application on the visual studio code editor, and run the application live on port 3000.
Form the visual studio code text editor, edit the src/App.js file to say hello world to the react world. Your src/App.js file should be similar to the code snippet below.
On your browser, the following screen should be seen
- New Content published on w3resource :
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework