How to get started with React? A Beginner's Guide!

How to get started with React? A Beginner's Guide!

·

2 min read

Hello People👋 on Hashnode! As a beginner in React, everyone faces the problem on how to get start with react, where to work, what are the prerequisites etc. Even I faced these problems as a newbie. This blog will save you.

Contents

  • 🤔 Who needs this blog?
  • 🧰 Requirements
  • 👨‍💻 Getting started with React

Who needs this blog?

A guy who learned basic HTML, CSS and Vanilla JavaScript and is about to learn React JS needs this blog. Because, working with basic web development just needs a code editor like VS Code, Atom or Sublime Text, they don't need any additional installations other than extensions available in the editor. But, React JS needs additional installations.

Requirements

  1. VS Code (recommended)
  2. Node JS (Install Nodejs)
  3. NPM (Node Package Manager)

Getting Started with React

  1. Open VS Code and open a fresh directory.

  2. Open terminal by pressing Ctrl + Shift + ` and type the command npx install create-react-app my-app. This command works only on installation of NodeJS and NPM. It creates a folder named my-app. The folder name can be your wish. The installation takes few seconds to minutes based on your internet speed.

  3. After installing, the terminal shows the completion status and my-app folder contains necessary files to work with react. Folder Structure Here, some files are not so important, so delete the unnecessary files.

Necessary Files.jpg

Folder Structure

  • node_modules: This folder contains all the modules to work with react and installing other third party modules also gets saved in this folder.
  • index.html: In React, there nothing to do with the index.html file. All html content are written as JSX in the App.js file.
  • App.js file: It is the JS file which renders all the other components used.
  • package.json: This file contains all the project details like working folder, dependencies installed, versions etc. in JSON format. This package.json file is enough to reuse the modules in other react project.

That's it. As simple as that! Develop your first React project.

Connect with on GitHub,Twitter. Let's code and explore together. Hope you find this blog useful.

Happy Coding!😁