Building user interfaces is also now possible using a JavaScript library named React. It is a tool that we can use to build UI components. It is especially for creating single-page applications. Why React? React is an Open-source JavaScript library. It allows us to create reusable components. React is fast, easy and scalable. React has one-way data binding. It provides an in-memory data structure cache. Easy to test. By using, react we can create large applications that can change the data without reloading the page. See the below image for better understanding: React has the capability to render the change or affected components without disturbing the other component, that means instead of rendering the whole page again it will render only change part For eg If you are changing the h1 tag in the react component then after saving it, you can see the whole page is rendered on each change. But in reality, the react library only renders components that actually change. Entities involved in React: Component: Components are the declarative code for reusable UI. One component can interact with other components via props to create complex UI. A component can be a class component or functional component State: The state represents the current state of the application.State is private to the class component and it is fully controlled by that component. The functional component doesn't contain state. Props: Props are the values or arguments that can be passed from higher components to lower components. Let’s start with creating a react application: For creating a react application, you need to have node and npm installed on your machine. Then, Install the dependencies: npm -g -react-app install create create-react-app is an environment for learning React and is a good way to start building a new single-page application. It sets up the development environment so that we can use the latest JavaScript features. You may choose one of the following methods, to create a new app : npx npx create-react-app my-app npx is a package runner tool. It comes with npm 5.2 and higher) ( npm npm init react- my- app app npm init <initializer> is available in npm 6+ yarn yarn create react- my- app app yarn create is available in Yarn 0.25+ After the creation of react-app, it will create a directory called my-app[that is your application name] Inside that directory, it will generate the basic initial project structure and install the dependencies: my-app
├── README ├── node_modules
├── package ├── ├── public
│   ├── favicon │   ├── index │   └── manifest └── src
├── App ├── App ├── App ├── index ├── index ├── logo └── serviceWorker.js .md .json .gitignore .ico .html .json .css .js .test .js .css .js .svg Different Way to render the component and page: 1. How we can render HTML single component: index.js React ; ReactDOM ; ; * serviceWorker ; element = ;
ReactDOM.render(element, .getElementById( ));
serviceWorker.unregister(); import from 'react' import from 'react-dom' import './index.css' import as from './serviceWorker' const Hello, world < > h1 </ > h1 document 'root' Let’s say there is a <div> present inside the index.html file in a public folder like this: < = ></ > div id "root" div We call this a “root” DOM node. Everything inside the root DOM will be managed by React DOM. The main thing in React is that applications built usually have a single root DOM node. To render a React element into a root DOM node, pass both [that is element and root]to ReactDOM.render() .You can check how I have passed in above e.g So in the react application whatever you are displaying it is going in that root DOM node and from that DOM, the browser will display us the data. You can see the DOM structure through the developer console by running your application. How it looks in the browser: 2. You can also store the data in one variable and then you can render the data in DOM. index.js React ; ReactDOM ; ; * serviceWorker ; name = ; element = ReactDOM.render(element, .getElementById( ));
serviceWorker.unregister(); import from 'react' import from 'react-dom' import './index.css' import as from './serviceWorker' const 'snehal narkar' const Hello ,{name} < > h1 </ > h1 document 'root' In the above example, I am storing the name ‘Snehal Narkar’ in the name variable and then I am passing that variable in element variable by using <h1>element and then finally I am passing the element variable on root DOM node using ReactDOM.render(). 3. How to render the page in index.js: App.js React ; logo ; ; App() { (
<div className="App">
< className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> save reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</ >
</div>
);
}
export App; import from 'react' import from './logo.svg' import './App.css' function return header and to header default index.js React ; ReactDOM ; ; App ; * serviceWorker ;
ReactDOM.render( <App /> import from 'react' import from 'react-dom' import './index.css' import from './App' import as from './serviceWorker' < > React.StrictMode ,
document.getElementById('root')
);
serviceWorker.unregister(); </ > React.StrictMode You just have to import the file and return it inside ReactDOM.render(). So it will render the data in the root DOM node and you can see the content of the page on the browser. 4. How to render one component inside another component: In this example, I am passing one component into another. I have the First.js component which I am passing in the App.js component. You can check the following code : App.js React ; ; First ; { ( <header>
<p>Render App.js page</p>
</header> <First /> );
} App; import from 'react' import './App.css' import from './components/first' ( ) function App return < = > div className "App" </ > div export default First.js React ; { ( <h1>My first page</h1> );
} First; import from "react" ( ) function First return < = > div className "App" </ > div export default Index.js React ; ReactDOM ; ; App ; * serviceWorker ;
ReactDOM.render( <App /> import from 'react' import from 'react-dom' import './index.css' import from './App' import as from './serviceWorker' < > React.StrictMode ,
document.getElementById('root')
);
serviceWorker.unregister(); </ > React.StrictMode 5. How to create routes for different components or pages: When you create multiple components at that time create one folder in src give it name as components and then store all your different components. It is a good practice to keep components in a separate folder. Now will see how we can create routes for multiple pages. For creating routes we need to install react-router-dom npm react-router-dom — save i react-router-dom is a package that allows us to configure routes. For E.g: First.js React ; { ( <h1>My first page</h1> );
} First; import from "react" ( ) function First return < = > div className "App" </ > div export default Second.js React ; { ( <h1>My second page</h1> );
} Second; import from "react" ( ) function Second return < = > div className "App" </ > div export default App.js React ; ; First ; Second ; { Route, BrowserRouter Router } App() { (
<Router>
<div>
<Route exact ="/">
<h1>Welcome the app</h1>
</Route>
<Route ="/first" component={First} />
<Route ="/second" component={Second} />
</div>
</Router>
);
}
export App; import from 'react' import './App.css' import from './components/first' import from './components/second' import as from 'react-router-dom' function return path to path path default Now, its time to run our application: We can run our application by using a script file from package.json start npm Our application running on http://localhost:3000 For a complete app, you can check my repository. GitHub Happy Coding 😃

Target

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Firebase

2022 - HackerNoon Contributor of the Year - Programming

2022 - HackerNoon Contributor of the Year - React

2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - HackerNoon Contributor of the Year - Programming

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - Software Developer of the Year

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Building User Interfaces with React [A How-To Guide]

Building User Interfaces with React [A How-To Guide]

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Snehal Narkar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Building User Interfaces with React [A How-To Guide]

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Snehal Narkar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES