React from scratch: Part 1

React from scratch: Part 1

In this series, we will get to know React, Webpack, Babel, and Redux. For the first part of this series, we will begin with a basic setup. Let’s get started!

In this series, we will get to know React, Webpack, Babel, and Redux. For the first part of this series, we will begin with a basic setup. Let’s get started!

Prerequisites

In this guide, we will be using npm to install all the dependencies and kick start the project.

So make sure you got npm installed on your machine!

Basic setup

First of all, we create a folder to store our project in and go into it to initialize npm:

$ mkdir getting-started-react
$ cd ./getting-started-react
$ npm init -y

Now we are gonna add some of our dependencies and a new folder called src:

$ mkdir src
$ npm i react react-dom

Inside that src directory we need to create a file called index.js with the following content:

import React, { StrictMode } from ‘react’;
import ReactDOM from ‘react-dom’;

const App = () => {
  return <div>Hello World!</div>;
};
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.querySelector(‘#root’),
);

The function App returns a div with the content Hello World.

programming javascript react-js-tutorials react webpack

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

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React JS Tutorial For Beginners In Hindi | What Is React JS | React JS Training

Great Learning brings you this React JS Tutorial For Beginners in Hindi Session. React JS is a JavaScript library that is developed and maintained by Facebook developers. If you want to build any sort of single page application, then React should be your go-to language. React also provides a way to reuse our UI components.

React JS Tutorial | What is React JS? | React JS Project

React JS Tutorial will provide you with a detailed and comprehensive knowledge about React. In this React JS Tutorial for Beginners you will learn React concepts from scratch and also how to create your first project in React.

Learn React.js | React.js Tutorial | React.js Training

This Edureka video on 'Learn React' will guide your path towards learning React.js in the best manner.

React JS crash course tutorial - React router

This tutorial introduces the concept of react routing.