React is a JavaScript library for building user interfaces. In this Article, We are going to learn about creating Our first React app.

Let's Start

pre-requisites

Before Starting with React You have to be good with HTML, CSS, and JavaScript.Install node, npm on your system to work with react.

Node.js

Node.js® is an open-source, cross-platform JavaScript runtime environment.

npm

npm is the world's largest Software Registry. The registry contains over 800,000 code packages. Open-source developers use npm to share software. Many organizations also use npm to manage private development.

Create a New React App

First You have to make a folder In which you want the app files to be shown . open your Terminal and go to the Directory .

cd foldername

To Create New React App run This command on your terminal It will Make A new React App on Your Desktop and Run on the browser.

npx create-react-app one-helloworld
cd my-app
npm start

Say Hello World.

It's Almost common that Whenever we start with a programming language or something. We first go for the Hello World. Let's do that here too.

First, let's go with the Easy Way.

To Print Hello Word You have to go to the src folder on the app from vscode. Then edit the p tag To Hello World.

src -> app.js -> edit P tag to "Hello World" ;

Now let's do on the Hard way

First of all, you have to delete all files In the src folder Then follow the below steps

Make an index.js file inside the src folder React loading starts from this src file so it's compulsory to name the same as above.
copy the code which is given below.

import ReactDom from 'react-dom';

const  App = () => {
    return (
      <>
        <h1 style={{ textAlign: "center", color: "green" }}>Hello World</h1>

      </>
    ); 
}

ReactDom.render(<App/> ,document.getElementById("root"))

The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside the React model if you need to.

And We are making the function App() which returns our react element. In the h1 element, We have added some styles also

by the last line, we are injecting components to the root via dom(if you check inside the public folder you can find an HTML name index.html in which there is a div with the id "root").

if you want you can also add some CSS files into React for that you have to create a style.css in the src folder and import the CSS file to the index.js

CSS code

body{
    background-color: #03203C
}

h1{
    color: #66AD47;
    font-size: 25px;
}

Add this line to the index.js file to import a CSS file

import "./style.css";

Now our hello world looks like this. if You can add more of your creativity and improve that too. ( ͡❛ ͜ʖ ͡❛)✌

conclusion

In this article, we learned some of the React for getting started. If you have come this far I hope You enjoyed reading.

Starting With React - create react app

Table of contents