What is React JS ?
React is a Javascript library for creating User Interfaces.
Simple For Interactive UI designs.
Efficiently update the screens & render UI components with dynamic data from server.
What is Single Page Application?
In a Web Page, dynamic data will be loaded from server to page, without reloading the entire page.,
So the web page will be more interactive., part of the components only required will be loaded based on states.
Pre Requistics For React JS
Since React JS is a Javascript Library, to setup React JS we have to install Node JS & install Node Package Manager.
Download Node JS and install it in your System based on your Operating system.
https://nodejs.org/en/download/
Once installed, automatically the node package manager will be installed., (npm)
Assuming the latest version of npm installed., npm versions > 5.2.0 has default npx binary.
where npx is just a simple binary/tool required for using the packages in npm.
Steps:
Open a terminal/command prompt., and navigate to any folder where we need to execute the React JS application.
Execute the below command to get the template to kickstart the React Js application.
$ npx create-react-app my-app
|
1 2 3 4 5 6 7 8 9 10 |
Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ⸨ ░░░░░░░░░░░░░░░░⸩ ⠼ fetchMetadata: sill resolveWithNewModule glob-parent@5.1.2 checking installable status > fsevents@1.2.13 install /Users/karthickd/Documents/tutorialflow/React-JS-Intro/my-app/node_modules/watchpack-chokidar2/node_modules/fsevents > node install.js --- ---- Installing template dependencies using npm... Success! Created my-app at /Users/karthickd/Documents/tutorialflow/React-JS-Intro/my-app |
Naviagate to the folder “my-app” which is created by the above npm command., You could see the following structure., common for React JS.
public/index.html -> Main file which is called initially which contains the HTML content.
The index.html contains the <div id=”root”> where the React JS (Index.js) will render the components dynamically., replacing the div tag.,
Source code of generated index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> |
The index.html calls the index.js scripts and default loads the <App/> tag., which is created by App.js using React JS.,
Generated App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import logo from './logo.svg'; import './App.css'; function App() { return ( <div classname="App"> <header classname="App-header"> <img src="{logo}" classname="App-logo" alt="logo"> <p> Edit <code> src/App.js </code> and save to reload. </p> <a classname="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> Learn React </a> </header> </div> ); } export default App; |
Execute the following command to start the react JS Application
$ npm start
Once the npm started, the web page will be displayed as below.
Components: App
There are different ways in creating a component in React JS.,
- Stateless Functional Component (Like above)
- Stateless Functional Component – With Lambda Expression (using const)
- Create a React Component class – with return
Stateless Function Component
|
1 2 3 4 5 6 |
function App() { return ( <div>Test</div> ) } export default App; |
The above code will render for <App/> tag with <div>Test</div> in the final HTML page.,
To learn more deeply on React Js, we need to learn more on