Getting Started With React

#react #javascript #tutorial #webdev

Introduction

This article intends to provide you with all you need to know to get started with React. Here, you will understand the power of a front-end framework, and the concepts needed to assist you to begin building scalable applications with React.

What is React

React is a JavaScript library for building user interfaces.

It is popular for being declarative, efficient, and flexible. It lets you build complex user interfaces from small, isolated code called components.

Why React

The 2022 Stack Overflow Developer Survey shows React to be one of the most effective and popular web frontend frameworks.
This is a result of the following React features:

Declarative: React allows you to define the final state of your desired user interface.
Component reusability: React allows you, as a developer, to create components only once and reuse them throughout your application. This reduces code duplication and shortens the development process guaranteeing uniformity across the entire application.
SEO friendly: React has a positive impact on SEO (Search Engine Optimization) since it creates SPAs (Single Page Applications) that need JavaScript to display content so that it gets rendered.
Open-source support: due to its popularity, React is well supported and maintained by the open-source community.
Design flexibility: React is not opinionated, so it won't compel you to adhere to any particular design patterns, project organizational framework, or logical reasoning. Everything of it is up to you.
Smaller learning curve: Compared to other Frontend libraries and frameworks, React is easier to learn, especially when familiar with JavaScript and HTML fundamentals.

Getting started

To get started with React, you need to understand one of the major pillars of React, Components.

Components

React makes use of reusable components in building its applications. A simple React application is divided into several independent and reusable pieces.

React provides two types of components:

Function components: Components defined using JavaScript functions


function App() {
   return <div className="App">Hello World!</div>;
}

Class components: Components defined using JavaScript classes


class App extends Component {
   constructor() {
       super()
   }

   render() {
       return (
           <div className="App">
               Hello World!
           </div>
       )
   }
}

Read this article for more about React Components

Now, let's get to a more practical approach to learning React.

Installation

create-react-app is the official way to create single-page applications with React.

To create a React application,

Run the command below on a terminal.

npx create-react-app my-first-react-app

The above signifies that the application has been created successfully under the directory my-first-react-app

Navigate into the applications directory using the command below.

cd my-first-react-app

The directory looks like this:

Let's discuss each folder in detail:

node_modules: This folder contains all installed dependencies and packages the React application needs. In essence, the packages you wish to import into your application are stored here.
public: This folder contains a variety of files but the major ones to consider are the index.html and the manifest.json files. Here,
- the index.html file serves as a template for generating the main file which gets rendered on the browser.
- the manifest.json file contains metadata which determines the icons, names and branding colours to use when a user adds the applications to their home screen.

Visit this web app manifest guide to get a better understanding of how this file affects the user experience.

src: This folder serves as the heart of the application's interface, containing all major components and styles created to run the application. It includes major components like:
- index.js, which serves as the entry point to the React application. It contains some syntax including the <App> component as a React element and the DOM element, root, as the supplied container. This root DOM element is referenced from the index.html.
- App.js which serves as the root component of the application. A typical React application structure would be to build React components and use this App component as a host to render them to the browser.
package.json This file includes a list of the packages your project can use and the versions of those packages on which it depends. Together with the package-lock.json, it makes your build repeatable and simpler to share with other developers.

Run The Application

To run your application

Ensure you are in the application's directory in your terminal

That is C:\users\...\my-first-react-app>

Run the command npm start
Open the http://localhost:3000 local server to view the application.

Congratulations! You have created your first React application.

Conclusion

This article has given you a rundown of the React frontend web library and its basic setup and structure. Now get creative and begin creating applications with React.

Visit the React Documentation to get more tutorials and content on React