ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de visualización de la aplicación. Es mantenido por Facebook. React utiliza un paradigma declarativo que facilita el razonamiento sobre su aplicación y pretende ser eficiente y flexible. Diseña vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente el componente correcto cuando cambien sus datos. La vista declarativa hace que su código sea más predecible y más fácil de depurar. Una aplicación React está compuesta por múltiples componentes, cada uno de los cuales es responsable de representar una pequeña pieza de HTML reutilizable.
Configuración básica: comenzará un nuevo proyecto usando create-react-app, así que abra su terminal y escriba:
npx create-react-app my-app
Estructura del proyecto: la estructura de archivos en el proyecto se verá así:
Ejemplo: En este ejemplo, diseñaremos una página web en React JS, para eso necesitaremos manipular el archivo App.js e 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= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" /> </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; }
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA