ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes your code more predictable and easier to debug. A React application is made of multiple components, each responsible for rendering a small, reusable piece of HTML.
Basic Setup: You will start a new project using create-react-app so open your terminal and type:
npx create-react-app my-app
Project Structure: The file structure in the project will look like this:
Example: In this example, we will design a webpage in React JS, for that we will need to manipulate the App.js file and Index.css:
App.js
import React from 'react'; import './App.css'; function App() { return ( <div> <nav class="navbar background"> <ul class="nav-list"> <div class="logo"> <img src= </div> <li><a href="#courses">Courses</a></li> <li><a href="#tutorials">Tutorials</a></li> <li><a href="#jobs">Jobs</a></li> <li><a href='#student'>Student</a></li> </ul> <div class="rightNav"> <input type="text" name="search" id="search" /> <button class="btn btn-sm">Search</button> </div> </nav> <section class="section"> <div class="box-main"> <div class="firstHalf"> <h1 class="text-big"> 7 Best Tips To Speed Up Your Job Search in 2022 </h1> <p class="text-small"> Hunting down a relevant job requires proper techniques for showcasing your potential to the employer. But with the advent of COVID-19, it has become a bit challenging and competitive to reach out for your dream job. Many individuals have lost their jobs during these times, and on the other hand, freshers are facing difficulties while applying for a new job. But there is no need for panic, you can change your ways and streamline things in a way that you get a proper result. </p> </div> </div> </section> <section class="section"> <div class="box-main"> <div class="secondHalf"> <h1 class="text-big" id="program"> JavaScript Tutorial </h1> <p class="text-small"> JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web page many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments. </p> </div> </div> </section> <section class="section"> <div class="box-main"> <div class="secondHalf"> <h1 class="text-big" id="program"> Java Programming Language </h1> <p class="text-small"> When compared with C++, Java codes are generally more maintainable because Java does not allow many things which may lead to bad/inefficient programming if used incorrectly. For example, non-primitives are always references in Java. So we cannot pass large objects (like we can do in C++) to functions, we always pass references in Java. One more example, since there are no pointers, bad memory access is also not possible. When compared with Python, Java kind of fits between C++ and Python. The programs are written in Java typically run faster than corresponding Python programs and slower than C++. Like C++, Java does static type checking, but Python does not. </p> </div> </div> </section> <section class="section"> <div class="box-main"> <div class="secondHalf"> <h1 class="text-big" id="program"> What is Machine Learning? </h1> <p class="text-small"> Machine Learning is the field of study that gives computers the capability to learn without being explicitly programmed. ML is one of the most exciting technologies that one would have ever come across. As it is evident from the name, it gives the computer that makes it more similar to humans: The ability to learn. Machine learning is actively being used today, perhaps in many more places than one would expect. </p> </div> </div> </section> <footer className="footer"> <p className="text-footer"> Copyright ©-All rights are reserved </p> </footer> </div> ) } export default App |
Index.css
* { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; cursor: pointer; } .background { background: rgb(255, 255, 255); background-blend-mode: darken; background-size: cover; } .footer { background-color: #000; } .nav-list { width: 70%; display: flex; align-items: center; } .logo { display: flex; justify-content: center; align-items: center; } .logo img { width: 180px; border-radius: 50px; } .nav-list li { list-style: none; padding: 26px 30px; } .nav-list li a { text-decoration: none; color: #000; } .nav-list li a:hover { color: grey; } .rightnav { width: 30%; text-align: right; } #search { padding: 5px; font-size: 17px; border: 2px solid rgb(0, 0, 0); border-radius: 9px; } .box-main { display: flex; justify-content: center; align-items: center; color: black; max-width: 80%; margin: auto; height: 80%; } .firsthalf { width: 100%; display: flex; flex-direction: column; justify-content: center; } .secondhalf { width: 30%; } .secondhalf img { width: 70%; border: 4px solid white; border-radius: 150px; display: block; margin: auto; } .text-big { font-weight: 500; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 30px; } .text-small { font-size: 18px; } .btn { margin-left: 20px; height: 33px; width: 70px; color: #fff; background-color: #000; cursor: pointer; } .btn-sm { padding: 6px 10px; vertical-align: middle; } .section { height: 200px; display: flex; align-items: center; background-color: rgb(250, 250, 250); justify-content: space-between; } .section-Left { flex-direction: row-reverse; } .center { text-align: center; } .text-footer { text-align: center; padding: 30px 0; font-family: 'Ubuntu', sans-serif; display: flex; justify-content: center; color: #fff; } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!