HTML-CSS

Day one of learning React.js

Photo by Lautaro Andreani on Unsplash

Day one of learning React.js

PrinceKr-Paswan's photo
PrinceKr-Paswan
·

2 min read

Table of contents

No heading

No headings in the article.

Welcome to the world of React! In this blog post, we'll be covering the basics of React and how to get started with it. If you're new to React, you may be wondering what it is and why it's so popular. React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by a community of developers. React is popular because it allows developers to build complex user interfaces with ease.

To get started with React, there are a few things you'll need to do. First, you'll need to create a new HTML file and add the React library to it. You can do this by adding the following code to the head section of your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="index.js"></script>
  </body>
</html>

This code will include the React library and the ReactDOM library in your HTML file. The React library contains the core functionality of React, while the ReactDOM library contains the functions for rendering React components to the DOM.

Next, you'll need to create a new JavaScript file and add your React code to it. This file should be linked to your HTML file using the script tag at the bottom of the body section.

In your JavaScript file, you can define a React component using the React.createElement function. This function takes three arguments: the type of component you want to create, any properties you want to pass to the component, and any children elements you want to include.

const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

This code creates a new h1 element with a class of "greeting" and the text "Hello, world!". You can then render this component to the DOM using the ReactDOM.render function.

ReactDOM.render(element, document.getElementById('root'));

This code renders the element component to the DOM, replacing the div element with an id of "root".

So that's it for day one of learning React! We covered the basics of React, including what it is and how to get started with it using a CDN. We also learned how to define and render a simple React component using the React.createElement and ReactDOM.render functions. Stay tuned for more blog posts as we continue our journey with React!

JavaScriptReactnamastereactWeMakeDevsWeb Development