Introduction And Installation of ReactJs
React is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by Facebook. Facebook is continuously working on the React library and enhancing it by fixing bugs and introducing new features. This tutorial starts with the architecture of React, how-to guide to setup projects, creating components, JSX and then walks through advanced concepts like state management, form programming, routing and finally conclude with step by step working example.
Audience
This tutorial is prepared for professionals who are aspiring to make a career in the field of developing front-end web application. This tutorial is intended to make you comfortable in getting started with the React concepts with examples.
Prerequisites
Before proceeding with the various types of concepts given in this tutorial, we assume that the readers have the basic knowledge in HTML, CSS and OOPS concepts. In addition to this, it will be very helpful, if the readers have a sound knowledge in JavaScript.
ReactJS is a simple, feature rich, component based JavaScript UI library. It can be used to develop small applications as well as big, complex applications. ReactJS provides minimal and solid feature set to kick-start a web application. React community compliments React library by providing large set of ready-made components to develop web application in a record time. React community also provides advanced concept like state management, routing, etc., on top of the React library.
Features
The salient features of React library are as follows −
· Solid base architecture
· Extensible architecture
· Component based library
· JSX based design architecture
· Declarative UI library
Benefits
Few benefits of using React library are as follows −
· Easy to learn
· Easy to adept in modern as well as legacy application
· Faster way to code a functionality
· Availability of large number of ready-made component
· Large and active community
Applications
Few popular websites powered by React library are listed below −
· Facebook, popular social media application
· Instagram, popular photo sharing application
· Netflix, popular media streaming application
· Code Academy, popular online training application
· Reddit, popular content sharing application
As you see, most popular application in every field is being developed by React Library.
Welcome to React
We’ll be using the create-react-app generator for this tutorial. To use the generator as well as run the React application server, you'll need Node.js JavaScript runtime and npm (Node.js package manager) installed. npm is included with Node.js which you can download and install from Node.js downloads.
Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version in a terminal or command prompt.
You can now create a new React application by typing:
npx create-react-app my-appWhere my-app is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.
Note: If you’ve previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version.
Starting Application
To start application you have to change directory first. So Type command as given in the above screen.
Type cd my-app and hit enter.
After that type npm start and hit enter. Your my-app application will get open in the browser. It should be hosted at http://localhost:3000/ url.
Your internet speed and laptop configuration are crucial for using the create-react-app command. A good internet connection and well-configured laptop can ensure smooth running of create-react-app. For slow internet speeds, an offline version can be downloaded, while optimization tips can help with slow laptops. Online code editors can also be used, but local development is better for large-scale projects.