React
Rajiv Gupta
• Why React
• What is single page application
• 2 types of response web and web api
1. npx create-react-app my-app
2. cd my-app
3. npm start
Directory Structure
react-todo-app
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTest.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
A simple App
function App() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
export default App;
• The index.html file provides the container,
• the index.js file renders the root component
into the DOM, and
• the App.js file defines the main application
component.
• Additional files like CSS files can be included
to style your components as desired.
In JSX (JavaScript XML):
div>
{/* This is another JSX comment */}
<h1>Hello, World!</h1>
</div>
How to create a new component
• Create a component folder under Apps
• Create filename.jsx or .js
• Installer and extension simple react snippet
under extension
React functional
rfc
component skeleton
React class component
rcc
skeleton
A single page having multiple component
• Every react application has at least one
component which is called root component
• Every react application is basically a tree of
components
EXTRA
How to install bootstrap in react
Create a new project eg:- my-test-app and start the
project
Open a new terminal
Step 1: E:\reactAll\my-test-app> npm i bootstrap
Step 2: open index.js and add and import statement
import 'bootstrap/dist/css/bootstrap.css'
notice the color changes in the browser
const element=<h1>Hello World</h1>
ReactDom.render(which element,Where to render)
