React JS Tutorial for Beginners: React JS with Tailwind CSS

Learning React JS is a fun process if you already knew JavaScript. But People like me who do not know JavaScript very well will suffer a lot when we try to learn React JS for the first time.

Yes. There are lots and lots of good React JS tutorials available online like “Fullstack React: The Complete Guide to ReactJS and Friends” – Book and “React – The Complete Guide 2023 including React Router & Redux” – Udemy Course. But if you want to learn React JS using these materials, you need patience and consistency. But quickly you will get bored when you learn each chapter. If you want to learn React JS as much as fast, you need to write React JS code every day. In this article, I listed easy steps to learn React JS very fast

If you want to build drag and drop webpage builder with react, then try GrapesJS.

Table of Contents

How to use Tailwind CSS with React JS

Note: The official React JS documentation suggests using Next.js, Vite, Parcel, or Remix instead of Create-React-App. Because React JS does not support custom PostCSS configurations.

First, create your React JS project using the following command

npx create-react-app your-app-name

Then navigate to that app directory

cd your-app-name

Now install Tailwind CSS using npm command

npm install -D tailwindcss

Then you have to create a tailwind.config.js file using the following command

npx tailwindcss init

Now add all your template files path inside the tailwind.config.js file.

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],

Also, add @tailwind directives inside src/index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

That's all. Now you can use Tailwind CSS inside React app.

Now start the react app using the following command

npm run start

Open the App.js file and remove the content inside the App() function return and add your own HTML code like this one.

<div className='text-2xl font-bold underline'>

<h1>Hello World</h1>

</div>

You can see the instant preview when you save the code.

Reference Source: Tailwind CSS Documentation

How to add header, and footer in React JS

When you create a web app with React JS, you need to create separate files for the header and footer. Then you need to import them in one main file.

The method I mentioned here is the same for the header and footer.

First, create a header.js file and add the navigation bar code inside the function. Then export that function.

Example Code

import React from "react";
function Header(){
return(
<nav className="m-0 p-0 list-none">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
);
}
export default Header;

Now go to the file where you want to insert the header and footer.

In this example, I inserted a header file inside the index.js file to get output.

import React from 'react';
import Header from './header';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode> <Header/> </React.StrictMode> reportWebVitals();

Inside the root.render I added header content using the <Header/> tag. That's all.

Now my navigation bar is displayed.

How to add external Javascript tag in React JS

You can easily mention your external javascript tag inside the public folder/index.html file. But if you want to do that inside the React JS, install and use React-helmet.

First, install the react-helmet library using the following command

npm i react-helmet

Then navigate to the js file you want to insert the external script tag. In this tutorial, I added an external javascript tag inside the index.js file.

import { Helmet } from "react-helmet"
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Helmet>
<script src="https://kit.fontawesome.com/4a47ab895c.js" crossorigin="anonymous"></script>
</Helmet>
</React.StrictMode>
);

That's all.

To use multiple Content inside single js file, use <React.Fragment>

If you want to use multiple create multiple content inside the sample JS file and you want to import that in one function, you can use <React.Fragment> like this one.

import React from "react";
function Title() {
return (
<React.Fragment>
<div className=" py-8 w-screen mx-auto bg-gray-200">
<h1 className="text-4xl font-bold text-center">BestApps for iPhone</h1>
</div>
</React.Fragment>
);
}
function Introduction() {
return (
<React.Fragment>
<div className="container px-12 text-xl py-4 font-semibold">
<p>This is a introduction content</p> </div>
</React.Fragment>
);
}
function FullContent() {
return(
<> <Title></Title>
<Introduction></Introduction>
</>
);
}
export default FullContent;

That's all. you can also import the js files in other js files and import them inside the return function.

How to Insert Images in React JS

Create an images directory inside the src folder. Then add the images in that folder.

Import images to the js file you want using the following code

import menphoto from './images/menphoto.jpg';

Mention the image location wherever you want using double curly braces.

{menphoto}