Hello there fellow Developers. We will be starting a new blog series with your very own "React.JS". We will be covering basic things, probably useful for a developer who wants to build a learning foundation in React. Same as our last tutorials on MongoDB, Angular and Node.JS, this will be a new series.
What exactly is React?
React is a free and open-source front-end JavaScript library for building user interfaces based on components by Facebook Inc. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js. React.JS combines the power of JavaScript, which manipulates the DOM to render webpages much faster than expected.
As we know that JavaScript is vastly popular and powerful when it comes to Web Development. React encompasses power of JavaScript where we build interactive UI using "reusable" components (similar to Angular), which are in turn written in JavaScript. Thinking of components like pieces of puzzle, which when combined together becomes a visually enticing website frontend. So without further ado, lets proceed with setting up to build first React Application.
What you should have?
You should have Node.js installed. Do install it from the official website. Next Download VS Code (or else any IDE you prefer). If you are going to use VS Code, do use the popular extensions like "ESLint" , "Prettier - Code Formatter" and an optional one as "React.JS code snippets". The code snippets is not entirely needed, but it will certainly help you during coding process.
Do verify the installation of NPM and Node.JS before proceeding further.
Once you get version numbers, you are good to go on next step.
Creating the First App:
Whenever you start anything, it is always the first app that is the breakthrough. It is very important as it lays a basic foundations for any future project that will be built as time progesses. So lets start:
React has very heavy code files, but fortunately we do not need to learn entire thing bit by bit. React provides a Node package command line tool known as "create-react-app" which will generate a sample project boilerplate where we can develop and build applications.
Inside your project directory, fire this command:
npx create-react-app my-first-react-app
Here a folder named "my-first-react-app" will be created. Once it is created, naviagate inside this folder.
cd my-first-react-app
Once inside, fire this usual command:
npm start
Thats it. You have successfully created your first React App.
Let's Take a Look at Project Structure:
Let’s break down the key files and folders created by my-first-app
:
public/
: This folder contains theindex.html
file, which is the only HTML file in your React app. All the content of your app will be injected into the<div id="root"></div>
in this file.src/
: This is where you'll spend most of your time. It contains JavaScript files, CSS files, and other assets.Key files in
src/
:index.js
: The entry point for your React app. This file renders your app to the DOM (i.e., the HTML page).App.js
: This is a React component. Initially, it displays the content you see when you first run the app.
If you open App.js in your VS Code, this will be it's content:
Just to play around, I will be replacing defualt content with "Hello World".
Writing "Hello World" program at the first instance while learning anything new in programming is a sacred ritual.
Okay so here it is:
And here is the browser output:
Congratulations newbie, ritual succeded!!
Understanding JSX:
JSX is an XML-like extension to the JavaScript language syntax. Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks. Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.
Keeping things simple : JSX is a syntax extension that allows you to write HTML inside JavaScript. It makes writing React components more intuitive.
Let's see it in action:
This is a JSX code. Inside App.js
, you wrote <h1>Hello, React!</h1>
. This is JSX. It looks like HTML, but you’re actually writing JavaScript. You can embed JavaScript expressions inside JSX by using curly braces {}
.
Here, {name}
is a JavaScript expression that outputs the value of the name
variable.
But there are some rules you much follow while writing JSX:
JSX must return a single element. If you want to return multiple elements, wrap them in a single parent element like a
<div>
.All HTML elements must be closed. For example,
<img />
and<input />
should have a closing slash.
Homework Time:
Try modifying App.js
to add more content:
Display your name in an
<h2>
tag.Add an unordered list (
<ul>
) with a few of your favorite programming languages or hobbies.
Solution will be posted in Day 2 Blog.
Conclusion:
Thats for the day. Let us dive deep into complex topics later on. But this should be enough for Day 1. Do follow to keep up with latest blog updates as we will be covering each and every topic in a simple and "humanised" way.
Ciao!!