Scribd
Upload
43 views6 pages

React Intro

The document outlines the steps to set up a development environment and create a basic React application, including: 1) Installing Node.js, a code editor like Visual Studio Code, and React dependencies; 2) Creating a project folder and files, and initializing a package.json file to manage dependencies; 3) Adding HTML boilerplate and linking to Bootstrap for styling; 4) Rendering a simple React component on the home page to verify setup.

Uploaded by

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

React Intro

The document outlines the steps to set up a development environment and create a basic React application, including: 1) Installing Node.js, a code editor like Visual Studio Code, and React dependencies; 2) Creating a project folder and files, and initializing a package.json file to manage dependencies; 3) Adding HTML boilerplate and linking to Bootstrap for styling; 4) Rendering a simple React component on the home page to verify setup.

Uploaded by

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

Toolchain for building React Application

- In computing technologies toolchain refers to a set


of software tools required for building, debugging,
testing and deploying application.

You can use React in existing web application:

Setup Environment:
o Download and Install Node.js 10+ version
[for Package Manager NPM 5+]
[Package Manager is tool used to download
and install library for your project]
Ex: Yarn, NPM, RubyGems, Grunt, NuGet, etc.
https://nodejs.org/en/download/
o Check the Version of NPM and Node.js
C:\>node -v
C:\>npm -v
o Download and Install “Visual Studio Code”
editor
https://code.visualstudio.com/
o Download and Install Following Extensions in
VS-Code Editor
Live Server
vscode-icons
Create a Traditional Web Application
- Create a new Folder on your PC
C:\ReactApplication
- Open the folder the Vs-Code Editor
- Open “Terminal” [use command prompt]
- Run the following command
C:\ReactApplication> npm init
- This will generate “package.json”, which contains
meta data.
- Add following folders
o public [to keep all your static resources]
o src [to keep all your dynamic resources]
- Install bootstrap for project
> npm install bootstrap
[this will install bootstrap 5] npm install
[email protected]
- This will add “node_modules” folder
- Add a following files into public folder

Index.html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstra
p.css">
</head>
<body class="container-fluid">
<div class="text-center">
<h2 class="text-primary">Web
Application</h2>
<a href="home.html">Home</a>
</div>
</body>
</html>

Home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet"
href="../node_modules/bootstrap/dist/css/bootstra
p.css">
<script crossorigin
src="https://unpkg.com/react@17/umd/react.devel
opment.js"></script>
<script crossorigin
src="https://unpkg.com/react-dom@17/umd/react-
dom.development.js"></script>
<script
src="https://unpkg.com/@babel/standalone/babel.
min.js"></script>
<script type="text/babel">
ReactDOM.render(
"Welcome to React.js",
document.getElementById("container")
)
</script>
</head>
<body class="container-fluid">
<div class="bg-danger text-white mt-3 p-4 text-
center">
<h1>Home</h1>
<div id="container"></div>
<div>
<a href="index.html" class="btn btn-
light">Back to Index</a>
</div>
</div>
</body>
</html>

You might also like