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>
