DEV Community

loading...

Introduction to React.js

yahaya_hk profile image Yahaya Kehinde ・2 min read

Today is officially the first day in my attempt to document my process of learning to program and I’m starting with my React.js journey.

What is React?

The official documentation simply defines React as a JavaScript library for building user interfaces. It is responsible for presenting HTML to the user and handling how the user interacts with your application or website. React was created by Facebook a few years ago and has continuously increased in popularity to become one of the most popular JavaScript libraries.

What are the Unique features of React?

React is particularly useful in creating Single Page Applications (SPA) and works on the concept of re-usable class or function based components. It works to create interactive user interfaces that re-render automatically whenever a component is changed without having to reload the web page. This feature helps to promote a better user experience and reduces run time when ever the user loads up the page in a browser.

How to create a new React App

The first step in creating a new React App is to install Node.js® which is a JavaScript runtime built on Chrome's V8 JavaScript engine. This can be gotten from “nodejs.org”. After installing it, open up the terminal which on a MacBook can be found by pressing Command - spacebar to launch Spotlight and type "Terminal," . In order to check if node.js was successfully installed , type the command prompt ‘npm -v’ into the terminal. This should bring up the version you currently have installed.

Alt Text

Next, find the directory you want to create a new React app in by using the command line “cd ..” to go up a directory. Then create a new React app by typing the command “npx create-react-app name-of-app” and wait a few minutes for the meta data and extension for your new app to be downloaded. Once you see the prompt “happy hacking” , open up the app by using the command line “cd name-of-app” followed by “npm-start” and grant permission for the terminal to open up your browser.

Alt Text

Congratulations! You have created your first React Application 😊😊

Discussion (0)

pic
Editor guide