Scribd
Upload
391 views6 pages

ReactJs Step-By-Step Tutorial Series For Absolute Beginners - Part 1 - by Jinal Shah - Medium

This document provides an overview and introduction to ReactJS for absolute beginners. It outlines a 5 part tutorial series that will cover: installing ReactJS and understanding the directory structure; creating different types of components; component communication; building a Todo application with ReactJS; and deploying the application to GitHub pages. Key points about ReactJS are that it is a JavaScript library for building reusable UI components using JSX syntax and unidirectional data flow. The document then provides instructions on setting up a ReactJS development environment using Create React App and exploring the initial directory structure.

Uploaded by

Muhammad Tahir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
391 views6 pages

ReactJs Step-By-Step Tutorial Series For Absolute Beginners - Part 1 - by Jinal Shah - Medium

This document provides an overview and introduction to ReactJS for absolute beginners. It outlines a 5 part tutorial series that will cover: installing ReactJS and understanding the directory structure; creating different types of components; component communication; building a Todo application with ReactJS; and deploying the application to GitHub pages. Key points about ReactJS are that it is a JavaScript library for building reusable UI components using JSX syntax and unidirectional data flow. The document then provides instructions on setting up a ReactJS development environment using Create React App and exploring the initial directory structure.

Uploaded by

Muhammad Tahir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Open in app

jinal shah

Follow 339 Followers About

ReactJs Step-By-Step Tutorial Series for


Absolute Beginners — Part 1
jinal shah Mar 26, 2020 · 4 min read

Hello Readers,

Welcome to the ReactJs tutorial series for absolute beginners!!

Our series of these articles will give you complete knowledge about how to start with
ReactJs up to how you can deploy ReactJs application to Github.

Quick links for our ReactJs Series:

Tutorial #1 — Introduction and Installation of ReactJS (This Tutorial)

Tutorial #2 — ReactJS Components

Tutorial #3 — ReactJS Components Communication

Tutorial #4 — Build ToDo Application Using ReactJS

Tutorial #5 — Deploy ToDo Application to Github pages

Goals:
As you can see, We will start with installations — all the setups and tools required
for ReactJs.
Then we will create different types of components.

Then we will have components communication like how we can pass data from one
component to another component.

Then we will create a simple ToDo application using ReactJS and in this application,
we will also use bootstrap and font awesome icons for the styling purpose.

And finally, we will create our deployment build and publish our application to the
Github pages.

What is React?
React is a JavaScript library — one of the most popular.

React is an open-source project created by Facebook.

React is not a framework (unlike Angular).

React is used to build user interfaces (UI) on the front end.

React is used to build single-page applications(SPAs).

React is the view layer of an MVC application (Model View Controller)

ReactJS is a JavaScript library used for building reusable UI components. This means it
is a view library that uses components to change content on the page without refreshing
which is the core principle behind single-page applications.

React Features
JSX − JSX stands for JavaScript XML. JSX is JavaScript syntax extension. JSX allows
us to write HTML in React. It isn’t necessary to use JSX in React development, but it
is recommended. With JSX you can write expressions inside curly braces { }
including variables, functions, and properties.

Unidirectional data flow − React implements a one-way data flow. In React, data
values are passed to each component as properties in its HTML tags. The component
cannot directly modify any properties but can pass a callback function and with the
help of this, it can modify the data.
Setup and Installation
1) Install Node.js and npm globally on your machine. (we are using node.js version
12.16 currently, you can have any version >10.x and for npm, it should be > 5.2)

2) Facebook has created Create React App environment that will create a live
development server and automatically compile React and all other things. To create any
React application, run the following code in your terminal:

npx create-react-app todoapp

cd todoapp

npm start

(Note: If you’ve previously installed create-react-app globally via npm install -g create-
react-app, we recommend you to uninstall the package using npm uninstall -g create-
react-app to ensure that npx always uses the latest version)

The create-react-app will set up everything you need to run a React application. And
make sure you should not use uppercase letters for your application name.

So let’s check out our browser and we can see our application is up and running on
http://localhost:3000 locally.
3) Visual Studio Code — as an IDE (you can use any).

Introduction to the directory structure


Let’s walk through the directory structure that React CLI created for us.

Open this newly created application in VS Code.

Directory Structure of React Application

As you can see the very first directory is node_modules and this is having all the
library dependency of package.json.

Now check this public directory.


In this directory our important file is index.html. As you know React is a single page
application so it is the only one Html or you can say a single file that gets rendered when
we run the application. Also, focus on the line no. 31, where this is the <div> with
id=”root”.

<div id=”root”></div>

This <div> will be replaced with the root component.

Inside this directory, you will also find manifest.json. This file is for PWAs —
Progressive Web Apps.

The next one is the src directory. This will contain all our React code. This is having
App.js, which is the first component, which will get rendered when we run our
application. But who is rendering this app component? The answer is index.js. You
can see this index.js is having ReactDOM.render() method.

ReactDOM.render(<App />, document.getElementById(‘root’));

This render method will actually render the index.html’s root div.

It will replace this root div with the app component. This is how your first component
will work.

In this src directory, we will also have index.css and serviceWorker.js. And this
service worker is for PWAs — Progressive Web Apps.

Moving ahead, we are having package.json. It contains all the dependencies of our
React application.

So, this was all about the structure of the React application.

Now let’s move to our Part-2 of this article series, where we will understand the concept
of components and will create different types of components too.
Reactjs JavaScript

About Help Legal

Get the Medium app

You might also like