Why we are integrating tailwindcss with react project?
React is a front-end Javascript library. It is an open-source component-based library that is in charge of developing the application's view layer. Since its initial release in 2013, React has become one of the most popular javascript libraries for UI development. It is easier to reason about and debug, and its capacity to effectively alter the user interface in response to data changes.
Tailwind CSS is like a toolbox for styling websites or apps. Instead of giving you pre-made styles for things like buttons or headers, it gives you lots of small tools (called utility classes) that you can use to style elements directly in your HTML code.
For example, instead of having a class for a big blue button, you might use utility classes to make a button big, blue, and rounded.
When you use a CSS framework like Bootstrap, it gives you a bunch of ready-made styles that you can apply to things like buttons or tables just by adding certain classes to your HTML code.
But with Tailwind CSS, it's a bit different. Instead of giving you pre-made styles, Tailwind CSS gives you small building blocks called utility classes. These classes let you control things like margins, padding, colors, and more directly in your HTML code.
It create a new directory with the given project name and generates a basic file structure for a React.js application. the generated file structure includes the following:
There are 3 folders in the following React boilerplate: node modules, public, and src, Read.md, package.json, gitgnore, and yarn.lock are additional files.
node_modules: here we get all the necessary node packages of our application.
Public
index.html: only one html file is there in the whole application.
manifest.json: It is applied to transform the application into a progressive web app.
favicon.ico: It is an icon in the tab.
src
App.css,index.css: These are different css files.
index.js: A file which allows to connect all the components with index.html.
App.js: A file where we usually import most of the presentational components.
serviceWorker.js: is used to add progressive web app features.
setupTest.js: to write testing cases.
package.json: it shows the list of packages the application uses.
.gitignore: react boilerplate comes with git initiated and .gitignore allows files and folders to be ignored when committing new changes.
Jsx stands for javascript XML. It is a syntax extension for javascript that allows you to write HTML-like elements in our javascript code. it is used in react a describe the structure and content of a component.
One of the main benefits of JSX is that it makes it easy to create and manipulating the structure of a components.
const name =<h1> hello Bachoo</h1>A JSX elements is converted into a regular javascript object during compilation so that it can be used to construct genuine DOM elements. For instance, the javascript generated from the JSX code above might be as follows:
const name = React.createElement("hi", null,"hello bachoo");Nested JSX must return a single element that wraps all other levels of nested elements, which we'll refer to as the parent elements.
All HTML attributes and event references in JSX become camelCase, this way, the onclick event becomes onclick and onchange - onchange.
JSX is a combination of HTML and JavaScript. so, it is not supported by the browser. so a transpiler called babel converts the JSX into pure javascript. Then browser understands the code and executes it. Browsers can't read JSX because there is no inherent implementation for the browser engines to react to and understand them.
With the help of JSX, we can write HTML code with javascript. React does not employ the createElement() method; Instead, JSX elements are used to create HTML elements. As a result, JSX facilitates the writing and addition of HTML components in React. A transpiler called babel.js will convert Jsx to javascript on the browser.
The ternary operator can be used with JSX components to conditionally render different elements or components based on certain conditions. The ternary operator is shorthand version of if/else statement and has the following syntax :
Condition? true:falseHere is an example of ternary operators within a JSX component:
functionMyComponents(props){
return(
<div>
{props.isLoggedIn ? <p>Welcome back!</p> : <p>please log in</P>}
)
}In this example the components receive props called isloggedin and use the ternary operator to determine whether to show a "welcome back message " or please login message. The condition is the prop is logged in is true it will render the first element and if it is false it will render the second element .
It is worth noting that the ternary operator is more concise than an if/else statement but it can be less readable when the conditions are complex in that case is recommended to use if/else statement.
HTML attributes are properties that are used to define the characteristics and behavior of HTML elements. they are added to the opening tag of HTML element and come in the form of name-value pairs, with the name being the attribute and the value being what it set to
For example, commonly used attributes include "class", "id", "src", "href", "for" etc, and events like "onclick".
<div class="my-class">Hellow world </div>But in react we use 'className' attribute instead of class.
Let's take another example of on click event in HTML. In HTML we use "on click in all lower case but in react we use camel case like 'onClick " " Also in HTML, we have to put the function in quotes and invoke it by putting parameters but in React we use curly braces and the function name without parenthesis.
We already know there are certain differences between html and jsx and one such difference that we have seen in html. In normal HTML we have for but we cannot use it in javascript since it is a reserved keyword in javascript so we use htmlFor in jsx.
A root in react refers to the top-level data structure that renders a tree. In React 18, we will have two root APIs: Legacy root API and New root API
The legacy root API is the existing API called the reactDOM.render method. It will create a root running in legacy mode, which is similar to usage in each version 17. If we are using reactDOM.render() in your react 18 app, we will definitely see the below issue.
AJSX element is converted into a regular javascript object during compilation so that it can be used to construct a genuine DOM element.
The reason in ReactDOM.render is no longer supported in React 18. Earlier, we used to render the component in the below way:
ReactDOM.render(<NavBar/>, document.getElementById('root'))The render() method of the react-dom package is considered legacy starting react-dom version 18. The method is replaced with createRoot() method that is exported from react-dom/client. The createRoot() method taked the root elements as parameters and creates a react root.
createRoot() is a new method introduced in React 18 that allows you to create a separate root for a react tree outside of the main react DOM tree. it take a single argument, which is a reference to an existing DOM element. It returns a new root object that has a render() method for rendering react components into the specified DOM element.
call createRoot to create a React root for displaying the content inside the browser DOM element.
// Import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom';
// Import the App component (assuming it's defined in a separate file)
import App from './App';
// Get the root DOM element where the React app will be rendered
const rootNode = document.getElementById('root');
// Old way of rendering React component
// ReactDOM.render(<App />, rootNode);
// New way of rendering React component using Concurrent Mode and createRoot
import ReactDOM from 'react-dom/client';
// Create a root instance using createRoot, passing the root DOM element
const root = ReactDOM.createRoot(rootNode);
// Render the App component inside the root
root.render(<App />);Old way (ReactDOM.render()):
ReactDOM.render() is the traditional way to render a React component into a DOM node.You pass the component you want to render (in this case, <App />) as the first argument, and the DOM node where you want to render it (in this case, rootNode) as the second argument.
New way (Concurrent Mode and createRoot()):
ReactDOM.render(), you first create a root instance using ReactDOM.createRoot(), passing in the root DOM element.root.render() with the component you want to render (in this case, <App />).Using Concurrent Mode and createRoot() is the recommended approach for rendering React components in newer applications, especially when dealing with large or complex UIs, as it can provide better performance and user experience.
https://nodejs.org/ennode -v
npm -vnpm create vite@latestcd first_project
npm install
npm run devnpm install -D tailwindcss
npx tailwindcss initcontent: ["./src/**/*.]@tailwind base;
@tailwind components;
@tailwind utilities;https://legacy.reactjs.org/docs/getting-started.html https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started https://www.w3schools.com/REACT/react_intro.asp