Scribd
Upload
64 views

Creating ReactJS with Vite

The document provides a comprehensive guide on setting up and creating a React application using Vite, including the necessary prerequisites like NodeJS version 16 and above. It covers the structure of React components, the difference between state and props, and the integration of forms and backend services. Additionally, it includes exercises for creating reusable components and managing application states with third-party libraries.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
64 views

Creating ReactJS with Vite

The document provides a comprehensive guide on setting up and creating a React application using Vite, including the necessary prerequisites like NodeJS version 16 and above. It covers the structure of React components, the difference between state and props, and the integration of forms and backend services. Additionally, it includes exercises for creating reusable components and managing application states with third-party libraries.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Table of Contents

ReactJS
- What is React
- How React Works
- React Ecosystem

Setting Up the Development Environment

Creating a React Application

React Application Directory Structure

Basic Structure
Component
Forms
Backend Integration
Router

Difference between State & Props

Questions:
1. Where will we define custom CSS? Considered option, A. Create separate css file per
component. B. Add all new classes in index.css and treat it as a global
2.
Creating a React Application
Before to create a React application, make sure NodeJS version 16 and above is installed in your
machine.

There are several ways to create a React project. We will use Vite in this exercise. To use Vite,
type the code below and press enter.

npm create vite@latest

Type ‘y’ if asked to proceed. Now, add the name of the project.

? Project name: slf-client-app

Choose React as our UI framework.

? Select a framework:
Vanilla
Vue
React
Lit
Svelte
Others

We will use TypeScript.

? Select a variant:
JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Now go inside your project directory by typing cd slf-client-app and press enter. To install
dependencies, use the command npm install in your terminal. To check the project
completely working, type npm run dev and press enter.

To see the project structure, type code . in your terminal then press enter to open VSCode.
Reusable React Components Structure
A React component is an element of the user interface (UI) that has its own logic and
appearance. A component can range in size from a button to a whole page.

Consider the sample React component below.

1. React component is a JavaScript function that returns a markup. It should be in a pascal


format.
2. A React component cannot return more than one element. To avoid unnecessary DOM
element to just wrap multiple elements, we can use a fragment <>.
3. To add style in a React component, you specify a CSS class with className.
4. To display data, we have to use curly braces.
5. We can use the logical && syntax to render content dynamically.
6. To render lists inside a React component, we use the map() function to transform an array of
countries into an array of <li> items. Noticed that each item should have a key property to
uniquely identifies that item. React needs this to keep track of our items.
7. Props or properties are the inputs to our components. It allows our React component to
become reusable all over the application. Via props we can pass data from one component
to another component.
8. <Event Handling>
9. <State hook>

Exercise

In this exercise you will create a bootstrap button component. The objective is to encapsulate
the bootstrap markup into a reusable React button component.

<button type=”button” class=”btn btn-primary”>Submit</button>

Solution
<in-progress>

React Forms Structure


Forms is one of the essential parts of React application. In this section we will see a structure of
a React form and how we used the third-party library (i.e., Zod). We will use React Hook Forms
for managing states and Zod for data validation.
React Application Backend Integration Structure
As we have seen from the previous section React is a library for building user interfaces or front
ends. But every application needs a backend that runs on the server. Backend is an application
that powers the front end. It provides the business logic, data management and security
features such as authentication and authorization.

<in-progress>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy