|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Build your first React app with our blocks | Syncfusion |
| 4 | +description: Learn all about building your first React app using our blocks from the Essential React UI Kit in Syncfusion Essential JS 2 and more. |
| 5 | +platform: ej2-react |
| 6 | +control: Build your first React app with our blocks |
| 7 | +documentation: ug |
| 8 | +domainurl: ##DomainURL## |
| 9 | +--- |
| 10 | + |
| 11 | +# Build your first React app with our blocks |
| 12 | + |
| 13 | +## Create a new React app |
| 14 | +A **Next.js** app is used for this example. To create a new app, refer to the official setup guide [here](https://nextjs.org/docs/app/getting-started/installation). This tutorial then walks through the step-by-step process of adding a simple sign-in block to the newly created app, named **my-app**. |
| 15 | + |
| 16 | +> When prompted with the question **"Would you like to use Tailwind CSS?"** during **Next.js** app setup, select **No** to avoid automatically integrating **Tailwind CSS** into your app. |
| 17 | +
|
| 18 | + |
| 19 | + |
| 20 | +## Setting up Tailwind or Bootstrap 5.3 theme in the app |
| 21 | + |
| 22 | +After creating the new app named **my-app**, open it in Visual Studio Code (which will be used throughout this walkthrough). Once the app is open, navigate to the **src -> app -> page.tsx** file and remove only the template HTML code. Then, navigate to **src -> app -> globals.css** and **src -> app -> page.module.css** files, and remove all default CSS code. |
| 23 | + |
| 24 | +The next step is to choose a theme, either **Tailwind** or **Bootstrap 5.3**, in either light or dark mode, and configure **my-app** accordingly. |
| 25 | + |
| 26 | +### Tailwind configuration |
| 27 | + |
| 28 | +If you choose **Tailwind** theme, follow these steps to configure it. |
| 29 | + |
| 30 | +1. In the Visual Studio Code terminal, run the following commands to install the **Tailwind** packages and create the **tailwind.config.js** file. |
| 31 | + |
| 32 | + ```bash |
| 33 | + npm install -D tailwindcss postcss autoprefixer |
| 34 | + npx tailwindcss init -p |
| 35 | + ``` |
| 36 | + |
| 37 | +  |
| 38 | + |
| 39 | +2. In the **tailwind.config.js** file, add the following code to `content`, `darkMode`, and `theme` configurations. When creating the **Next.js** app, if the option **"Would you like your code inside a `src/` directory?"** was set to **Yes**, all the app-related files will be placed inside the **src** folder. Therefore, the `content` configuration should reflect this. If this option was not selected, the `content` configuration will need to be adjusted accordingly. To learn more about this, refer to this [link](https://tailwindcss.com/docs/guides/nextjs). |
| 40 | + |
| 41 | + ```js |
| 42 | + module.exports = { |
| 43 | + content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], |
| 44 | + darkMode: 'class', |
| 45 | + theme: { |
| 46 | + extend: { |
| 47 | + colors: { |
| 48 | + primary: { |
| 49 | + // NOTE: In this demo, different shades of "Indigo" are used as primary colors. |
| 50 | + "50": "#eef2ff", |
| 51 | + "100": "#e0e7ff", |
| 52 | + "200": "#c7d2fe", |
| 53 | + "300": "#a5b4fc", |
| 54 | + "400": "#818cf8", |
| 55 | + "500": "#6366f1", |
| 56 | + "600": "#4f46e5", |
| 57 | + "700": "#4338ca", |
| 58 | + "800": "#3730a3", |
| 59 | + "900": "#312e81", |
| 60 | + "950": "#1e1b4b" |
| 61 | + } |
| 62 | + } |
| 63 | + }, |
| 64 | + }, |
| 65 | + plugins: [], |
| 66 | + } |
| 67 | + ``` |
| 68 | + > The Syncfusion React components uses **Indigo** for light mode and **Cyan** for dark mode. So, please change the primary color accordingly to maintain a uniform appearance. |
| 69 | + |
| 70 | + |
| 71 | +3. In the **src -> app -> globals.css** file, add the following code. This will ensure that the **Tailwind** styles are generated and consolidated for the entire application. |
| 72 | + |
| 73 | + ```css |
| 74 | + @tailwind base; |
| 75 | + @tailwind components; |
| 76 | + @tailwind utilities; |
| 77 | + ``` |
| 78 | + |
| 79 | +4. In the **src -> app -> layout.tsx** file, add the following code for light mode (`className="light"`) and dark mode (`className="dark"`) in the `<html>` tag. |
| 80 | + |
| 81 | + - For **light mode**: |
| 82 | + |
| 83 | + ```html |
| 84 | + <html lang="en" className="light"> |
| 85 | + ``` |
| 86 | + |
| 87 | + - For **dark mode**: |
| 88 | + |
| 89 | + ```html |
| 90 | + <html lang="en" className="dark"> |
| 91 | + ``` |
| 92 | + |
| 93 | +5. In the **src -> app -> globals.css** file, add the style-oriented CDN link for Syncfusion React components using `@import` in the CSS. Ensure that the Syncfusion React components CSS is placed above the Tailwind CSS to avoid any potential style conflicts. |
| 94 | + |
| 95 | + - For **light mode**: |
| 96 | + |
| 97 | + ```css |
| 98 | + @import url('https://cdn.syncfusion.com/ej2/27.2.5/tailwind.css'); |
| 99 | + ``` |
| 100 | + |
| 101 | + - For **dark mode**: |
| 102 | + |
| 103 | + ```css |
| 104 | + @import url('https://cdn.syncfusion.com/ej2/27.2.5/tailwind-dark.css'); |
| 105 | + ``` |
| 106 | + |
| 107 | +  |
| 108 | + |
| 109 | +6. **OPTIONAL**: If you wish to use our font icons prepared for **Tailwind**, you can include the following CDN link: |
| 110 | + |
| 111 | + ```css |
| 112 | + @import url('https://cdn.syncfusion.com/ej2/angular/ui-kit/font-icons/tailwind-icons.css'); |
| 113 | + ``` |
| 114 | + |
| 115 | +Now that the **Tailwind** theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes. |
| 116 | + |
| 117 | +### Bootstrap 5.3 configuration |
| 118 | + |
| 119 | +If you choose **Bootstrap 5.3** theme, follow these steps to configure it. |
| 120 | + |
| 121 | +1. In the **src -> app -> layout.tsx** file, add the following code for light mode (`data-bs-theme="light"`) and dark mode (`data-bs-theme="dark"`) in the `<html>` tag. |
| 122 | + |
| 123 | + - For **light mode**: |
| 124 | + |
| 125 | + ```html |
| 126 | + <html lang="en" data-bs-theme="light"> |
| 127 | + ``` |
| 128 | + |
| 129 | + - For **dark mode**: |
| 130 | + |
| 131 | + ```html |
| 132 | + <html lang="en" data-bs-theme="dark"> |
| 133 | + ``` |
| 134 | + |
| 135 | +2. In the **src -> app -> layout.tsx** file, add the style oriented CDN link for **Bootstrap 5.3** theme in the `<head>` tag. |
| 136 | + |
| 137 | + ```html |
| 138 | + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" /> |
| 139 | + ``` |
| 140 | + |
| 141 | +3. In the **src -> app -> layout.tsx** file, add the style oriented CDN link for Syncfusion React components in the `<head>` tag. |
| 142 | + |
| 143 | + - For **light mode**: |
| 144 | + |
| 145 | + ```html |
| 146 | + <link href="https://cdn.syncfusion.com/ej2/27.2.5/bootstrap5.3.css" rel="stylesheet"> |
| 147 | + ``` |
| 148 | + |
| 149 | + - For **dark mode**: |
| 150 | + |
| 151 | + ```html |
| 152 | + <link href="https://cdn.syncfusion.com/ej2/27.2.5/bootstrap5.3-dark.css" rel="stylesheet" /> |
| 153 | + ``` |
| 154 | + |
| 155 | +4. **OPTIONAL**: If you wish to use our font icons prepared for **Bootstrap 5.3**, you can include the following CDN link: |
| 156 | + |
| 157 | + ```html |
| 158 | + <link href="https://cdn.syncfusion.com/ej2/angular/ui-kit/font-icons/bootstrap5.3-icons.css" rel="stylesheet" /> |
| 159 | + ``` |
| 160 | + |
| 161 | +You can refer to the consolidated screenshot below for more details. |
| 162 | + |
| 163 | + |
| 164 | + |
| 165 | +Now that the **Bootstrap 5.3** theme is configured for either light or dark mode of your choice, the app is ready for the next set of processes. |
| 166 | + |
| 167 | +## Steps to explore and copy block code snippets |
| 168 | + |
| 169 | +Now that **my-app** is set up with the desired theme configuration, the next step is to copy and paste the pre-built simple sign-in block code into the app for quick development. Here are a couple of ways to achieve this. |
| 170 | + |
| 171 | +### Steps to explore and copy block code snippets from the online demo |
| 172 | + |
| 173 | +1. In the [online demo](https://ej2.syncfusion.com/angular/essential-ui-kit/#/blocks), navigate to the **Authentication** category and select the **Sign In** block. This will direct you to the appropriate demo page. |
| 174 | + |
| 175 | +  |
| 176 | + |
| 177 | +2. On the demo page, go to the first demo, which showcases a simple sign-in block. Choose the desired theme, then switch from the **Preview** tab to the **Code** tab. |
| 178 | + |
| 179 | +  |
| 180 | + |
| 181 | +3. In the **Code** tab, copy the TSX (HTML and TS) code using the **Copy to Clipboard** option and paste it into the **src -> app -> page.tsx** file. Once done, modify `export default function Signin1` to `export default function Home`. Additionally, it is mandatory to include the `'use client';` statement in the **src -> app -> page.tsx** file. |
| 182 | +
|
| 183 | +  |
| 184 | +
|
| 185 | +4. If CSS is provided, copy the CSS code and paste it into the **src -> app -> page.module.css** file; otherwise, ignore it. |
| 186 | +
|
| 187 | +### Steps to explore and copy block code snippets from the GitHub source |
| 188 | +
|
| 189 | +1. On [downloading](https://github.com/syncfusion/essential-ui-kit-for-react) and opening the GitHub source in Visual Studio Code, navigate to the following folder: **src -> app -> blocks-section**. |
| 190 | +
|
| 191 | +  |
| 192 | +
|
| 193 | +2. Inside, you'll find a list of folders, each corresponding to a specific block. Open the **signin** block folder, where you'll see the demo arranged sequentially. |
| 194 | +
|
| 195 | +3. Go to the first folder, **src/app/blocks-section/signin/signin-1**, where you'll find the TSX and CSS files of the simple sign-in block. You can copy the code directly from these files. |
| 196 | +
|
| 197 | +  |
| 198 | +
|
| 199 | +> **Note:** |
| 200 | +> |
| 201 | +> 1. It is mandatory to include the `'use client';` statement in the TSX file. |
| 202 | +> 2. In the TSX, the **Tailwind** and **Bootstrap 5.3** design code is placed in their respective switch case statements. You can copy and paste as per your requirement. |
| 203 | +> 3. Ignore the code within the **"SB Code - Start"** and **"SB Code - End"** comments, as it is intended solely for sample browser purposes. |
| 204 | +
|
| 205 | +## Steps to install and configure Syncfusion React components |
| 206 | +
|
| 207 | +While copying and pasting the TSX (HTML and TS) code, you'll notice that Syncfusion React components are used. To incorporate them into **my-app**, install the necessary packages and import the corresponding modules to the **src -> app -> page.tsx** file for the app to run. |
| 208 | +
|
| 209 | +In the simple sign-in block, components such as textbox, checkbox and button are used. After copying and pasting HTML and TS code into the TSX file, open the **package.json** file and add the required packages: `@syncfusion/ej2-react-buttons` and `@syncfusion/ej2-react-inputs`. For more details about other Syncfusion React component packages, refer to this [link](https://www.npmjs.com/search?q=%40syncfusion%2Fej2-react). |
| 210 | +
|
| 211 | + |
| 212 | +
|
| 213 | +Once the necessary packages are added, run the `npm install` command via the terminal to install those packages in the **node_modules** folder. |
| 214 | +
|
| 215 | + |
| 216 | +
|
| 217 | +Finally, again check the [online demo](https://ej2.syncfusion.com/angular/essential-ui-kit/#/blocks) or the [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-angular) and copy the required HTML, TS, and CSS code for the simple sign-in block into your app as outlined in the previous topic. |
| 218 | +
|
| 219 | +## Steps to download and add assets to the app |
| 220 | +
|
| 221 | +If you want to view and experience the images used in our design, you can download the **assets** folder from the following [GitHub repository](https://github.com/syncfusion/essential-ui-kit-for-angular/tree/master/ui-blocks/src), place it inside the **public** folder of **my-app**, and modify the image URLs in the HTML if necessary. |
| 222 | +
|
| 223 | +## Steps to run the app |
| 224 | +
|
| 225 | +Now that everything is set up in **my-app** — including the TSX (HTML and TS), CSS (if applicable), and assets (optional) — you are ready to build and launch the app. Type the `npm run dev` command in the terminal, and you will see a localhost URL provided by the React development server. |
| 226 | +
|
| 227 | + |
| 228 | +
|
| 229 | +To view the app in your browser, simply **Ctrl + Click** (or **Cmd + Click** on macOS) on the localhost URL displayed in the terminal. This will open the app in your default browser, allowing you to view and experience the simple sign-in block. |
| 230 | +
|
| 231 | + |
0 commit comments