Getting started with React JS

React JS is a open source JavaScript framework and Library and it is developed by Facebook and introduced in 2013, we can use to build a interactive web Apps efficiently with the help of JavaScript and React is a component based framework🙌.

How to create React App in your Machine

• Make sure🤼‍♂️ the Node JS is already installed in your machine, beacaue Node JS is a run time environmental for your React/JavaScript code executer.
• Open your terminal and type "npx" create-react-app appname.

  npx stands for Node package Executer

Syntax for creating the react app

npx create-react-app first-project

Foldering stracture

In react the folder stracture is be like below and the src folder is the core folder for your project

How to write a simple React code👨‍💻👨‍💻

Make sure you're writing a code in src folder App.js file .

for Example

function App(){

    return(
        <div>
        <h1 className ={{color: "green"}}>Hello This is First Heading</h1>
        </p>
        <div/>
    );

}
export default App;

In above code you created a function and your're exported a function using export default functionName and what ever inside the return it will return and execute the function code.🚀

For styling the your tags you can feel free to use inline style and you want to apply same style to all tags simply you can style it in index.css file.

Make sure while writing inline styles using classes you can write in by className not a class and applying stye use doubly curly braces and css value value should be wrapped with " ".

How to export a class component in react🤔

In react JS it's a pretty simple to create a function and export a function.

For example:

function yourApp(){
    return(
        <div>
        <h1> Exporting a class</h1>
        </div>
    )
}
export default yourApp;

In above code we have created a function and written some lines of code in side a function for exporting a function we are used default keyword to exporting a function🚀.

How to import a components in react🤔

In React we are creating a components and we are using those components anywhere in our react project.

Example see the below code to import components

import NavBar from './components/NavBar';
import Card from './components/Card';

function App(){

    return(
        <div>
        <NavBar/>
        <h1>Hello This is First Heading</h1>
        <p style={{margin:"20px"}}>Lorem ipsum dolor sit amet consectetur adipisicing excepturi.</p>
        <Card/>
        </div>
    );

}
export default App;

You can deeply observe the above code I have already written some amount of code in the NavBar and Card components and I have imported those components in our App.js file that's it so aimple🤞 importing the components in React files. After that you can use those components anywhere in your react project with valid syntax.

For example, to use those imported components simply write like this. <NavBar /> with self closing tag.

How to run React app🤔

It's a pretty simple make sure your project folder in same path use "npm start" for production "npm run build"

For example see the below output image of npm start

How to 🚀Install a CSS libraries in your React Project💻

You can see now a days so many of CSS libraries like Tailwind CSS, Bootstrap, Materialize, Bulma, Sass, Foundation etc,.

• For example here I will show you how to install Bootstrap in your React Project.
• Step-1
  • Go to getbootstrap.com and search for npm package npm install bootstrap@5.2.2 copy the link and paste in your React project current folder terminal and hit enter while writing on this blog my Bootstrap version is 5.2.2 may be your's different thats it now Bootstrap is installed in your project.
• Step-2
  • Only for CSS Simply copy and paste the Bootstrap CDN links in you public/index.html file

    Bootstrap CDN link

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

As of now your are learned a pretty basics about the React how to install and run the basic React code🚀

Thanks for reading🤝