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
Step 1. Install Node (If you haven't installed yet)
Step 2. Generate an app with create-react-app
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.
