JSX and Adding style in React JS

Writing markup with JSX

The markup syntax you’ve seen above is called JSX. It is optional, but most React projects use JSX for its convenience. All of the tools we recommend for local development support JSX out of the box. JSX is stricter than HTML. You have to close tags like <br/>. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>... </> wrapper: function AboutPage() { return (

<>

        <h1>About</h1>

        <p>Hello there.<br/>How do you do?</p>

    </>

); } If you have a lot of HTML to port to JSX, you can use an online converter.

Adding styles

In React, you specify a CSS class with className. It works the same way as the HTML class attribute:

<img className="avatar" />

Then you write the CSS rules for it in a separate CSS file: /* In your CSS */ .avatar {

border-radius: 50%;

} React does not prescribe how you add CSS files. In the simplest case, you’ll add a <link> tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project.

Comments

Post a Comment

Popular posts from this blog

Angular JS Course Roadmap

Image
 AngularJS had already achieved its end-of-life and was no longer receiving active development and maintenance as of my most recent update in September 2021. There might not be any more official courses that are exclusively AngularJS-focused after that. However, there are many resources accessible if you're interested in learning Angular (Angular 2+ and beyond), the contemporary replacement for AngularJS. Here is a general learning path for Angular: 1. Basic Web Development: It's crucial to have a firm understanding of web development technologies like HTML, CSS, and JavaScript before getting into Angular. Consider taking beginner web development courses initially if you are unfamiliar with these concepts. 2. JavaScript and TypeScript: TypeScript, a superset of JavaScript, is used in the construction of Angular. So it's important to grasp JavaScript. Additionally, TypeScript strengthens and improves the maintainability of Angular by adding static typing to JavaScript. Spen
Read more

How can we motivated while coding?

To maintain motivation in coding, set specific objectives, establish a routine, find your coding flow, use positive reinforcement, maintain organization, read articles, watch videos, follow coding-related social media accounts, learn new programming languages, join coding groups, track your work, take rests, maintain a healthy lifestyle, accept challenges, and visualize success. Setting clear goals and creating a routine for your coding job helps maintain momentum. Work on assignments appropriate for your level of experience to enter the "flow" state, and avoid simple or challenging activities. Use positive reinforcement and celebrate accomplishments to keep your drive high. Maintain organization by keeping your workspace clean and organized, reading articles, watching videos, and following coding-related social media accounts to find inspiration. Learn new languages, frameworks, or technologies to keep your skills fresh. Join coding groups or open-source projects to foster a
Read more

What is rapid Api?

  RapidAPI is a platform that, as of my most recent update in September 2021, enables developers to find, connect to, and manage APIs (Application Programming Interfaces) from a variety of sources. A set of guidelines and procedures known as an API makes it possible for various software programs to converse and interact with one another. Developers can access a variety of APIs more easily thanks to RapidAPI's role as a mediator between API providers and programmers without having to worry about complicated individual integration issues. Using a single set of credentials, developers can access a variety of services, data, and functionality from diverse sources. It offers a consistent interface for working with many APIs. RapidAPI provides a number of features, such as: 1. A huge selection of APIs from various categories, including weather, social media, payment gateways, data analytics, etc., may be found in the API marketplace. 2. Tools for controlling access to APIs and managing
Read more