React JS Tutorial
React JS is a popular JavaScript library for building fast and interactive user interfaces. Created by Facebook, this library transforms how developers design web applications. This tutorial will guide you through the basics of React, preparing you to create your first React application.
Getting Started with React
Before writing code, ensure that you have the necessary tools installed.
Prerequisites
- Node.js: You need to have Node.js installed on your system. Download it from the official Node.js website.
- npm or yarn: npm comes with Node.js, but you can also use yarn. Install yarn from here.
Setting Up a React Application
Using Create React App is the simplest way to set up a new React project. This command-line tool generates all the boilerplate you need.
Sh
With these commands, you create a new React project named my-first-react-app. Navigate to the project directory, then start the development server. Open http://localhost:3000 in your browser to view your React application.
Understanding JSX
JSX stands for JavaScript XML. It allows you to write HTML directly within JavaScript. Understanding JSX is crucial in React.
Javascript
The code above creates a React element that renders as an h1 tag. JSX resembles HTML but is transformed into JavaScript objects.
Creating Components
Components in React are reusable UI pieces. They can be either class-based or function-based. We will focus on function-based components, which are more common in modern React.
Functional Component
Javascript
The Welcome component takes properties as an argument and returns a heading element.
Class Component
You can also create a class-based component.
Javascript
Both the functional and class components achieve the same result but are structured differently.
Props and State
Props (properties) are read-only attributes that pass data between components. State is managed within the component and can change over time.
Example: Using Props
Javascript
In this App component, the Welcome component receives a name through props and displays it.
Example: Using State
To include state in a functional component, use the useState hook.
Javascript
Here, useState initializes the state variable count to 0, while setCount updates count.
Handling Events
Handling events in React is similar to handling events on elements. The naming convention in React is camelCase, and you pass a function as the event handler.
Javascript
This example shows a button that alerts a message when clicked.
Conditional Rendering
Rendering different UI based on conditions is essential in any application. React simplifies this with conditional statements.
Javascript
In this example, Greeting displays a message based on the isLoggedIn value passed via props.
Lifecycle Methods
Class components provide lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount. These methods allow you to execute code at specific points in a component's lifecycle. Functional components use hooks like useEffect to access these lifecycle features.
Example: Using useEffect
Javascript
In this timer example, the useEffect hook sets up an interval timer to update the count every second and cleans up the timer when the component unmounts.
This tutorial has covered the fundamentals of React JS, including project setup, component creation, props and state management, event handling, conditional rendering, and lifecycle methods. You are now equipped to explore advanced features in React.
