Create Your First React App In Easy Steps

Create Your First React App In Easy Steps

React is an open source Javascript library for building dynamic apps. React is a lightweight library for building fast and interactive user interfaces. The following article of Adesh posted on zeptobook.com will guide the easy steps of creating your first react app.

Originally published by Adesh at zeptobook.com

What is React?

 Unlike Angular, which is a framework (or a complete solution), React is essentially a ‘view library’. It only takes care of the view or what is rendered in the DOM. It doesn’t have an opinion about other aspects of an app such as routing, calling HTTP services, etc. For those concerns, you need to use other libraries. This means you get the freedom to choose the libraries that you’re familiar with or prefer.

React is Declarative

With the help of React, you can make very interactive UI without much pain. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

React Components

Components are the building block of React apps. A component is a piece of UI. It has data and describes what that piece of UI should look like. When building React apps, we build a bunch of small, independent and reusable components and compose them to make complex UIs. So every React app is essentially a tree of components. If you’ve worked with Angular 2+, this should sound familiar.

React is Component-based Architecture

React is based on component based architecture. You can build encapsulated components that manage their own state, then compose them to make complex UIs.

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

Reusable Components

You can develop reusable components without much hassle.

Prerequisites

We’ll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you’re coming from a different programming language. We’ll also assume that you’re familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes.

Setting up the Development Environment

Before going to create your first react app, let’s first setup the development environment.

First check, whether you have Node.js an NPM installed in your machine. You can go to nodejs.org and install Node, if you don’t have.

Once you have installed Node and NPM in your machine, choose your code editor. Feel free to use any editors you prefer. My preferred editor is Visual Studio Code/VSCode which you can get from code.visualstudio.com

npx create-react-app my-app

This command will create my-app folder having react app files. Now, go to my-app folder and type this command.

cd my-app

Now, type this command to run your react app.

npm start

This command will show below message in your terminal window, and open the app in browser window. The app url will be http://localhost:3000/ in your browser tab.

React App Project Structure

Now, open your code editor, here I have Visual Studio Code, so I am going to open our my-app in the VS Code editor to see the react app project structure.

This is very basic project structure.

You will have node_modulespublic and src folders in the root of the my-app folder. Along with these folders, you can see package.json file as well.

  • node_modules: where all the 3rd-party dependencies (libraries) are stored. We never have to touch this.
  • public: where we have public assets of our app such as index.html, logo, images, etc.
  • src: where we have the source code of our React app.

Open up package.json. Chances are you’re already familiar with this file. If not, package.json is like an identification card for a project. It includes the project’s name, version, dependencies, etc.

Note that under dependencies, we only have 3 dependencies:

Next is the index.html page, located in the public folder. If you do link up any external stylesheets, or need to add bootstrap, or another feature, this is where you would add it.

You can also change the title here. Other than that, you won’t usually need to touch this file very much. You will also notice the div with the id of “root”. This is where all of the content will be output. You don’t need to change that, but just know that it’s there.

The next file you may want to look at is your index.js file in the src folder. Here, we’re importing React and the ReactDOM. We are also rendering everything here to the root element.

Create Your First React Element

Now, we are going to create our first react element. So, first of all, delete all files from the src folder, and create a file index.js in same folder.

Write the below mentioned code in this file, and save the file.

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello ZeptoBook!</h1>;

ReactDOM.render(element, document.getElementById('root'));

As soon as you saved your file, our first element H1 will be displayed on the browser window.

Code Analysis

Let’s have a look at above code.

On the top 2 lines, we are importing react modules.

import React from ‘react’;
import ReactDOM from ‘react-dom’;

On line 4, we are creating a constant named element, and created H1 tag inside this element.

Finally, the last line of code will render our react element.

ReactDOM.render(element, document.getElementById(‘root’));

ReactDOM.render() will render this element in DOM. If you notice, we used root as our container to render this element. You can find the root element in /public/index.html file.

<div id=”root”></div>

So, here we learn, how to setup and run our react app very easily without any hassle.

Originally published by Adesh at zeptobook.com

=======================================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Understanding TypeScript

☞ Typescript Masterclass & FREE E-Book

☞ React - The Complete Guide (incl Hooks, React Router, Redux)

☞ Modern React with Redux [2019 Update]

☞ The Complete React Developer Course (w/ Hooks and Redux)

☞ React JS Web Development - The Essentials Bootcamp

☞ React JS, Angular & Vue JS - Quickstart & Comparison

☞ The Complete React Js & Redux Course - Build Modern Web Apps

☞ React JS and Redux Bootcamp - Master React Web Development

reactjs web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.