React Projects
React is an exclusive library for the development of highly dynamic User interfaces. React projects contain the entire program of the app you are building on react. In a react project, you can find the proper documentation of the interface. Also, the react projects can be integrated into external tools and libraries to extend your capabilities in development.
A react project contains all the components and dependencies that are created during the creation of the react project. Most commonly, a react project is made of file folders and subfolders.
Structure of a react project
my-app
├── build
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── .gitignore
├── package.json
└── README.md
The above is a representation of the React projects that are seen during the creation of the react project. It is made up of several folders and their dependencies.
Build: This folder contains the final app that has been coded in the react project. To access this folder, you must execute npm build or yarn build in your project folder. As you will execute any one of the commands, the content of the Build folder can be transferred to the interface of the user.
node_modules: This file contains the package manager that you have installed to be utilized in the development process. (npm or yarn packages) The further structure of the project comprises the main three folders public, src, and root folders.
Public: This folder is contained with static folders. Also, any data in the folders are accessible during the development of the project because of using the public access modifier. This data is generally utilized by the web in which you will see the rendered outcome of the react project. You should add the CSS and javascript files in these folders.
It is necessary that you should provide a specific name to that added file with a datatype. Suppose a name is not essential that you can type any name with the .src extension. The predesigned files are index.html and favicon.ico.
Src: this folder is the chief section of the React project as it is composed of the components of the project. You are free to name the file inside this folder according to your convenience. Also, you can import and export the file inside the folder. This will modify the structure of the interface. App.css, App.js, App.test.js, index.css, index.js, logo.SVG, and serviceWorker.js are the components of the above-mentioned structure.
The name of the component is followed by the CSS or .js type file extension to specify that it is a dynamic file.
Root folder: these folders are mentioned at the top or the bottom of the structure. They consist of the configuration files that are used while building the react Project. 'node_modules' and 'package.json' are under the category of root folders. Files like configuration files are stored in the package.json folder.
Creating a react Project
A react project is created by defining the basic structure and importing the necessary dependencies. Inside the src folder, you will have to create a folder for components that will have the code for the components. Here in this example, we will create a simple calculator by defining two components.
The first component will store the result of the expression, and the second will be the interface for the keypad. The keypad component will be an interface element that is pressed for function. Its code is as follows:
import React, {Component} from 'react';
class KeyPadComponent extends Component {
render() {
return (
<div className="button">
<button name="(" onClick={e => this.props.onClick(e.target.name)}>(</button>
<button name="CE" onClick={e => this.props.onClick(e.target.name)}>CE</button>
<button name=")" onClick={e => this.props.onClick(e.target.name)}>)</button>
<button name="C" onClick={e => this.props.onClick(e.target.name)}>C</button><br/>
<button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>
<button name="2" onClick={e => this.props.onClick(e.target.name)}>2</button>
<button name="3" onClick={e => this.props.onClick(e.target.name)}>3</button>
<button name="+" onClick={e => this.props.onClick(e.target.name)}>+</button><br/>
<button name="4" onClick={e => this.props.onClick(e.target.name)}>4</button>
<button name="5" onClick={e => this.props.onClick(e.target.name)}>5</button>
<button name="6" onClick={e => this.props.onClick(e.target.name)}>6</button>
<button name="-" onClick={e => this.props.onClick(e.target.name)}>-</button><br/>
<button name="7" onClick={e => this.props.onClick(e.target.name)}>7</button>
<button name="8" onClick={e => this.props.onClick(e.target.name)}>8</button>
<button name="9" onClick={e => this.props.onClick(e.target.name)}>9</button>
<button name="*" onClick={e => this.props.onClick(e.target.name)}>x</button><br/>
<button name="." onClick={e => this.props.onClick(e.target.name)}>.</button>
<button name="0" onClick={e => this.props.onClick(e.target.name)}>0</button>
<button name="=" onClick={e => this.props.onClick(e.target.name)}>=</button>
<button name="/" onClick={e => this.props.onClick(e.target.name)}>÷</button><br/>
</div>
);
}
}
Export default KeyPadComponent
Every button will return a value when clicked; hence you will have to use the on click function for every button. this.props.OnClick function will insert the function of each button. After this, you will have to write the functioning of elements in the app.js folder. The app.js component will act as a parent component as it is composed of all the components.
Featured: As a top React js development company we Poulima Infotech, help you with design and develop Web Apps and Mobile apps that get featured in the app store and win the marketplace. we build apps that get noticed. We excel in strategy, design, and development for iPhone & Android apps, and work for startups and enterprises as well.
Inside the app.js folder, you will need to use the this.state. This render function passes the data to the final rendered component and updates the elements of your interface.
import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";
class App extends Component {
constructor(){
super();
this.state = {
result: ""
}
}
render() {
return (
<div>
<div className="calculator-body">
<h1>Simple Calculator</h1>
<ResultComponent result={this.state.result}/>
<KeyPadComponent onClick={this.onClick}/>
</div>
</div>
);
}
}
Export default App
In the above program the this.onClick function is added to the buttons. This onclick function is declared but not defined. So you will need to write the logic of this function in the react project. As you do this part of the program for your calculator, you can add the features like result, clear and reset the values.
this.Calculate is used when the = button is pressed. This will calculate the result of the entered data and force it in the first component.
this.Reset is utilized to reset the state of the calculator. This function erases the existing expression and creates an empty field for your use.
this.Backspace, this has the function to delete the entered character from the expression. After you are done with the coding of the standard features of the react project of the calculator. You can add the onclick function to the buttons. This function is also written in the app.js file. The structure for the code is as follows:
import React, { Component } from 'react';
import './App.css';
import ResultComponent from './components/ResultComponent';
import KeyPadComponent from "./components/KeyPadComponent";
class App extends Component {
constructor(){
super();
this.state = {
result: ""
}
}
onClick = button => {
if(button === "="){
this.calculate()
}
else if(button === "C"){
this.reset()
}
else if(button === "CE"){
this.backspace()
}
else {
this.setState({
result: this.state.result + button
})
}
};
calculate = () => {
try {
this.setState({
// eslint-disable-next-line
result: (eval(this.state.result) || "" ) + ""
})
} catch (e) {
this.setState({
result: "error"
})
}
};
reset = () => {
this.setState({
result: ""
})
};
backspace = () => {
this.setState({
result: this.state.result.slice(0, -1)
})
};
render() {
return (
<div>
<div className="calculator-body">
<h1>Simple Calculator</h1>
<ResultComponent result={this.state.result}/>
<KeyPadComponent onClick={this.onClick}/>
</div>
</div>
);
}
}
Final Verdict
React projects are very easy to build and maintain. The structure of a project is maintained optimistically so that you do not face any problems while understanding the code. With React, you can create numerous projects for social media apps, browser apps, games, and many more. React projects give you an exceptional advantage in your development process. Besides, it maintains the architecture of the program in large projects.