React JS Tutorial: React Introduction and Project Setup

Introduction to React JS

React JS, often referred to simply as React, is one of the most popular JavaScript libraries used for building user interfaces (UIs). Whether you’re new to frontend development or an experienced developer, React has become a go-to tool for building complex, dynamic web applications. Its component-based structure allows for the creation of reusable UI components that can efficiently update and render as your data changes.

What is React JS?

React JS is an open-source JavaScript library developed by Facebook. It was introduced to solve the problem of building dynamic, fast, and scalable user interfaces. React primarily focuses on building the view layer of applications, which makes it an essential tool for creating complex front-end designs.

React as a JavaScript Library

Used for UI Interfaces

React is specifically designed to help developers build user interfaces. Unlike full-fledged frameworks, React only focuses on the “view” aspect of the Model-View-Controller (MVC) architecture. This enables developers to build fast and responsive applications that interact smoothly with users.

Component-Based and Reusability

React stands out because of its component-based architecture. Each part of a UI can be broken down into components, which are reusable and independent blocks of code. This makes the development process more efficient and easier to maintain.

Advantages of React

Performance

React’s virtual DOM (Document Object Model) is one of the key reasons it performs well. Instead of updating the entire UI when there’s a change, React updates only the parts that have changed, making the whole process faster.

Efficiency and Speed

React’s ability to efficiently update the DOM ensures faster rendering and response times, which makes it ideal for building large-scale applications with frequent user interactions.

Reusability of Components

The reusable nature of React components reduces development time. You can use a single component in multiple places within your application, avoiding duplication of code.

JavaScript Basics You Should Know Before Learning React

Before diving into React, there are some core JavaScript concepts that you need to be familiar with:

Arrays in JavaScript

Arrays in JavaScript are used to store multiple values in a single variable. Understanding how to manipulate arrays is crucial for working with dynamic data in React.

Strings in JavaScript

Strings are used to handle text in JavaScript. React often deals with string data, such as user input and API responses, so having a solid grasp of string manipulation is important.

Template Literals in JavaScript

Template literals allow for embedding variables and expressions inside strings using backticks (`), which is useful for rendering dynamic content in React.

Import and Export Modules

React uses ES6 module syntax to organize code. You need to know how to import and export functions, objects, or primitives between files to work effectively with React components.

Node.js Fundamentals

Node.js is a runtime environment that allows you to execute JavaScript code outside of a web browser, primarily on the server side. While JavaScript was originally designed to run only in browsers, Node.js extends its capabilities to build server-side applications, APIs, and backend services. It plays a crucial role in modern web development, especially in the JavaScript ecosystem.

Project Setup Overview

Before diving into building your first React project, let’s go through the necessary setup and tools you’ll need.

Node.js and NPM (Dependency Manager)

First things first, to work with React, you’ll need to install Node.js. Node.js allows JavaScript to run outside the browser, and it comes bundled with npm (Node Package Manager), which will help you manage the libraries and dependencies for your project.

You can download Node.js from here. Once installed, npm will automatically be available on your system.

Choosing the Right Editor: Visual Studio Code

For coding, we recommend using Visual Studio Code (VS Code), one of the most popular code editors for web development. It’s lightweight, comes with a rich set of extensions, and integrates seamlessly with React.

You can download VS Code from here.

Step-by-Step Guide: Creating a React Project

Now that you’ve got the basics ready, let’s move on to creating your first React project.

Two Ways to Create a React Project

There are two main ways to create a React project:

Option 1: Add the Script in HTML Pages

One simple way to get started is by directly adding React’s script to an HTML page. This approach is often used for small projects or demos.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Project</title>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
const element = React.createElement('h1', null, 'Hello, React!');
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
</html>

Option 2: Using NPM Command

The most common and recommended way is to use npm. With npm, you can create a fully functional React project with all the modern tools and configurations ready to go.

Getting Started with npx create-react-app

The easiest way to bootstrap a React project is by using the npx create-react-app command. This sets up a new React project in seconds.

Understanding the Command

The command looks like this:

npx create-react-app my-app

Here, npx is a package runner tool that comes with npm, and create-react-app is a package that sets up the project. You can replace my-app with the name of your project.

Running the Command and Initial Setup

After running the above command in your terminal or command prompt, it will automatically install all necessary files and dependencies. Once it’s done, you can navigate into your project folder using:

cd my-app

Understanding the Project Structure

Once your project is set up, you’ll see several folders and files inside your project directory.

Public Folder

Contains your index.html, which is the main HTML file used by React to render your application.

src Folder

This is where all your React components and logic will live. The main file you’ll focus on here is App.js, which serves as the root component.

package.json File

This file keeps track of your project’s dependencies, scripts, and some basic configuration.

JSX: Mixing HTML with JavaScript

What is JSX?

JSX (JavaScript XML) allows you to write HTML-like syntax directly in your JavaScript code, making it easier to create user interfaces.

JSX Syntax Basics

Here’s an example of JSX:

const element = <h1>Hello, world!</h1>;

It looks like HTML, but it’s actually JavaScript. You can use JavaScript expressions directly within JSX by wrapping them in curly braces {}.

Functional Components vs Class Components

Functional components are simple functions that return JSX, whereas class components use ES6 classes and have access to additional features like lifecycle methods.

Creating Your First React JS Component

We will create a simple component called Welcome that displays a greeting message. This component will take a name prop and render it as part of the message.

1. Open your App.js file in the src folder.
2. Replace the existing code with the following:

// Import React
import React from 'react';


// Main App component
function App() {
return (
<div>
 <h1>This is React JS First Project Form SmileyTricks.com </h1>
</div>
);
}

// Export the App component as default
export default App;

Explanation of This Code:

1. import React from ‘react’;

This line imports the React library, which is essential for creating components and using JSX. While React itself doesn’t always need to be explicitly called in functional components, importing it is still required to use JSX syntax, which allows you to write HTML-like code inside JavaScript.

2. function App() { … }

This defines a functional component named App. A functional component in React is a JavaScript function that returns JSX, which defines the user interface.

3. return ( … )

The return statement inside the App function returns JSX code. JSX is a syntax that looks like HTML but is actually JavaScript under the hood. It describes how the UI should look.

4. export default App;

This line exports the App component so it can be used in other parts of your application. In React, every component that you want to use in different files needs to be exported. By using export default, you’re making App the default export from this file, meaning it can be imported elsewhere like this:

This will run your React app in the browser, and you should see the message:

This will run your React app in the browser, and you should see the message:

Conclusion: Wrapping Up Your First React Project

By following the steps outlined above, you should now have a basic understanding of how to set up and create your first React project. React offers a powerful way to build interactive UIs, and once you grasp the basics, you can dive into more advanced topics like routing, state management, and hooks.