React basic 1 — "Hello React World". Setting Up Your First React App.

Initially introduced by Facebook, React is the popular JavaScript library for creating UI templates that render fast. React is component-based framework, and creates an in-memory cache with the virtual DOM-- it doesn't load the entire page each time, but it can only render specific components.

I took the crush course in Udemy by Stephen Grider (Modern React with Redux), and I wanted to take notes on the basic steps to create a simple React application for my future reference. For those of you who are interested in the in-depth understanding, please take his course!

For setting up the development environment especially for learning React, React provides create-react-app. In this post, I will highlight the key steps to create your first React application using create-react-app.

How to generate the first React application

Download link

Run below command in your terminal with the name you want for your project, at the directory you want.

npx create-react-app [your-project-name]

The project will be generated with some fundamental source files. Key files and directories generated are the following:

  • public - The directory where static elements like the index HTML file and images will be stored
  • src - The directory for react applications that you work on. What you made here is going to be compiled into the ES5 JavaScript Syntax
  • node_modules - The directory with all dependencies installed for the project
  • package.json - The file records the project’s dependencies and configure projects
  • package-lock.json - The file stores the dependency versions when it was initially installed.

As you perform create-react-app, basic app files will be generated in the src directory. To begin with a clean state, you can delete all these files and create a new index.js in the src directory. To begin with your first React project, you need to import react and react-dom dependencies to the index.js,

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

After importing dependencies, you will use the special HTML-like syntax called JSX to create a React component (regarding JSX, we will go over more in the next chapter). After creating the app construct with JSX, the render method is going to tell your application to display this JSX component inside of the #root element in the public index.html file.

// React component
const App = () => {
return <h1>Hello React World</h1>;
}

// Take the component and show it on the screen
ReactDOM.render(
<App />,
document.querySelector('#root')
);

After the setup with index.js is complete, run npm start command, which compiles the index.js to browser-friendly ES5 format of JavaScript, the the outcome should be displayed on your browser.

Table of content

React basic 1 — “Hello React World”. Setting Up Your First React App.

React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML

React basic 3 — Reusable Functional Components

React basic 4 — Class Based Component and Lifecycle Methods

React basic 5 — Basic Event Handlers

React basic 6 — Use Axios Library to Fetch Data

React basic 7 — Render a List based on the API response

React basic 8 — Build React App and Host it on Server

Reference

Modern React with Redux by Stephen Grider | Udemy

Create a New React App | React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store