Scribd
Upload
33 views

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
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
33 views

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
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