Steps to Create React Application
Step 1: Create a react application by using the following command:
npx create-react-app foldername
Step 2: Change your directory to the newly created folder.
cd foldername
Project Structure:
Example: This example uses props data to demonstrate condiotional rendering in react
Javascript
// Filename - index.js import React from 'react' ; import ReactDOM from 'react-dom' ; import App from './App' ; ReactDOM.render(<App isPass={ true } />, document.getElementById( 'root' )); |
Javascript
// Filename - App.js import PassMessage from "./PassMessage" ; import FailMessage from "./FailMessage" ; function App(props) { const isPass = props.isPass; if (isPass) { return <PassMessage />; } return <FailMessage />; } export default App; |
Javascript
// Filename - PassMessage.js import React from "react" ; function PassMessage() { return ( <div> <h1 style={{ textAlign: "center" , color: "green" , }} > { " " } Congratulations!!!You passed the test.{ " " } </h1> </div> ); } export default PassMessage; |
Javascript
// Filename - FailMessage.js import React from "react" ; function FailMessage() { return ( <div> <h1 style={{ textAlign: "center" , color: "green" , }} > { " " } You failed the test.Better luck next time..!!{ " " } </h1> </div> ); } export default FailMessage; |
Step to Run the application: Open the terminal and type the following command.
npm start
Output: If you give the value of isPass={true} in index.js, then it will give the following output:
If the value of isPass={false} in index.js, then the following output is displayed.
What are the features of ReactJS ?
Created by Facebook, ReactJS is a JavaScript library designed for crafting dynamic and interactive applications, elevating UI/UX for web and mobile platforms. Operating as an open-source, component-based front-end library, React is dedicated to UI design and streamlines code debugging by employing a component-oriented approach.
We will discuss about the following featured of React:
Table of Content
- JSX(JavaScript Syntax Extension):
- Virtual DOM:
- One-way Data Binding:
- Performance:
- Extension:
- Conditional Statements:
- Components:
- Simplicity:
Let’s understand each of them in detail:
Contact Us