如何在 React.js 中创建网站？

ReactJS是一个开源的、基于组件的前端库，只负责应用程序的视图层。它由 Facebook 维护。 React 使用声明式范式，可以更轻松地推理您的应用程序，并旨在高效和灵活。它为应用程序中的每个状态设计简单的视图，当你的数据发生变化时，React 将有效地更新和呈现正确的组件。声明式视图使您的代码更可预测且更易于调试。一个 React 应用程序由多个组件组成，每个组件负责渲染一小段可重用的 HTML。

基本设置：您将使用 create-react-app 启动一个新项目，因此打开终端并输入：

npx create-react-app my-app

项目结构：项目中的文件结构将如下所示：

示例：在此示例中，我们将在 React JS 中设计一个网页，为此我们需要操作 App.js 文件和 Index.css：

App.js

import React from 'react';
import './App.css';
  
function App() {
    return (
        

            

                

                    

                        
                    
                    
Courses
                    
Tutorials
                    
Jobs
                    
Student
                
  
                

                    
                    Search
                
            
  
            

                

                    

                        

                            7 Best Tips To Speed Up Your 
                            Job Search in 2022
                        
                        

                            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.
                        
                    
                
            
            

                

                    

                        

                            JavaScript Tutorial
                        
                        

                            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.
                        
                    
                
            
            

                

                    

                        

                            Java Programming Language
                        
                        

                            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.
                        
                    
                
            
            

                

                    

                        

                            What is Machine Learning?
                        
                        

                            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.
                        
                    
                
            
            

                

                    Copyright ©-All rights are reserved
                
            
        
    )
}
  
export default App

索引.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;
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：