How to setup and learn React application for beginners

enter image description here React is a popular JavaScript framework for creating front-end applications. Originally created by Facebook, it has gained popularity by allowing developers to create fast applications using an intuitive programming paradigm that ties JavaScript with an HTML-like syntax known as JSX.

Starting a new React project used to be a complicated multi-step process that involved setting up a build system, a code transpiler to convert modern syntax to code that is readable by all browsers, and a base directory structure. But now, Create React App includes all the JavaScript packages you need to run a React project, including code transpiling, basic linting, testing, and build systems. It also includes a server with hot reloading that will refresh your page as you make code changes. Finally, it will create a structure for your directories and components so you can jump in and start coding in just a few minutes.

Prerequisites

  1. Node installed on your system available at nodejs.org.
  2. I highly recommend using the editor Visual Studio Code available at code.visualstudio.com.
  3. It will also help to have a basic understanding of JavaScript, along with a basic knowledge of HTML and CSS

How to create simple React application npx instaled and available with Node, Gives us the ability to use the create-react-app package without having to first install it on our computer, which is very convenient.

$> npx create-react-app my-react-app

A folder named "my-react-app" will be created where we specified on our computer and all of the packages it requires will be automatically installed.

To create a React app that uses TypeScript, we can use the Create React App TypeScript template:

$> npx create-react-app my-react-app --template typescript

Once our project files have been created and our dependencies have been installed, our project structure should look like this:

    my-react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
└── src

How to Run your React Project

To start your React project, you can simply run:

$> npm run start

OR

$> npm start

When we run our project, a new browser tab will automatically open on our computer's default browser to view our app.

The development server will start up on localhost:3000 and, right away, we can see the starting home page for our app.

App.js file within the src folder. If we head over to that file, we can start making changes to our app code.

Facebook Facebook Twitter Reddit

Leave a Reply